What is a Favicon?
What favicons are, the sizes you need, file formats, and how to add them to any website.
What is a favicon?
A favicon (short for "favorites icon") is the small icon that appears in browser tabs, bookmarks, history, and search results next to your site's name. It's typically 16×16 or 32×32 pixels — small enough that only simple, bold designs work well.
The name comes from Internet Explorer 5 (1999), which introduced the feature and stored these icons in the browser's "Favorites" folder. The convention has been universal ever since.
Standard favicon sizes
| Size | Used for | Priority |
|---|---|---|
| 16×16px | Browser tab (standard) | Required |
| 32×32px | Browser tab (high-DPI / retina) | Required |
| 48×48px | Windows taskbar / shortcuts | Recommended |
| 180×180px | Apple Touch icon (iOS bookmarks) | Recommended |
| 192×192px | Android home screen / PWA | Recommended |
| 512×512px | PWA splash screen, app stores | For PWAs |
ICO vs. PNG favicons
ICO format (traditional)
The original favicon format. An ICO file can bundle multiple sizes (16, 32, 48px) in a single file. All browsers support it, including very old ones. The downside: ICO is a specialized format that requires specific tools to generate.
PNG format (modern)
All modern browsers support PNG favicons. Simpler to generate — no special encoder needed. Serve different sizes via separate link tags. Recommended for new sites unless legacy IE support is required.
SVG favicons (newest)
Supported by Chrome and Firefox (not Safari). SVG scales perfectly at any size and supports dark mode via CSS media queries. Use as a progressive enhancement alongside PNG fallbacks.
How to add a favicon to your website
<!-- In your <head> tag --> <!-- Standard favicon --> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"> <!-- Apple Touch icon (iOS) --> <link rel="apple-touch-icon" sizes="180x180" href="/favicon-180x180.png"> <!-- Android / PWA --> <link rel="icon" type="image/png" sizes="192x192" href="/favicon-192x192.png"> <!-- SVG (optional, progressive enhancement) --> <link rel="icon" type="image/svg+xml" href="/favicon.svg">
Design tips for favicons
- —Use a single icon or lettermark — your full logo won't be readable at 16px
- —High contrast is essential — the icon sits on a white or gray browser tab
- —Test at actual size before finalizing — zoom out to 100% and squint
- —Start with a 512×512 or larger source file for clean downscaling
- —Avoid thin lines and fine details — they disappear at small sizes
Frequently asked questions
- Why isn't my favicon showing up?
- Browser caching is the most common culprit. Hard-refresh the page (Ctrl+Shift+R or Cmd+Shift+R), or open an incognito window. Also check that the link tags are inside the <head> element and the file paths are correct. Some browsers take a few minutes to display a newly set favicon.
- Do I need a favicon for SEO?
- Google displays favicons in search results on mobile. A missing favicon shows a generic globe icon, which reduces click-through rates. It's not a direct ranking factor but it does affect CTR. Add one.
- What file should I name my favicon?
- Browsers automatically look for /favicon.ico at the root of your domain without needing a link tag. For PNG favicons, name them descriptively (favicon-32x32.png) and reference them with link tags. Place all favicon files in the root of your public directory.