A favicon is the tiny icon that shows up in browser tabs, bookmarks, and history lists — and it's the first piece of branding most people see. Despite being only 16 or 32 pixels wide, getting it right means dealing with a surprising number of formats, sizes, and platform quirks. Here's the practical guide.
What Is a Favicon?
"Favicon" is short for "favorite icon" — the small image browsers display next to a page title. The original spec was a 16×16 ICO file at /favicon.ico, introduced by Internet Explorer in 1999.
Today, "favicon" really means a whole family of icons:
- The classic
favicon.ico(browsers, bookmarks) - PNG icons in multiple sizes (modern browsers, PWAs)
- Apple touch icons (iOS home screen)
- Android home screen icons
- Tile images for Windows
- SVG favicons (modern browsers, scales perfectly)
A complete favicon set is closer to 8–10 files, not one.
Why Favicons Matter
Tab recognition. Users with 20+ tabs open identify pages by the icon, not the title (which gets truncated to a few characters).
Bookmark identity. Without a favicon, bookmarks default to a generic globe — your site looks unfinished.
SEO signal. Google displays favicons in mobile search results. A missing or pixelated favicon hurts click-through.
PWA install prompts. When a user adds your site to their home screen, the icon they see is your favicon. A blurry one looks unprofessional.
Favicon Sizes You Actually Need
| Size | Format | Used For |
|---|---|---|
| 16×16 | ICO/PNG | Browser tabs, address bar |
| 32×32 | ICO/PNG | High-DPI tabs, taskbar |
| 48×48 | ICO/PNG | Windows site icons |
| 180×180 | PNG | Apple touch icon (iOS) |
| 192×192 | PNG | Android home screen |
| 512×512 | PNG | PWA splash screen |
| Any | SVG | Modern browsers (scales) |
A single ICO file can contain 16, 32, and 48 px versions internally — that's still the recommended fallback.
Designing for 16×16 Pixels
The biggest mistake people make is shrinking a complex logo until it's an unreadable blob. At 16 px, most logos lose their meaning.
Design principles for tiny icons:
- Strip detail mercilessly. A wordmark won't read at 16 px — use just an initial or a glyph.
- High contrast. The icon needs to stand out against both light and dark tab backgrounds. Test in both.
- Simple geometric shapes. Circles, squares, and bold strokes survive resizing. Thin lines disappear.
- No gradients in tiny sizes. They turn to mud. Use flat colors at 16 px and 32 px.
- Padding matters. Don't fill the canvas edge-to-edge — leave 1–2 px breathing room.
A common pattern is to design two versions: a simplified glyph for ≤32 px sizes, and a more detailed version for ≥180 px Apple/Android icons.
How to Create a Favicon Online
Use DevZone's Favicon Generator to produce a complete favicon set from a single source image:
- Upload a square PNG, JPG, or SVG (512×512 or larger works best).
- The generator outputs all required sizes, an ICO file, and the HTML link tags.
- Download the ZIP and unzip it into your site's root directory.
- Paste the link tags into your
<head>.
Everything happens in your browser — your source image isn't uploaded to a server.
The HTML You Need
A modern, complete favicon setup looks like this:
<!-- Classic ICO fallback -->
<link rel="icon" href="/favicon.ico" sizes="any">
<!-- Modern SVG -->
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<!-- Apple touch icon -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<!-- PWA manifest (includes Android icons) -->
<link rel="manifest" href="/site.webmanifest">
The browser picks the best format it supports. Modern browsers prefer SVG, fall back to PNG, then to ICO.
The site.webmanifest File
For PWAs and Android home screen icons, you also need a manifest:
{
"name": "Your Site",
"short_name": "Site",
"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"
}
Common Favicon Problems
"My favicon isn't updating." Browsers cache favicons aggressively. Hard refresh (Ctrl+Shift+R) or change the URL: <link rel="icon" href="/favicon.ico?v=2">.
"It's blurry on Retina screens." You're serving 16×16 to a 2x display. Add a 32×32 version — high-DPI browsers will pick it.
"Safari isn't showing my icon." Safari requires the apple-touch-icon link tag with a 180×180 PNG. SVG isn't enough on iOS.
"Google isn't showing my favicon in search." It must be a multiple of 48×48 (so 48, 96, 144, 192…), publicly accessible, and crawlable. Google specifically requires the <link rel="icon"> tag — favicon.ico at the root isn't enough on its own anymore.
FAQ
Do I still need favicon.ico in 2025?
Yes, as a fallback. Some older browsers, RSS readers, and embedded tools look for /favicon.ico regardless of HTML. It costs nothing to include.
Can I use an emoji as a favicon?
Yes, with an SVG data URL:
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🚀</text></svg>">
It works in modern browsers but won't appear on iOS home screens or in Google search.
What's the difference between favicon and apple-touch-icon?
The favicon is for browser chrome (tabs, bookmarks). The apple-touch-icon is what appears on the iOS home screen when someone "Adds to Home Screen." iOS doesn't apply rounded corners or shine effects anymore, but it still uses a different file at a larger size (180×180).
Should I use a transparent background?
For ICO and SVG, yes — the icon adapts to light and dark UI. For Apple touch icons, no — iOS used to add visual effects to transparent icons, and historically they look better on a solid background. PWA icons (192/512) work fine either way.
How big should my source image be?
Start at 512×512 or larger. Generators downscale to all required sizes. Starting smaller (e.g., 100×100) means upscaling for Apple/Android icons, which produces blurry results.