Favicon Tags Explained: The Complete 2026 Setup Guide
Understand with AI
Discuss with your preferred AI assistant
A modern, fully cross-platform favicon set spans .ico, SVG, multiple PNG sizes, apple-touch, and maskable icons.
Favicons appear in tabs, bookmarks, browser history, and Google mobile search results — every brand touchpoint.
Generate every tag and a valid manifest instantly instead of hand-writing markup and looking up sizes.
A favicon is the tiny icon that appears in browser tabs, bookmarks, history, and search results. It looks like a small detail, but in 2026 it does real work: it makes your brand recognizable in a crowded tab bar, it shows up next to your listing in Google's mobile search results, and — when you ship the right tags — it lets people add your site to their phone's home screen like a native app.
The problem is that "the right tags" is no longer one line of HTML. Different platforms want different files: Chrome and Firefox prefer a scalable SVG, Safari wants an Apple touch icon and a pinned-tab mask, Android reads a web manifest, and old browsers still fall back to favicon.ico. This guide explains every tag, what it does, and how to generate a clean, complete set in seconds.
What Favicon Tags Actually Do
Favicon markup is a small group of <link> and <meta> tags in your page's <head>. Each one targets a specific surface:
- favicon.ico — the universal fallback. Browsers and feed readers automatically request /favicon.ico, so always ship one (ideally a multi-size .ico containing 16, 32, and 48px).
- SVG favicon — a single scalable file that stays crisp on any display and can even adapt to light and dark mode via CSS media queries.
- PNG favicons (16x16, 32x32) — explicit raster sizes for browsers that don't yet use the SVG.
- apple-touch-icon — a 180x180 PNG used when someone adds your site to an iOS or iPadOS home screen.
- theme-color meta — colors the browser UI (the Android address bar, the PWA title bar) to match your brand.
- mask-icon — a monochrome SVG for Safari's pinned tabs.
- site.webmanifest — a JSON file that tells Android and PWAs your app name, icons, colors, and how to launch.
Why a Complete Set Matters for SEO and Brand
Google displays favicons next to organic results on mobile and in the "site name" treatment on desktop. A missing or low-quality icon means a generic globe placeholder — which quietly costs you click-through rate against competitors who show a sharp, recognizable mark. A favicon won't rank you higher on its own, but it influences the one metric that does feed ranking signals: whether people click your result instead of the one above it.
For Google to use your favicon, it must be a square (multiple of 48px works well), reachable at a stable URL, and declared with a rel="icon" link on your homepage. The same icons you generate here satisfy that requirement and every other platform at once.
How to Add Favicon Tags, Step by Step
1. Create one high-resolution master icon
Start from a single square design at 512x512 or larger. Keep it simple — at 16px, fine detail and small text disappear. A bold glyph or monogram on a solid background reads best.
2. Export every required size
From that master, export the files the tags reference: favicon.ico, 16 and 32px PNGs, a 180x180 apple-touch-icon.png, 192 and 512px PNGs for the manifest, and a 512px maskable version with extra padding so Android's adaptive shapes don't clip it.
3. Set your theme and background colors
Pick a theme color (your brand color) and a background color (usually white or your splash background). These feed both the theme-color meta tag and the manifest, keeping the browser chrome and PWA splash screen on-brand.
4. Drop the tags into your <head>
Paste the generated block into the <head> of your base template or layout so every page inherits it. Then upload the icon files and the manifest to the matching path — the site root by default, or the base path you chose.
5. Verify across platforms
Hard-refresh in Chrome (favicons are cached aggressively), check the tab and an iOS "Add to Home Screen", and run Lighthouse's PWA / installability audit to confirm the manifest and icons are detected.
Common Favicon Mistakes
- Only shipping favicon.ico. You'll get a blurry icon on retina screens and no home-screen or PWA support.
- Transparent apple-touch-icon. iOS composites it over black; always use a solid background.
- Wrong paths. If files don't live where the tags point, browsers silently fall back to the globe. Match your base path exactly.
- No maskable icon. Without a padded maskable version, Android crops your logo inside its adaptive shape.
- Forgetting to bust the cache. Browsers cache favicons hard — rename or version files when you change the artwork.
Favicon File Reference
| File | Size | Used by |
|---|---|---|
| favicon.ico | 16–48px | Legacy browsers, feed readers |
| favicon.svg | scalable | Modern Chrome, Firefox, Edge |
| apple-touch-icon.png | 180x180 | iOS / iPadOS home screen |
| icon-192.png | 192x192 | Android install (manifest) |
| icon-512.png | 512x512 | PWA splash & high-res (manifest) |
| icon-maskable-512.png | 512x512 | Android adaptive icon |
Expert Tips
Design for 16 pixels first
Your icon will most often be seen tiny. Use a bold, simple glyph or monogram on a solid fill — fine lines and small text vanish at favicon size.
A sharp favicon earns clicks
Google shows favicons beside mobile results. A recognizable mark stands out against the default globe and can nudge click-through rate in your favor.
Frequently Asked Questions
What is the difference between a favicon and an apple-touch-icon?
A favicon appears in browser tabs, bookmarks, and search results, and is usually small (16–48px). An apple-touch-icon is a larger 180x180 PNG that iOS and iPadOS use when someone saves your site to their home screen. You need both, declared with separate link tags, because they serve different surfaces.
Do I still need a favicon.ico file in 2026?
Yes. Even though modern browsers prefer SVG and PNG favicons, many tools, crawlers, and older browsers automatically request /favicon.ico from your site root. Shipping a multi-size .ico is a cheap, reliable fallback that prevents broken or missing icons.
What is the theme-color meta tag for?
The theme-color meta tag tells the browser what color to paint its surrounding UI — most visibly the Android address bar and the title bar of an installed PWA. Setting it to your brand color makes the whole experience feel cohesive and intentional.
What does site.webmanifest do?
The web manifest is a small JSON file that turns your site into an installable web app. It defines the app name, short name, icons, theme and background colors, start URL, and display mode. Android, Chrome, and Edge read it to power "Add to Home Screen" and the standalone, app-like launch experience.