Digital Tools · 10 min read
The Complete Guide to Favicons The Smallest Piece of Branding That Does the Most Work
A favicon is the tiny icon that sits in a browser tab, next to a bookmark, or on a phone's home screen once someone saves your site. It measures a few millimetres on screen, and yet it's one of the first things a visitor notices — and one of the easiest ways to look unfinished if it's missing, blurry, or simply the default grey globe. This guide covers everything you need to get favicons right, from the exact sizes browsers expect to the HTML that ties it all together.
What a favicon is, and why it matters
The word favicon comes from 'favourites icon', a name left over from when browser bookmarks were called favourites. Today it appears in far more places than a bookmarks menu: browser tabs, address bars, browser history, search results in some cases, home screen shortcuts on phones, and the app switcher on mobile devices.
Because it appears in so many small, high-frequency moments, a favicon does a disproportionate amount of branding work for its size. Someone with fifteen tabs open relies on favicons, not page titles, to find your site again. A missing or generic favicon quietly signals that a site is unfinished or unmaintained, even if the rest of the design is polished.
The sizes browsers and devices actually use
There isn't one favicon size — there are several, because different browsers, operating systems and devices request different resolutions. Providing the full set means your icon looks sharp everywhere rather than stretched or padded.
| Size | Typical use |
|---|---|
| 16×16 | Classic browser tab and address bar icon |
| 32×32 | Higher-resolution browser tabs and taskbar shortcuts |
| 48×48 | Windows site shortcuts and some browser install prompts |
| 64×64 | Higher-DPI displays and some desktop shortcuts |
| 96×96 | Desktop shortcuts and some Android home screens |
| 128×128 | Chrome Web Store listings and some app icons |
| 180×180 | Apple touch icon, used when a site is saved to an iPhone or iPad home screen |
| 192×192 | Android home screen icon and Chrome for Android |
| 512×512 | Progressive Web App splash screens and app icon stores |
| favicon.ico | A multi-resolution fallback file (often containing 16×16, 32×32 and 48×48) still checked by default by many browsers |
Designing a mark that survives at 16px
The hardest part of favicon design isn't producing the files — it's designing a mark simple enough to still make sense at 16 pixels square, which is roughly the size of a grain of rice on screen.
- Simplify, don't shrink. A detailed logo with fine text or thin linework will turn to mush at 16px. Favicons usually work best as a single bold letterform, a simple icon, or a solid shape — save the full logo for larger contexts.
- Use strong contrast. Favicons sit against many different backgrounds — light tabs, dark tabs, coloured browser themes — so a mark with clear contrast against both light and dark holds up best.
- Avoid thin lines and small gaps. Anything under roughly 2px at 16×16 will disappear or blur on lower-resolution displays. Bold, chunky shapes survive scaling far better than delicate ones.
- Test at actual size, not zoomed in. A mark that looks great filling your screen at 100% zoom can look completely different shrunk down and viewed briefly in a crowded tab bar.
- Keep it square, and consider the background. Most favicon slots don't respect rounded corners or transparency consistently across platforms, so design with a solid or transparent square canvas in mind.
The HTML you need, and where it goes
Once you have your generated files, a handful of link tags in the <head> of your HTML tell browsers and devices where to find each size.
- `<link rel="icon" href="/favicon.ico" sizes="any">` — the classic fallback most browsers still check by default.
- `<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">` — a sharper PNG version for modern browsers.
- `<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">` — the smallest standard tab icon.
- `<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">` — used specifically by iOS and iPadOS when a page is saved to the home screen.
- `<link rel="manifest" href="/site.webmanifest">` — points to a small JSON file listing your Android and PWA icon sizes (192×192 and 512×512, typically).
All of these tags belong in the `<head>` of every page, or in your site's shared layout template so they're included automatically without repeating them page by page.
Web app manifests
The web app manifest is a small JSON file that tells mobile browsers and operating systems how your site should behave if someone adds it to their home screen — including its name, its theme colour, and, most relevantly here, which icon files to use at which sizes.
A minimal manifest looks something like this: { "name": "Your Site Name", "icons": [ { "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" }, { "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" } ], "theme_color": "#ffffff", "background_color": "#ffffff", "display": "standalone" }
Without a manifest, some Android devices will fall back to a screenshot of your page as the home screen icon, or generate a low-quality auto-cropped version of whatever image they can find — neither of which reflects well on a brand.
A favicon is rarely the most exciting file in a project, which is exactly why it's so often left until last — and exactly why it's worth doing properly the first time.
Professional tips
- 1.Start from a large, clean source image. Generating smaller sizes from a 512×512 or larger master file gives sharper results than trying to scale up a small logo.
- 2.Generate the full set, not just favicon.ico. Skipping the Apple touch icon or Android sizes means your site looks unfinished the moment someone saves it to their home screen.
- 3.Use PNG for transparency, ICO for legacy support. Modern browsers happily use PNG favicons, but keep a favicon.ico in the root of your site as a safety net for older browsers and some services that check for it by default.
- 4.Match your theme colour to your favicon. Pairing a manifest's theme_color with your brand palette makes the browser chrome (address bar background on some mobile browsers) feel like part of your design rather than a mismatch.
- 5.Re-test after any redesign. Favicons are easy to forget when a logo changes — check your browser tab is still showing the right, current mark after any rebrand.
Common mistakes and caching quirks
- Uploading a new favicon and not seeing it change. Favicons are aggressively cached by browsers, sometimes for weeks. Clearing your browser cache, doing a hard refresh, or testing in a private/incognito window is usually the fastest way to confirm a new favicon is actually live.
- Only providing one size. A single small icon stretched up for a home screen shortcut looks pixelated; a single large icon squeezed down for a browser tab can lose all its detail.
- Forgetting the file even exists. favicon.ico sitting in the root of a site is still checked by default by many browsers even if you never explicitly link to it — leaving an old or blank one there can undo an otherwise careful favicon setup elsewhere.
- Using a logo with fine text or thin details. As covered above, detailed logos rarely survive being shrunk to 16px, and the result is usually just a blurry, muddy square.
- Ignoring dark mode and theme variation. Some browsers and operating systems apply their own tinting or dark backgrounds behind favicons — testing your mark against both light and dark browser themes avoids an unpleasant surprise.
You'll also like
Frequently asked
- Do I really need all the different favicon sizes, or is one enough?
- One well-generated image alone will look fine on desktop browsers, but home screen shortcuts on iOS and Android, along with PWA installs, look noticeably better with the full set of dedicated sizes rather than a single stretched icon.
- What file format should a favicon be?
- ICO for the legacy favicon.ico fallback, and PNG for everything else, including the Apple touch icon and Android/PWA icons. SVG favicons are increasingly supported too, but ICO and PNG cover the widest range of browsers.
- Why is my old favicon still showing after I uploaded a new one?
- Browsers cache favicons heavily, sometimes for weeks. Try a hard refresh, clear your browser cache, or check in a private/incognito window — and consider renaming the file if the old version persists.
- What size should my source image be before generating a favicon?
- At least 512×512 pixels. Starting large and scaling down produces much sharper results across every size than trying to enlarge a small image.
- Is a web app manifest only needed for apps?
- No — any website benefits from a basic manifest, since it controls how the site's icon and name appear if a visitor saves it to their phone's home screen, even if the site was never built as a formal app.
- Can I use a photograph as a favicon?
- Technically yes, but photographs rarely survive being shrunk to 16px — fine detail turns to noise. A simplified icon, initial or bold shape almost always reads better at favicon size.
- Does a favicon affect SEO?
- It's not a major ranking factor, but a missing or broken favicon can appear in some search result interfaces and looks unpolished, and Google has previously used favicons in mobile search results, so it's worth getting right regardless.
- What's the difference between favicon.ico and the Apple touch icon?
- favicon.ico is the traditional browser tab icon, historically supporting multiple resolutions in one file. The Apple touch icon is a separate, dedicated 180×180 PNG specifically used when a page is saved to an iOS home screen.
Continue learning
Keep exploring Digital Tools
Related guides and calculators to carry your learning further.
Related calculators
Free, instant tools from the Calcaroo collection.
Digital Tools
Favicon Generator
Every favicon size from one logo.
Use calculatorDigital Tools
Colour Palette Extractor
Build a colour palette from any image.
Use calculatorDigital Tools
Image Resizer
Resize images to any size or preset.
Use calculatorDigital Tools
Word Counter
Count words, sentences and paragraphs.
Use calculatorDigital Tools
Character Counter
Characters with and without spaces.
Use calculatorDigital Tools
Reading Time Calculator
How long your text takes to read.
Use calculatorRelated guides
Digital Tools
The Complete Guide to Everyday Digital Tools 18 Free Online Utilities to Save Time, Work Smarter and Stay Safe Online
Discover all 18 free Calcaroo Digital Tools, learn what each one does, when to use it, and how they can help you save time, work smarter and stay safer online.
Read guideDigital Tools
The Complete Guide to Compressing Images Smaller Files, Faster Websites, Same Great Quality
Learn how image compression actually works, when to use lossy versus lossless formats, and how to shrink your photos without wrecking the quality.
Read guideDigital Tools
The Complete Guide to Resizing Images The Right Dimensions for Every Platform
A plain-English guide to resizing images correctly — pixels, aspect ratio and DPI explained, plus the exact dimensions every major platform expects.
Read guideDigital Tools
The Complete Guide to Comparing Two Documents Spotting Every Change Between Two Versions of Text
How diff checkers work, when to use side-by-side versus inline views, and how to catch every change between two versions of a document, contract or email.
Read guideExplore More Digital Tools Guides
Practical guides for everyday digital tasks — text, files, colour, security and the web.
This guide is general information, not financial advice. Last updated August 2026.