Favicon HTML tags: a minimal snippet that works (plus the optional extras)
Copy a favicon snippet you can trust, understand what each tag does, and verify it on your live site in under a minute.
If you want the fastest path to a correct favicon setup, do this first:
- Generate a full pack and a ready-to-paste snippet with the Favicon Generator.
- Confirm what your site serves right now with the Favicon Checker.
This post explains the favicon-related HTML tags you will see, which ones matter, and what a minimal setup looks like.
The minimal snippet (good coverage, low risk)
If you want a simple setup that works on most sites, ship these files:
favicon.icofavicon-32.pngfavicon-16.pngapple-touch-icon.pngsite.webmanifest
Put them in /favicons/ (or another folder you control), then paste this snippet in your <head>:
<link rel="icon" type="image/png" sizes="32x32" href="/favicons/favicon-32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicons/favicon-16.png" />
<link rel="icon" type="image/x-icon" href="/favicons/favicon.ico" />
<link rel="apple-touch-icon" sizes="180x180" href="/favicons/apple-touch-icon.png" />
<link rel="manifest" href="/favicons/site.webmanifest" />
If you do not want a /favicons/ folder, change every href so it matches where you deployed the files.
What each tag does (and why you might keep it)
rel="icon" (PNG sizes)
These are your everyday tab icons.
The sizes attribute matters because browsers can pick the closest match instead of scaling.
rel="icon" (ICO)
favicon.ico is the legacy catch-all. Many browsers still request /favicon.ico automatically in some cases.
Your ICO should embed multiple sizes so it stays crisp. If you already have a PNG, you can generate one with PNG to ICO.
rel="apple-touch-icon"
iOS uses apple-touch-icon.png for home screen icons when someone adds your site.
If you only update favicon.ico, your iPhone home screen icon can stay stale.
If you want a deeper iOS-focused troubleshooting guide, read Apple touch icon fixes.
rel="manifest"
site.webmanifest is for installable web apps. It also gives browsers more icon choices.
If you generate a full pack with the Favicon Generator, the manifest is included and the snippet links to it.
Optional extras (use these when you need them)
Dark mode favicon variants
If your brand icon disappears on dark browser UI, you can ship a dark variant and let the browser choose based on prefers-color-scheme.
The generator can produce both variants and a matching snippet. If you want the details and examples, read Dark mode favicons: light and dark.
Safari pinned tab (mask-icon)
Safari pinned tabs use a monochrome SVG mask icon, not your PNGs.
If you care about pinned tabs, add mask-icon and choose a color. This guide covers it end-to-end: Safari pinned tab icon: what mask-icon is and when to use it.
theme-color
If you ship a Web App Manifest, you will often also set a theme-color meta tag to control the browser UI color.
This is optional for favicons, but it is part of a clean "installed app" experience on Android and some desktop browsers.
Common mistakes that break favicons
Your href paths do not match what you deployed
These two are different URLs:
/favicons/favicon-32.png/favicon-32.png
When a favicon does not show, confirm you are serving files from the same paths you reference in <head>.
Your page claims a size that the file does not have
If you write sizes="32x32" but ship a 16x16 image at that URL, browsers can scale it and it will look soft.
If you want a fast fix, regenerate a pack and paste the snippet so the file names and sizes match.
You are debugging in a browser profile that has the old icon cached
Favicons cache aggressively. If you are updating an existing site, use a clean test:
- Incognito/private window, or
- A different browser, or
- A different device.
If you need a step-by-step cache-busting checklist, read Favicon not updating? Fix it with a cache-busting checklist.
Verify on your live URL (do not guess)
After you deploy files and paste the snippet, run the Favicon Checker on your live URL.
You want to see:
- The tags detected in your HTML
- 200 status codes for each icon URL
- Sizes that match the file names and the
sizesattributes
Privacy and uploads
When you use the Favicon Generator or converters, your image is uploaded for processing so the server can generate the icon files.
If you need the details, see the privacy policy.
Related tools
- Need a clean ICO from an existing PNG? PNG to ICO
- Have an old ICO and want the embedded PNG sizes? ICO to PNG
- Want a quick audit of what is live? Favicon Checker