A favicon (short for favorite icon) is the small image you see in browser tabs, bookmarks, and search results. It is your website's visual identity at a glance, and despite being tiny, it matters more than you think.
What is a favicon?
A favicon is a tiny square image — typically 16×16 or 32×32 pixels — that represents a website. The name comes from the original "favorites" list in Internet Explorer, where these icons first appeared next to bookmarked links. Today they show up in:
- Browser tabs (the most common place you'll see one)
- Bookmarks and reading lists
- The browser address bar (on some browsers)
- Mobile home screens when a site is saved as an app
- Search engine results pages (SERPs) — Google displays favicons next to results
- PWA install prompts and app switchers
Because a favicon is the first visual brand element a visitor sees in their tab bar, a missing or broken favicon makes a site look unfinished.
Why favicons matter
Favicons aren't just decoration. They serve real purposes:
- Recognition & trust. Users scan browser tabs by icon, not text. A distinctive favicon helps people find your tab among dozens of open ones.
- Professionalism. A site without a favicon shows a generic globe icon — a small but real trust signal that the site is incomplete.
- Search visibility. Since 2019 Google shows favicons in mobile search results, and desktop results followed. A good favicon can improve click-through rate.
- PWA & mobile. When users "Add to Home Screen", the favicon set determines the app icon.
Favicon sizes and formats
Modern websites need multiple favicon files to cover every platform. Here is the complete breakdown:
| File | Size(s) | Used by |
|---|---|---|
favicon.ico | 16×16, 32×32, 48×48 | Classic browser tabs (universal fallback) |
favicon-32x32.png | 32×32 | Modern browser tabs (Chrome, Firefox, Edge, Safari) |
favicon-16x16.png | 16×16 | Older browser tabs |
apple-touch-icon.png | 180×180 | iOS home screen, Safari pinned tabs |
android-chrome-192x192.png | 192×192 | Android home screen |
android-chrome-512x512.png | 512×512 | PWA splash screens, Android Chrome |
favicon.svg | Vector | Modern browsers (Safari pinned tab, dark-mode aware) |
site.webmanifest | — | PWA manifest linking all icons |
Formats: .ico is the most compatible (works everywhere, including very old browsers). .png is the modern standard for specific sizes. .svg is the future — it scales perfectly and supports dark mode — but isn't supported by every browser yet, so it should be paired with a PNG/ICO fallback.
💡 Want all of these generated at once from a single image? Use the free Favicon.one generator — it outputs the full package plus ready-to-paste HTML in seconds.
How to create a favicon
You have three common starting points:
1. From an existing logo or image
Upload a square PNG, SVG, or JPG (at least 512×512) and let a tool generate every size and format. This is the fastest path. Open the generator →
2. From text (your brand initial or name)
Pick a font, color, and background to render a clean lettermark favicon. Great for minimal brands. Text to Favicon →
3. From an emoji
Use an emoji as your icon — fast for personal sites, demos, and side projects. Emoji to Favicon →
How to add a favicon
Plain HTML
Place the generated files in your site root, then add these tags inside the <head> of every page:
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<link rel="manifest" href="/site.webmanifest" />Next.js (App Router)
Drop the files into your app/ directory. Next.js auto-detectsfavicon.ico, icon.png, apple-icon.png, and icon.svg and generates the correct link tags for you. For the full step-by-step, see our Next.js favicon guide.
WordPress
Use the built-in Appearance → Customize → Site Identity screen to upload a square image; WordPress generates the necessary sizes automatically.
Common favicon problems
My favicon isn't showing up
The #1 cause is browser caching. Browsers cache favicons very aggressively. Try:
- Hard refresh (Ctrl/Cmd + Shift + R)
- Open the site in an incognito/private window
- Clear the browser cache for that site
- Visit
yourdomain.com/favicon.icodirectly to confirm the file exists
If the file is missing, check the path and that it's in the root. Then run the page through our Favicon Checker to audit every required tag.
My favicon looks blurry
This happens when a detailed logo is auto-shrunk to 16×16. Design tips:
- Use a simplified version of your logo for tiny sizes
- Favor high contrast and bold shapes over thin lines
- Provide a dedicated
favicon.svg— vectors stay crisp at any size
Favicon works in Chrome but not Safari/Firefox
Different browsers prefer different formats. Make sure you've included both the .ico (for older Safari) and PNG sizes. SVG favicons are supported in Safari pinned tabs but not in older browsers.
Frequently Asked Questions
Is a favicon the same as a logo?
No. A logo is your full brand mark used in content; a favicon is a tiny simplified icon for browser chrome. Good favicons often use a single element of the logo (an initial, a shape) rather than the whole thing.
Do I really need an .ico file in 2026?
It's still the safest universal fallback. Modern browsers handle PNG and SVG, but older browsers and some edge cases (certain bookmark tools, legacy enterprise software) only read .ico. Including it costs nothing.
What's the ideal source image size?
Start with a square image of at least 512×512 (1024×1024 is even better). The generator downscales it to every required size.
Can a favicon be animated?
Yes — GIF and some animated SVG favicons work in Firefox, but support is inconsistent and they can be distracting. Most sites use a static icon.
Ready to make yours? Generate your favicon package now — free, private, and ready in seconds. For more, browse the Favicon.one blog.