How to favicon best practices for seo and pwa in 2026
- Step 1Generate the base package from one SVG — Run your square brand SVG through Favicon Master to get
favicon.ico, the PNG sizes (includingicon-180.pngandicon-192/512), the SVG, andmanifest.json— the bulk of the checklist in one ZIP. - Step 2Serve the icons from the site root — Place
favicon.icoandmanifest.jsonat/. Browsers request/favicon.icoand parse the manifest from the link tag automatically; serving from a subfolder means every page needs explicit link tags. - Step 3Add the link block to every page head — Use the
<link>set from the README: SVG, PNG (16/32), apple-touch-icon (180),/favicon.ico, and the manifest link. Put it in your base template so it's on all pages, including error pages crawlers may hit. - Step 4Set cache headers deliberately — For hashed filenames use
Cache-Control: public, max-age=31536000, immutable. For the unhashed/favicon.icouse a shorter max-age (e.g. one day) so a brand change isn't stuck behind a year-long cache. - Step 5Add a maskable icon for PWAs (by hand) — The generated manifest icons have
purposedefaulting to 'any'. For a polished Android install, add a maskable variant with safe-zone padding andpurpose: maskableto the manifest yourself — the tool doesn't author one. - Step 6Validate in DevTools and a search preview — Use Chrome DevTools → Application → Manifest to confirm the manifest parses and all icon URLs resolve, then check how the favicon looks at 16px in a real tab and in a mobile search preview.
Where favicons matter (and the size that counts)
The surfaces a favicon touches and the practical requirement at each.
| Surface | What it needs | From the package? |
|---|---|---|
| Search result icon (mobile) | A clear square favicon; ICO/PNG/SVG all work | Yes — ICO + PNG + SVG |
| Browser tab | 16/32px raster or SVG | Yes — icon-16/32 + SVG |
| iOS home screen | 180×180 PNG apple-touch-icon | Yes — icon-180.png + link |
| PWA install (Android) | 192 + 512 PNG in the manifest | Yes — manifest.json + icon-192/512 |
| Polished PWA install icon | A maskable icon with safe-zone padding | No — author it yourself |
| Clean server logs | A real file answering /favicon.ico | Yes — favicon.ico |
What the generated manifest.json contains
Fixed manifest output — adjust the brand-specific fields after download.
| Field | Generated value | Best-practice action |
|---|---|---|
name | Your filename stem | Set to your real app/site name |
icons | icon-192.png (192) + icon-512.png (512) | Add a maskable variant for Android polish |
theme_color | #ffffff | Set to your brand colour |
background_color | #ffffff | Set to your splash-screen colour |
display | standalone | Keep, or choose minimal-ui/fullscreen |
Cookbook
The practical setup steps, including the bits the generator leaves to you.
Root placement + the link block
Files at / and the full link set in your base template so every page (including 404s) declares them.
/public favicon.ico favicon.svg (named source for a clean URL) icon-16.png icon-32.png icon-180.png icon-192.png icon-512.png manifest.json <head> (base layout) <link rel="icon" href="/favicon.ico" sizes="any"> <link rel="icon" type="image/svg+xml" href="/favicon.svg"> <link rel="apple-touch-icon" sizes="180x180" href="/icon-180.png"> <link rel="manifest" href="/manifest.json">
Cache headers that age gracefully
Hash long-lived assets; keep the unhashed ICO on a short leash so a rebrand isn't stuck for a year.
# hashed PNGs / SVG Cache-Control: public, max-age=31536000, immutable # unhashed /favicon.ico Cache-Control: public, max-age=86400
Set the brand colours the tool defaults to white
After download, replace the white theme/background with your brand and set a real name.
// manifest.json (edit after generating)
{
"name": "Acme Dashboard",
"icons": [
{ "src": "icon-192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "icon-512.png", "sizes": "512x512", "type": "image/png" }
],
"theme_color": "#6366f1",
"background_color": "#0b0b12",
"display": "standalone"
}Add a maskable icon for Android
The generator's icons are purpose 'any'. Add a padded maskable variant by hand so OS masks don't clip the logo.
// add to manifest.json icons[]
{ "src": "icon-512.png", "sizes": "512x512",
"type": "image/png", "purpose": "any" },
{ "src": "maskable-512.png", "sizes": "512x512",
"type": "image/png", "purpose": "maskable" }
// maskable-512.png = logo inside the inner 80% safe zone
// (author this image separately — not produced by the tool)Stop the /favicon.ico 404 in logs
Either ship the real ICO (recommended) or return 204 if you deliberately skip it.
Recommended: ship favicon.ico at root (the package includes it). If you intentionally omit it, return a 204 for /favicon.ico so crawlers and the browser stop logging a 404 on every visit.
Edge cases and what actually happens
No file answering /favicon.ico
404 noiseBrowsers and crawlers request /favicon.ico by default; without a file there it 404s on every visit, cluttering logs and wasting a crawl request. Ship the real ICO from the package, or return a 204 if you deliberately skip it.
PWA install prompt never appears
Manifest incompleteInstallability needs a valid manifest with 192px and 512px icons that actually resolve, served over HTTPS, plus a service worker. The package gives you the manifest and the icons; verify the URLs resolve in DevTools → Application → Manifest.
Updated favicon doesn't appear after deploy
Stale cacheBrowsers and CDNs cache favicons hard. Use hashed filenames for the PNG/SVG and a short max-age on the unhashed /favicon.ico, and invalidate the CDN for /favicon.ico after a rebrand. The generator's filenames are stable, so hashing is your job.
Manifest theme colour is white on a dark brand
Edit requiredThe generated manifest.json defaults theme_color and background_color to #ffffff. On a dark brand this makes the splash and address bar look wrong. Edit the manifest after download to your real brand colours — there's no option in the tool.
Android masks clip the logo
Add maskable iconWithout a maskable icon, Android applies its mask (circle, squircle) to your plain icon and can crop edge-to-edge logos. Add a purpose: maskable icon with the logo inside the inner 80% safe zone — the tool does not author one.
Non-square brand mark in search results
DistortedA non-square SVG is stretched by the generator, so the favicon looks squashed everywhere it appears, including search. Square the source first with svg-viewbox-fixer so the icon reads cleanly at 16px.
Tiny detail invisible at 16px
Design issueFine lines and small text vanish at favicon scale regardless of format. This is a design constraint, not a tool bug — simplify the mark for the icon. Run svg-pro-minifier on the result to keep the shipped SVG lean.
Expecting the manifest filename to be site.webmanifest
By designThe tool emits manifest.json, not site.webmanifest. The format is identical; just make sure your <link rel="manifest"> points at the filename you actually deploy. The README block already uses manifest.json.
Frequently asked questions
Do favicons affect SEO rankings?
Not as a direct ranking factor, but Google displays your favicon beside the URL in mobile search, so a clear, square favicon helps your result look trustworthy and clickable. A missing or distorted one hurts perceived quality and leaves /favicon.ico 404s in logs.
What sizes does a PWA actually require?
At minimum a 192×192 and a 512×512 PNG referenced in the manifest, plus an installable context (HTTPS, manifest, service worker). Favicon Master produces both sizes and the manifest.json that references them, so the icon side is covered.
Does the tool create a maskable icon?
No. The generated manifest icons default to purpose 'any'. For a clean Android install icon, author a maskable variant (logo inside the inner 80% safe zone) and add it to the manifest with purpose: maskable yourself.
What cache headers should favicons use?
Use max-age=31536000, immutable for filenames carrying a content hash, and a shorter max-age (around a day) for the unhashed /favicon.ico so a rebrand isn't stuck behind a year-long cache. The tool's filenames are stable, so add hashing in your build.
Why is my theme colour white?
The generated manifest.json hard-codes theme_color and background_color to #ffffff with no option to change them. Edit the manifest after download to your brand colours so the PWA splash and address bar match your site.
Where should the favicon files live?
At the site root. Browsers request /favicon.ico and read the manifest from its link tag automatically. Serving from a subdirectory forces explicit link tags everywhere and risks the default root request 404ing.
How do I force a favicon update after a rebrand?
Use hashed filenames for the PNG/SVG and update the link tags, keep /favicon.ico on a short cache, and invalidate the CDN for /favicon.ico. Hard-refresh during development to bypass the browser's aggressive favicon cache.
Is the manifest a site.webmanifest?
It's named manifest.json, but it's the same web-app-manifest format. Just make your <link rel="manifest"> point at manifest.json (as the README snippet does) or rename the file to match your preferred convention.
Do favicons impact Core Web Vitals?
Negligibly when done right — the files are tiny and cached. The real cost is indirect: a missing /favicon.ico adds a 404 round-trip on visits and crawls. Shipping the real ICO and the manifest avoids that waste.
Does the apple-touch-icon need rounded corners?
No — supply a square 180px PNG (the package's icon-180.png) and iOS applies its own rounded mask. Pre-rounding causes double rounding. The generator outputs a square PNG, which is exactly what iOS wants.
Is anything uploaded when I generate the package?
No. Favicon Master rasterises and zips entirely in your browser (or on your own machine via the local runner). Your brand SVG never reaches JAD's servers, which matters when the mark is unreleased.
What about native app store icons?
Those are separate from web favicons. Use svg-app-icon-gen for the iOS appiconset and Android mipmap densities plus the 1024/512 store icons. Favicon Master is purpose-built for web/PWA favicons.
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.