What is a favicon?
A favicon (short for "favorite icon") is the small icon displayed in browser tabs, bookmarks, history, and other browser UI elements. It's one of the most visible elements of your site's branding.
Where favicons appear
- Browser tabs — The primary location, visible when users have multiple tabs open
- Bookmarks bar — When users save your site as a bookmark
- History — In the browser's history list
- Address bar — Some browsers show the favicon next to the URL
- Mobile home screen — When users add your site to their phone's home screen
- Search results — Google shows favicons in search results on mobile
- Social platforms — Some platforms use favicons in their link previews
Why does it matter?
- Brand recognition — Users identify your site by its icon when switching between tabs
- Professionalism — Missing favicons show the default browser icon, which looks unfinished
- SEO impact — Google displays favicons in mobile search results; a missing favicon stands out negatively
- Usability — With 10+ tabs open, favicons are the only way users identify tabs
- Trust — Users associate favicons with established, trustworthy sites
How to fix it
Basic favicon (minimum)
<link rel="icon" href="/favicon.ico" />Modern favicon setup (recommended)
<!-- SVG favicon (scalable, supports dark mode) -->
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<!-- PNG fallback for older browsers -->
<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 (for iOS home screen) -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<!-- Web App Manifest (for Android) -->
<link rel="manifest" href="/site.webmanifest" />Best practices
Design tips
- Keep it simple — At 16x16px, details are lost. Use simple shapes and bold colors
- Make it recognizable — It should be identifiable at a glance, even at tiny sizes
- Use your brand colors — Consistency with your brand identity
- Test at small sizes — Design at 512x512 but always test at 16x16 and 32x32
- Consider dark mode — SVG favicons can adapt to the user's color scheme:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<style>
rect { fill: #4f46e5; }
@media (prefers-color-scheme: dark) {
rect { fill: #818cf8; }
}
</style>
<rect width="32" height="32" rx="8" />
</svg>File format comparison
| Format | Pros | Cons |
|---|---|---|
| SVG | Scalable, supports dark mode | Not supported in all browsers |
| PNG | Universal support, crisp at defined sizes | Need multiple sizes |
| ICO | Legacy support, can contain multiple sizes | Larger file size |
Tools for creating favicons
- RealFaviconGenerator — Generates all necessary favicon files and HTML
- Figma — Design at 512x512 and export at multiple sizes
- Favicon.io — Generate from text, image, or emoji