Quick answer
Use an explicit viewBox, inline shapes, and embedded styles. Avoid external fonts, remote images, scripts, and dependencies that icon fetchers may not load.
- Last verified
- July 31, 2026
- Evidence
- Primary documentation plus transparent editorial analysis
- Primary sources
- 2
Build a self-contained file
Use an explicit viewBox, inline shapes, and embedded styles. Avoid external fonts, remote images, scripts, and dependencies that icon fetchers may not load.
Connected next stepPWA and Maskable Icons: Designing for Adaptive Shapes for the closest prerequisite or comparison.
Add theme awareness
A prefers-color-scheme media query can change fills for light and dark browser chrome. Ensure the default state is still readable.
Connected next stepFavicon ICO Format: Inside Multi-Resolution Icon Files for the next connected implementation decision.
Declare and fall back
Use rel=icon, type=image/svg+xml, and sizes=any. Follow it with a raster PNG and keep /favicon.ico for clients that do not select SVG.
Connected next stepBuild and inspect the SVG favicon package and verify the decision with a working output.
Constrain the SVG execution surface
Use a square viewBox, embedded presentation attributes or style, and vector geometry that does not need remote resources. Remove scripts, event handlers, foreignObject content, external images, and font dependencies.
Serve the file with image/svg+xml and test the public bytes. A server that returns HTML or forces a download can defeat otherwise valid SVG markup.
Raster-test the vector at native sizes
SVG scales mathematically, but its edges still land on a finite pixel grid in the tab. One-unit strokes, close parallel lines, and tiny counters can blur or merge at 16×16.
Compare 16, 32, and 48 pixels on light and dark chrome. Adjust geometry and optical weight in the source rather than relying on export sharpness alone.
Apply this guide with the relevant tools
Use the smallest tool that verifies the specific decision described above. Each destination keeps the source format, deployment evidence, or platform purpose explicit.
Review the headings, sources, implementation artifact, and update record for this guide as structured JSON.
Download guide evidence ↓- Guide
- SVG Favicons: Crisp Icons, Dark Mode, and Safe Markup
- Coverage
- Client behavior can change by browser, operating system, platform version, cache state and deployment configuration. Unperformed manual observations are not claimed.
Questions, answered
Can SVG contain text?+
Technically yes, but font availability and tiny rendering make outlined paths or simple shapes safer.
Will Google use SVG?+
Google accepts valid favicon formats, provided the file meets its crawl and shape requirements.