You've spent weeks building a website. Then someone opens it and sees a grey generic icon in the tab bar where your logo should be.
A missing favicon is one of the clearest signs of an unfinished site. It's tiny — 16×16 pixels — but it shows up everywhere: browser tabs, bookmarks, browser history, home screen shortcuts on mobile, and next to your URL in Google search results.
What is a Favicon?
Favicon means "favorites icon." It originally referred to the icon shown in browser bookmarks. Today it appears in:
- Browser tabs and bookmark lists
- Browser history and reading lists
- Home screen shortcuts on iOS and Android
- Google search results (next to your domain)
- Progressive Web App (PWA) install screens
The Formats You Actually Need
| File | Size | Used For |
|---|---|---|
favicon.ico |
16×16 + 32×32 | Legacy browsers, tab bar |
favicon-32x32.png |
32×32 | Standard browsers |
apple-touch-icon.png |
180×180 | iOS home screen |
android-chrome-192x192.png |
192×192 | Android home screen |
android-chrome-512x512.png |
512×512 | Android splash screen |
A good generator creates all of these from one source image.
Generate Your Favicon
Favicon Generator
Generate a complete set of favicons for web, iOS, and Android from a single logo.
What Source Image Works Best?
Use a square image. Favicons are always square — rectangular logos get cropped.
Use SVG if you have it. SVG scales perfectly to every size without pixelation. Optimize it before generating:
SVG Optimizer
Clean and minify SVG files to reduce their payload size for web use.
Simplify complex logos. A detailed logo becomes an unreadable blob at 16px. A simple mark or initial works better — think of how Google uses "G" rather than the full wordmark.
Use high contrast. Tabs display against both light and dark backgrounds. Test readability on both.
Adding the Favicon to Your Site
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
For Next.js, place files in /public and they're served automatically. Next.js 13+ also picks up app/favicon.ico without any configuration.
Frequently Asked Questions
My favicon updated but the browser still shows the old one. Why?
Favicon caching is aggressive. Force-refresh with Ctrl+Shift+R (Windows) or Cmd+Shift+R (Mac), or test in an incognito window.
Can I use an emoji as a favicon?
Yes. Modern browsers support SVG favicons inline: <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🚀</text></svg>">.
Do I need all the different sizes?
At minimum: favicon.ico plus apple-touch-icon.png covers most browsers and devices. The full set is recommended for PWA support.
Does FluxToolkit store my logo?
No. Favicon generation runs entirely in your browser. Your source image never leaves your device.
Related Articles
How to Compress an Image Online Without Losing Quality — Optimize your source image before generating favicons.
How to Resize an Image Online — Resize images to the exact pixel dimensions you need.
WebP vs PNG vs JPG: Which Image Format Should You Use? — Learn which formats are best suited for web graphics.
Color Picker: HEX, RGB, HSL — Choose the exact brand color for your favicon.
CSS Color Formats Explained — Apply consistent color formats across your favicon and UI.
Image to Text / OCR Guide — Extract text from logos before turning them into favicons.