SVG keeps edges sharp at every pixel density and can adapt colors to the theme. That flexibility comes with one constraint: the file must remain self-contained, simple and readable in a tiny space.
Build a square with a viewBox
Use a square viewBox, such as 0 0 64 64, and leave padding around the symbol. The viewBox defines the coordinate system without imposing a physical rendered size.
Reduce the artwork to its distinctive shapes. Fine details, tiny counters and full words often disappear at 16 pixels even though the vector file remains technically sharp.
| Item | Why | Test |
|---|---|---|
| Square viewBox | Predictable crop | 16×16 preview |
| Simple paths | Readability | Light and dark tabs |
| No dependencies | Self-contained load | Offline network |
| ICO fallback | Older clients | Root URL |
Make the file self-contained
Embed required styles inside the SVG. Convert text to paths when the symbol depends on a typeface, because an external web font is not a reliable dependency in this context.
Remove scripts, remote links and unnecessary editor metadata. Simple shapes and styles also make security review easier and reduce file size.
Finally, open the file by itself in a browser and test it offline. If the artwork changes or disappears, it still depends on an external resource that must be embedded or replaced.
Declare SVG with a fallback
Add link rel icon with type image/svg+xml and a root-relative URL. Also keep favicon.ico at the root for clients that do not select SVG or request ICO directly.
SVG does not replace the Apple Touch icon or manifest icons. Export opaque or maskable PNG files for those interfaces.
Adapt colors to the theme
A prefers-color-scheme rule inside a style element can change fill or stroke in dark mode. Define a robust default color first, then add the variant as progressive enhancement.
Test the file in real tabs and at several zoom levels. Also inspect the fallback when SVG is not selected: an ICO that disappears on a dark background remains a problem for those clients.
Primary sources
Frequently asked questions
Does an SVG need width and height?
A square viewBox is the essential part for scaling. Explicit width and height can be included, but the browser sizes the icon for its context.
Can it load an external font?
Do not rely on it. Convert lettering to paths for a self-contained and predictable file.
Is SVG enough for iOS?
No. Provide a separate opaque PNG Apple Touch icon for the home screen.