What Is a Favicon and Why It Matters
A favicon (short for "favorite icon") is the small icon displayed in browser tabs, bookmarks, history lists, and — on mobile devices — the home screen when someone saves your website as a shortcut. Despite being tiny (typically 16x16 to 32x32 pixels in browser tabs), favicons serve a critical function: they provide instant visual identification of your site among dozens of open tabs.
A missing favicon is one of the most common signs of an amateur website. Browsers display a generic globe or blank document icon when no favicon is found, making your site look unfinished. Search engines sometimes display favicons in search results next to your site name, where a branded icon increases visual recognition and click-through rates.
The Sizes You Actually Need
The favicon ecosystem has become unnecessarily complex over the years, with some guides recommending a dozen different sizes. In practice, you need four files to cover every modern browser and device reliably.
favicon.ico (32x32) — The traditional ICO format, still expected by older browsers and some crawlers. An ICO file can contain multiple sizes in one file; a single 32x32 version is sufficient for modern use. Place this in your site root.
favicon-192.png (192x192) — Used by Android Chrome when adding your site to the home screen. Referenced in the web manifest file. This size also serves as the basis for Android adaptive icons.
favicon-512.png (512x512) — Used as the splash screen icon on Android and for Progressive Web App (PWA) installations. Also referenced in the web manifest.
apple-touch-icon.png (180x180) — Used by Safari on iOS and macOS when someone adds your site to their home screen or favorites. Apple will automatically round the corners and add effects. Provide a square PNG at exactly 180x180 pixels with your icon filling the entire canvas — no transparency, as iOS replaces transparent areas with black.
Creating Your Favicon from an Existing Image
Start with a high-resolution version of your logo or brand mark — at least 512x512 pixels. The image should be recognizable at very small sizes, which means simple shapes and high contrast work best. Detailed logos with thin lines and small text become unreadable at 16x16 pixels. Many companies use a simplified version of their logo for the favicon — just the icon or initial letter, without wordmarks.
If your source image is a photograph or complex graphic, first crop it to a perfect square. Then resize it to each required size. Our Image Resizer handles precise resizing directly in your browser — enter 512x512 for the base size, then resize copies to 192x192 and 180x180.
To create the ICO file from a PNG, use our Image Converter — convert your 32x32 PNG to ICO format. The conversion preserves all pixel data and produces a standard Windows ICO file compatible with every browser.
The HTML Code
Add these lines inside the <head> section of every page on your site. The browser checks these declarations in order and uses the most appropriate icon for the current context.
The basic favicon link tells browsers where to find the default icon. The Apple touch icon declaration is specifically for iOS Safari — without it, Safari takes a screenshot of your page and uses that as the home screen icon, which almost always looks terrible. The web manifest reference points to a JSON file that defines icons for Android Chrome and PWA installations.
The web manifest file (site.webmanifest) is a small JSON file that lists your icons with their sizes and purposes. At minimum, include the 192x192 and 512x512 PNG icons. Android Chrome reads this file when a user adds your site to their home screen, using the specified icons instead of generating one from a page screenshot.
Design Tips for Tiny Icons
Simplicity is everything at favicon scale. The most effective favicons use a single letter, a simple geometric shape, or a bold symbol. Google uses a simple "G," Facebook uses "f," Twitter/X uses the bird silhouette. These work because they are instantly recognizable even at 16x16 pixels.
Use a solid or high-contrast background rather than transparency for better visibility across different browser themes. A white icon on a transparent background disappears in Chrome's light theme. A dark icon on a transparent background disappears in dark mode. A colored background ensures your icon is visible everywhere.
Test your favicon at actual size. Zoom into a 16x16 pixel preview and ask yourself: can I identify the brand in a fraction of a second? If not, simplify further. Remove all text, reduce to one or two colors, and use the thickest lines possible. What looks oversimplified at 512x512 often looks perfect at 16x16.
For pixel-perfect results at small sizes, consider hand-editing the 16x16 and 32x32 versions pixel by pixel. Automated resizing can produce blurry results at these tiny dimensions because each pixel matters enormously when you only have 256 or 1024 total pixels.
Testing Your Favicon
After uploading your favicon files, test across browsers: open your site in Chrome, Firefox, Safari, and Edge. Check that the icon appears correctly in each browser's tab bar. On mobile, add the site to your home screen on both iPhone and Android and verify the icon displays properly.
If the old favicon persists despite uploading new files, browsers cache favicons aggressively. Clear your browser cache, or try loading your site in an incognito or private window. On some browsers, you can force a favicon refresh by visiting your-domain.com/favicon.ico directly and hard-refreshing (Ctrl+Shift+R).
Use Google's Rich Results Test or PageSpeed Insights to verify that search engines can find your favicon. A properly configured favicon contributes to your site's professional appearance in search results.