Favicon launch checklist: verify tabs, iOS, PWA, and caching before you ship
A production preflight checklist for favicons. Deploy a complete pack, paste the right <head> tags, audit status codes and dimensions, and test across devices without fighting cache.
Favicons are small, but they are a launch-time footgun. You can deploy the right files and still see the wrong icon because browsers cache them aggressively and different platforms look for different things.
Use this checklist when you are about to ship a new site, rename a brand, or swap a logo. It is designed for speed; you can get to "verified and done" in under an hour.
If you want the shortest path:
- Generate a full pack with the Favicon Generator.
- Deploy the entire pack to one folder like
/favicons/. - Paste the generated
<head>snippet. - Run the Favicon Checker on your production URL.
Pick one favicon folder and stick to it
Most favicon problems are path problems.
Choose a single folder for your icons and do not spread them across your app:
- Recommended:
/favicons/
Then make sure every href points at that folder. Avoid mixing:
/favicon.ico/assets/favicon.ico/icons/favicon.ico
Pick one and ship it.
Checklist 1: your files exist on the server
If you used the Favicon Generator, deploy the whole set it outputs, not a subset.
At minimum, you want these live:
favicon.icofavicon-16.pngandfavicon-32.pngapple-touch-icon.png(180x180)site.webmanifest(plus the PNGs it references)browserconfig.xml(cheap to include)
Quick test: open a few URLs directly in the browser:
https://yourdomain.com/favicons/favicon-32.pnghttps://yourdomain.com/favicons/apple-touch-icon.pnghttps://yourdomain.com/favicons/site.webmanifest
If any of these 404, your snippet can be perfect and you will still see missing or stale icons.
Checklist 2: your <head> tags match the deployed path
Do not hand-write a favicon snippet from memory. Copy the snippet that matches your deployed path.
A baseline snippet looks like this:
<link rel="icon" type="image/x-icon" href="/favicons/favicon.ico" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicons/favicon-16.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicons/favicon-32.png" />
<link rel="apple-touch-icon" sizes="180x180" href="/favicons/apple-touch-icon.png" />
<link rel="manifest" href="/favicons/site.webmanifest" />
<meta name="theme-color" content="#0891b2" />
Two details matter more than everything else:
- The
hrefpaths are correct. - The PNG
sizesvalues match the real image dimensions.
If you want the safest set of sizes to ship, this guide lays it out: Favicon sizes: what you actually need (and what you can skip).
Checklist 3: you do not have multiple favicon systems fighting
It is easy to end up with two sources of truth.
Examples:
- You added manual
<link rel="icon">tags, but your framework auto-generates icons from special files. - You have an old favicon plugin or theme snippet still injecting tags.
What to do:
- View source on your production page.
- Search for
<link rel="icon"andapple-touch-icon. - Remove duplicates and keep one consistent snippet.
If you are on Next.js App Router, this is a common trap. This guide shows a clean approach: Add a favicon to Next.js App Router.
Checklist 4: your icon URLs return 200 and have sane dimensions
This is where most launches go sideways: a redirect, a 403, or a 404 that gets masked by caching.
Run the Favicon Checker on your live URL and look for:
- Icon URLs returning non-200 status codes
- Unexpected dimensions (for example, a 16x16 icon being used as a large icon)
- Missing
apple-touch-icon
If the checker reports issues, fix the server paths first. Do not start clearing caches yet.
Checklist 5: iOS home screen icon is correct
iOS home screen icons come from apple-touch-icon.png. If you do not ship it, iOS may use a low-resolution fallback or a screenshot.
Verify it:
- Open your site in Safari on iOS.
- Share button.
- Add to Home Screen.
If the icon is blurry on iOS, you are often missing the 180x180 touch icon or you generated it from a small source. This guide helps: Apple touch icon fixes: get iOS home screen icons right.
Checklist 6: your manifest is reachable and references the right paths
If your site is installable (or you plan to be), your Web App Manifest matters.
Open your manifest URL directly:
https://yourdomain.com/favicons/site.webmanifest
Confirm:
- It returns 200.
- The
icons[].srcvalues point at real files on your domain.
If you want to understand what icons the manifest is for, this guide covers it: site.webmanifest icons: what PWAs use (and what browsers ignore).
For spec-level background reading, MDN documents the Web App Manifest.
Checklist 7: test updates without being tricked by cache
Do not trust your daily browser profile for launch verification.
Use at least two of these:
- A private window
- A second browser
- A second device
If the favicon does not update after you deploy, do not keep refreshing the same tab. Follow a cache-busting flow: Favicon not updating? Fix it with a cache-busting checklist.
Checklist 8: service workers are not serving stale icons (PWA sites)
If you have a service worker, it can keep serving old assets after deploy.
Fast test:
- Open DevTools.
- Application tab.
- Service Workers.
- Unregister, then hard reload.
If the icons update after unregistering, your service worker caching rules need to allow updates for /favicons/* and your manifest.
If you only have 10 minutes before launch
Do these three things:
- Deploy a fresh pack from the Favicon Generator to
/favicons/. - Paste the generated snippet and remove any old favicon tags.
- Run the Favicon Checker and fix any non-200 icon URLs.
Then test once in a private window and once on a phone.
Privacy and uploads (for generator users)
If you generate a pack here, your image is uploaded for processing. It is processed in memory and discarded immediately after generation. Details live in the Privacy Policy.
Related tools
- Generate icons and a ready-to-paste snippet: Favicon Generator
- Audit what your site serves right now: Favicon Checker
- Need only an ICO from a PNG: PNG to ICO