Why Favicon Coverage is Important
It’s not just about the browser tab anymore. Here is why you need the full suite of icons.
What are App Icons?
App Icons are the images you press on your smartphone to launch an application. As newer phones are released with higher resolution screens, higher resolution app icons are needed. Developers still want to maintain support for the older phones with lower resolution so when you create an app icon you need to create several size variations of the same image. This is true for all smartphones like the iPhone and Android, and even tablets like iPad.
What does this tool do?
Although many modern web browsers support favicons saved as GIFs, PNGs or other popular file formats, all versions of Internet Explorer still require favicons to be saved as ICO files (a Microsoft icon format). This tool provides an easy way to convert any GIF, PNG or JPEG to ICO which is supported by all modern web browsers. It also enables you to create favicons from scratch via a handy online editor. Additionally the editor lets you manually tweak generated favicons to ensure the best possible result.
Using a favicon
After generating a favicon with this tool download and save to the root directory of your site. Then include the following code in the head of your HTML document.
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
<link rel="icon" href="/favicon.ico" type="image/x-icon">Why Full Coverage Matters
Mobile Home Screens
SEO & Search Results
Brand Trust
Platform Integration
See It In Action
When websites implement proper favicon coverage, their icons appear consistently across all platforms and contexts. Notice how these major companies' favicons instantly make their links recognizable in browser tabs, bookmarks, search results, and when shared. This visual consistency builds brand recognition and trust—users can identify your site at a glance, even in crowded lists or search results.
Without proper favicon coverage, your links would appear as generic placeholders or broken images, making it harder for users to identify your brand and reducing click-through rates. Here are examples of companies that have invested in comprehensive favicon coverage:
The Icons We Support
A breakdown of every file type our tool generates and where it is used.
iPhone & Retina
Sizes like 180x180, 120x120, and 60x60 are used for various iPhone generations, ensuring your icon looks sharp on high-density Retina displays.
iPad & Tablet
Sizes like 167x167, 152x152, and 76x76 cater to iPad home screens, where icons are displayed at different dimensions than phones.
Legacy iOS
We still include sizes like 57x57 and 72x72 for older devices that might still be in circulation, maximizing compatibility.
192x192 & 512x512 (via Manifest)
Android devices rely on high-resolution PNGs. The 192x192 icon is a standard for home screen shortcuts. While not always generated as a standalone file if a manifest is present, our tool prioritizes the android-icon-192x192.png for direct linking and manifest inclusion to support "Add to Home Screen" prompts and splash screens.
32x32
The gold standard for modern desktop browser tabs. It provides enough detail for retina displays while remaining small in file size.
16x16
The classic size. Essential for non-retina screens and usage in strict 16px contexts like browser address bars or bookmark lists.
96x96
Often used by desktop shortcuts, Google TV, and some specialized browser contexts requiring a larger raster image.
Microsoft Tiles
When a user pins your site to their Windows Start Menu, Windows looks for specific meta tags and images (like ms-icon-144x144.png). We also generate the necessary tile color metadata to ensure it matches your brand palette.
Other Considerations
- Web App Manifest: Modern PWA (Progressive Web App) features rely heavily on the
manifest.jsonfile. This file tells the browser how your app should behave when installed, including which icons to use. Our tool generates this automatically. - Theme Color: The
theme-colormeta tag customizes the browser toolbar color on mobile devices, providing a more immersive feel that matches your site's design. - SVG Favicons: While we focus on broad compatibility with PNGs, modern browsers are starting to support SVG favicons (
link rel="icon" type="image/svg+xml"). These are great for scaling but still require PNG fallbacks for full support (like Safari or older browsers). - Caching: Browsers aggressively cache favicons. If you update your branding, you might need to append a query string (e.g.,
?v=2) to your favicon links to force users to see the new version.