logoredraws.com

Adjusting an SVG Favicon Gradient with Stop Offset

How the stop offset attribute controls where colors fall in an SVG favicon gradient, how values are interpreted, and what to check before shipping the icon.

Published

Contents
  1. The short answer
  2. How a stop is structured
  3. How offset values are interpreted
  4. Common adjustments
  5. Why the gradient's coordinate system matters
  6. Favicon-specific considerations
  7. Before editing someone else's logo
  8. Evidence gaps

The short answer

In an SVG favicon, a gradient is defined by a linearGradient or radialGradient element that contains two or more stop elements. Each stop's offset attribute sets where that color sits along the gradient. A value of 0 (or 0%) is the start of the gradient, 1 (or 100%) is the end, and anything in between places the color proportionally. To change how a favicon gradient looks, such as making one color dominate, tightening a transition, or creating a hard color split, you move the offsets. You do not need to change the shape itself.

This works only when the gradient is native SVG markup. If the favicon file is an SVG wrapper around an embedded PNG or JPEG, the gradient is baked into pixels and there are no stops to edit. A .svg extension does not guarantee editable vector artwork. Open the file in a text editor or vector tool and confirm that gradient and stop elements are actually present.

How a stop is structured

A minimal favicon with a diagonal two-color gradient looks like this. A standalone file also needs the standard SVG namespace declaration on the root svg element, which is left out here for brevity.

<svg viewBox="0 0 32 32">
  <defs>
    <linearGradient id="brand" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0"   stop-color="#ff7a18"/>
      <stop offset="1"   stop-color="#af002d"/>
    </linearGradient>
  </defs>
  <rect width="32" height="32" rx="6" fill="url(#brand)"/>
</svg>
  • offset: the position of the stop along the gradient vector, written as a number from 0 to 1 or a percentage from 0% to 100%.
  • stop-color: the color at that position.
  • stop-opacity: optional transparency for that stop, from 0 to 1.
  • x1, y1, x2, y2 (linear) or cx, cy, r, fx, fy (radial): these define the line or circle that the offsets are measured along.

How offset values are interpreted

The behavior below comes from the SVG specification. It is general and is not based on testing specific to this article.

  • Values below 0 are treated as 0, and values above 1 (or 100%) are treated as 1.
  • Stops are read in document order. If a stop's offset is smaller than the offset of an earlier stop, it is raised to match the largest previous offset.
  • Two consecutive stops with the same offset produce an instant change of color instead of a blend. This is how hard-edged bands are made.
  • Before the first stop, the area takes the first stop's color. After the last stop, it takes the last stop's color. A first offset greater than 0 therefore creates a solid lead-in area.
  • Numbers and percentages are equivalent, so 0.25 and 25% mean the same position.

Common adjustments

To shift the midpoint so the first color covers more of the icon, add a middle stop or move the existing stops. In the next example the orange holds solid until 40% and then blends to red by the end.

<stop offset="0.4" stop-color="#ff7a18"/>
<stop offset="1"   stop-color="#af002d"/>

For a hard split, which is often more legible at favicon sizes than a soft blend, give two adjacent stops the same offset:

<stop offset="0"   stop-color="#ff7a18"/>
<stop offset="0.5" stop-color="#ff7a18"/>
<stop offset="0.5" stop-color="#af002d"/>
<stop offset="1"   stop-color="#af002d"/>

Why the gradient's coordinate system matters

Offsets are measured along the gradient vector, so the same offsets can look different depending on gradientUnits. With the default, objectBoundingBox, the vector coordinates are fractions of the filled shape's bounding box, and the gradient stretches to fit each shape. With userSpaceOnUse, the coordinates are in viewBox units. A shared gradient then keeps a fixed position across several shapes, which helps when a mark is built from separate paths that should read as one continuous gradient. If adjusted offsets do not land where you expect, check this attribute and the vector coordinates before changing the stops further.

Favicon-specific considerations

  • Small sizes: browsers often show favicons at very small pixel dimensions, where subtle multi-stop blends can turn muddy. Fewer stops, stronger contrast, or hard splits usually hold up better. This is design guidance, not a measured result.
  • References by id: the fill refers to the gradient's id. If you combine several SVGs into one document, duplicate ids can make a shape pick up the wrong gradient.
  • Fallbacks: SVG favicon support differs between browsers and versions. The supplied material does not confirm which ones support it today, so check current compatibility and provide a raster fallback such as ICO or PNG alongside the SVG.
  • Raster exports: when you export PNG or ICO fallbacks, the gradient becomes pixels. Edit the offsets in the SVG master and re-export, rather than retouching the raster files.

Editable stops make it technically easy to recolor or rebalance a gradient in a downloaded logo. Being allowed to download a logo file is not the same as being allowed to modify its artwork or use the trademark, though. If the favicon represents a brand you do not own, confirm that its usage terms permit changes to the gradient.

Evidence gaps

No subject-specific evidence was supplied for this article. It contains no browser support tables, rendering tests, or version data. The explanations above rely on the general behavior defined in the SVG specification, and the favicon design suggestions are editorial judgments. Verify browser support and rendering at your target sizes in the environments you need to serve.