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 lets you create favicons from scratch via an online editor, and to manually tweak generated favicons to get the result you want.
Using a favicon
After generating a favicon with this tool, download it and save it to the root directory of your site. Then include the following code in the head of your HTML document.
<link href="https://www.example.com/favicon-32x32.png" rel="shortcut icon" type="image/x-icon">
<link href="https://www.example.com/apple-touch-icon.png" rel="apple-touch-icon">Why full coverage matters
| Surface | What coverage buys you |
|---|---|
| Mobile home screens | Users often add websites to their home screens on iOS and Android. Without specific touch icons, your site will look like a generic screenshot or a default placeholder, damaging your brand's professional appearance. |
| SEO and search results | Google and other search engines often display favicons next to search results. A clear, high-quality icon can improve click-through rates and help users identify your brand instantly. |
| Brand trust | Inconsistency breaks trust. If your icon looks crisp in a tab but blurry in a bookmark bar or missing on a tablet, it signals a lack of attention to detail. Full coverage ensures pixel-perfect branding everywhere. |
| Platform integration | From Windows Start Menu tiles to macOS pinned tabs and Safari reading lists, different operating systems use unique formats. Providing them all ensures your site feels native to the user's device. |
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 full favicon coverage:
netflix.com, apple.com, google.com, microsoft.com, amazon.com, meta.com, x.com, youtube.com, github.com, spotify.com, adobe.com, nvidia.com, tesla.com, uber.com, airbnb.com, stripe.com, shopify.com, notion.so, figma.com, dropbox.com, linkedin.com, instagram.com, tiktok.com, discord.com, slack.com, zoom.us, salesforce.com, oracle.com, ibm.com, intel.com, paypal.com, reddit.com, and twitch.tv.
The icons we support
A breakdown of every file type our tool generates and where it is used.
| Sizes | Where they're used | Notes |
|---|---|---|
| 180x180, 120x120, 60x60 | Apple touch icons, iPhone and Retina | Used for various iPhone generations, so your icon looks sharp on high-density Retina displays. |
| 167x167, 152x152, 76x76 | Apple touch icons, iPad and tablet | iPad home screens display icons at different dimensions than phones. |
| 57x57, 72x72 | Apple touch icons, legacy iOS | Still included for older devices that might be in circulation, maximizing compatibility. |
| 192x192, 512x512 | Android and Chrome, via the manifest | Android devices rely on high-resolution PNGs, and 192x192 is the standard for home screen shortcuts. It is not always generated as a standalone file when a manifest is present, but our tool prioritizes android-icon-192x192.png for direct linking and manifest inclusion so “Add to Home Screen” prompts and splash screens work. |
| 32x32 | Standard favicon, modern desktop browser tabs | The gold standard: enough detail for retina displays while remaining small in file size. |
| 16x16 | Standard favicon, address bars and bookmark lists | The classic size. Essential for non-retina screens and strict 16px contexts. |
| 96x96 | Standard favicon, desktop shortcuts and Google TV | Also used by some specialized browser contexts that require a larger raster image. |
| 144x144 | Windows tiles, ms-icon-144x144.png | When a user pins your site to the Windows Start Menu, Windows looks for specific meta tags and images. We also generate the tile color metadata so it matches your brand palette. |
The same mark, at the sizes that matter
Other considerations
| Consideration | Detail |
|---|---|
| Web app manifest | Modern PWA (Progressive Web App) features rely heavily on the manifest.json file. 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-color meta 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, such as Safari or older browsers. |