SVG stroke-linecap: How Line Ends Shape Favicon and Logo Artwork

The stroke-linecap property in SVG controls the shape drawn at the open ends of a stroked line. It has three values: butt, round and square. Butt is the default and stops the stroke exactly at the path's endpoint. Round adds a semicircular cap, and square adds a rectangular cap. Both of those extend past the endpoint by half the stroke width. In a favicon, where a mark is drawn on a grid only a few pixels wide, that small difference in line ends can change how a symbol reads and whether it gets clipped at the edge of the icon.

Scope note: no source material specific to a particular favicon, logo, tool or product was supplied for this article. What follows is based on the documented behavior of the SVG format and general vector-artwork practice. It contains no measured results, browser test data or product-specific claims.

The three line-cap values compared

Value | Shape at line end | Extends past endpoint? | Typical visual effect

butt (default) | Flat edge cut square to the line direction | No | Crisp, technical, can look abrupt

round | Semicircle with diameter equal to stroke width | Yes, by half the stroke width | Soft, friendly, forgiving at small sizes

square | Rectangle with depth of half the stroke width | Yes, by half the stroke width | Flat ends, but the line looks longer than butt

Butt and square ends both look flat, so they can be hard to tell apart. The difference is length. A square-capped line is longer than a butt-capped line drawn from the same coordinates by a full stroke width in total, half at each end.

Where stroke-linecap applies, and where it does not

• It affects the ends of open subpaths, such as lines, polylines and unclosed path segments.
• It has no effect on the outline of closed shapes such as rect, circle or a path ended with a closepath command, because those have no open ends. Corners there are governed by stroke-linejoin instead.
• It applies to each dash when stroke-dasharray is used, so round or square caps change the apparent length of dashes and the gaps between them.
• For a zero-length subpath, such as a path that moves to a point and draws a line to the same point, butt draws nothing, while round draws a dot and square draws a small square. This is a common way to draw dots in stroke-based icons.
• It does nothing to filled shapes that have no stroke, and nothing to raster images embedded inside an SVG file.

The last point matters when evaluating a supplied favicon. A file with an .svg extension is not proof that it contains editable vector paths. Some SVG files simply wrap an embedded PNG or JPEG, and a raster preview of an icon can look identical to true vector artwork. If the line ends you want to change are part of an embedded image, stroke-linecap cannot reach them. Open the file in a text editor or vector application to confirm that the lines are actual stroked paths.

How to set it

stroke-linecap can be written as a presentation attribute on an element, inherited from a parent group, or set as a CSS property. A minimal favicon-style example looks like this:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <g fill="none" stroke="#1a1a1a" stroke-width="4" stroke-linecap="round">
    <path d="M8 24 L24 8"/>
    <path d="M8 8 L8 8"/>
  </g>
</svg>

Here the diagonal line gets rounded ends. The second path has zero length, so the round cap renders it as a dot. Setting the property on the group keeps line ends consistent across the whole mark, which is usually what an icon needs.

Why line caps matter more in favicons

Favicons are shown far smaller than most logo artwork, so a cap that adds half a stroke width is a significant share of the drawing. Several practical issues follow from the documented geometry:

• Clipping at the edge: round and square caps extend beyond the path's endpoint. If a line ends at the boundary of the viewBox, the cap falls outside it and is cut off. Leave a margin of at least half the stroke width, or shorten the path.
• Optical length: switching from butt to round or square makes every open line longer. Proportions tuned with one cap style will shift when you change it.
• Legibility at small sizes: rounded ends are often chosen for small icons because they avoid sharp corners, which can blur when rasterized at very low resolution. This is a design judgment, not a rule. A flat, geometric mark may be better served by butt caps.
• Consistency with joins: stroke-linecap handles ends, while stroke-linejoin handles corners. Mixing round caps with mitered joins, or the reverse, can look inconsistent unless it is deliberate.

Browsers rasterize an SVG favicon to whatever pixel size they display, so the final appearance depends on the renderer and the display size. SVG favicon support is not universal across browsers and platforms. Common practice is to supply PNG or ICO fallbacks alongside the SVG. Any raster fallback should be exported after the line caps are final, so all versions match.

Live strokes versus outlined strokes in delivered files

A logo or favicon can be delivered with live strokes, where the line-cap setting stays editable, or with strokes converted to filled outlines. Most vector applications offer an outline-stroke or expand command. After conversion, the cap shape is baked into the geometry and stroke-linecap no longer applies.

• Live strokes keep the file editable. Stroke width and cap style can be adjusted later, which is useful during design.
• Outlined strokes render the same wherever the file is used. They do not depend on how a program interprets stroke properties, and they keep their proportions when the artwork is scaled. With live strokes, scaling the artwork may or may not scale the stroke width, depending on the software and settings.
• A delivery package often includes both: an editable master with live strokes and a final production file with outlined paths. Whether to do this is a workflow choice rather than a format requirement.

Related: the vector-effect property with the value non-scaling-stroke keeps a stroke's width constant when the element is transformed. This changes stroke thickness, and therefore cap size, relative to the rest of the artwork. It is rarely what a fixed-size favicon needs, but it can explain why line ends look different from what was expected in some files.

Before editing someone else's favicon or logo

Being able to download an SVG icon, or to open and edit its paths, does not mean you are permitted to modify it. Changing line caps alters the artwork. If the mark belongs to another organization, permission to use the file does not automatically cover modifying the design, its typography or its trademark. Check the applicable license or brand guidelines first.

Summary

stroke-linecap sets the shape of open line ends in SVG: butt for a flat end at the endpoint, round for a semicircular extension, and square for a rectangular extension. Because round and square caps add half the stroke width beyond each end, they affect line length, edge clipping and small-size legibility, all of which matter in favicons. The property only works on true stroked vector paths. It has no effect on closed shapes, fills, embedded raster images, or strokes that have already been converted to outlines.