How to favicon best practices for seo and pwa in 2026
- Step 1Serve all favicon formats from root — Place favicon.ico, favicon.svg, and site.webmanifest at the site root (/). Browsers request them from / by default — serving from a subdirectory requires explicit link tags in every HTML file.
- Step 2Set correct cache headers — Set Cache-Control: public, max-age=31536000, immutable for favicon files served with a content hash in the filename. For /favicon.ico without hash, use max-age=86400 (1 day) to allow updates without a year-long stale cache.
- Step 3Validate PWA installability — Use Chrome DevTools > Application > Manifest to verify your site.webmanifest is parsed correctly and all icon URLs resolve. A PWA requires at least one icon with purpose: 'any' and one with purpose: 'maskable' at 512×512.
Frequently asked questions
Do favicons affect Google search rankings?+
Indirectly. Google uses the favicon to display the site icon in mobile search results next to the URL. A missing or low-quality favicon can make search results look less trustworthy. Google also uses structured data (WebSite schema) alongside the favicon for site name display.
What is a maskable icon and why do I need one?+
A maskable icon is a PWA icon designed with 'safe zone' padding (the inner 80% circle) so that OS icon masks (circles on Android, rounded squares on Samsung) do not clip the logo. Without a maskable icon, the OS uses the plain icon which may get awkwardly cropped.
How often do browsers re-fetch the favicon?+
Browsers cache favicons aggressively. Chrome re-fetches after the Cache-Control max-age expires or when the browser cache is cleared. During development, hard-refresh (Ctrl+Shift+R) or clear site data to force a favicon refresh.
Why does my updated favicon not appear immediately after deployment?+
Browsers and CDNs may have cached the old favicon. For production updates, use a new filename with a content hash (favicon.abc123.ico) and update your HTML link tags to reference the new file. Alternatively, invalidate the CDN cache for /favicon.ico after deployment.
Privacy first
Every JAD SVG tool runs entirely in your browser using the DOM API and Canvas. Your SVG files never leave your device — verified by zero outbound network requests during processing.