Icons / 3 MIN READ
From SVG to favicon: start small
Move from an editable source to a browser tab by separating coordinates, pixels, and file formats—and testing each destination.
A browser tab gives an icon very little room. The lighting, explanatory copy, and motion of a homepage cannot help it there; what remains is mostly silhouette and contrast. Begin the first design round at small sizes. Place the same mark in 16-, 32-, and 128-pixel preview cells. Inspect the thinnest line, the smallest gap, and whether the mark appears off-centre. The large image is a magnifying glass for workmanship. The small image is where the icon actually works.
Coordinates are not resolution
Keep an SVG source so that its geometry remains editable. A viewBox="0 0 256 256" defines internal coordinates; it does not restrict output to 256 pixels. Establish the centre, margins, and strokes in one coordinate system, then let the display size determine how many screen pixels they occupy. Thickening a stroke before reducing the image often helps more than adding a shadow to a blurred edge. MDN on viewBox
Text in an SVG also depends on fonts. Including the character 聚 does not mean every computer has the same typeface. Check the exported PNG when making a text-based seal, and document the font source when handing someone an editable file. If a fixed outline is necessary, a suitable vector editor can convert text to paths; keep a separate copy with editable text.
Three formats, three jobs
SVG preserves editable shapes. PNG fixes an image to a pixel grid. ICO is an icon container that can hold multiple images. Renaming a PNG file to .ico does not convert it. Use a real export function, reopen the result, and check that it is recognized, its edges remain intact, and no unexpected white rectangle appears behind the transparent areas. Microsoft icon documentation
An application manifest can declare several icon sizes, such as 192- and 512-pixel PNGs. Those serve common application contexts; they do not replace small-size inspection. A beautifully detailed 512-pixel emblem can still lose its character in a browser tab. Web app manifest guidance
Test the actual destination
A page, browser tab, and search result are different destinations. Google Search chooses a favicon per hostname; two subdirectories under the same hostname cannot specify separate search favicons. An updated browser icon also does not imply that a search cache has refreshed. Check the page reference and the actual file response before waiting for an external system to fetch it again. Search favicon guidance
Exercise: apply the Cinnabar seal preset in the workshop, retaining two letters and one frame. Download the source and raster versions. Compare them against white, dark grey, and a transparency checkerboard. Record the smallest recognizable size and one detail to remove. Make that change and repeat the inspection before adding decoration.