Toolbly

The Art of the Favicon: A Guide for Modern Web Development

October 19, 2025
Toolbly Team

Share:

It's one of the smallest assets on your website, but it has a huge impact on brand recognition and user experience. The favicon—that little icon in the browser tab, bookmarks bar, and saved home screen apps—is a critical part of your site's identity. But creating a favicon isn't as simple as just dropping an `icon.ico` file in your root directory anymore. This guide will walk you through the modern approach.

Why Bother with Favicons?

  • Brand Identity: It's a visual anchor for your brand. When a user has 20 tabs open, your favicon is what helps them find their way back to your site.
  • Professionalism: A missing or poorly designed favicon looks unprofessional and suggests a lack of attention to detail.
  • User Experience: It provides a clear visual cue in bookmarks, browser history, and on mobile home screens when a user saves your site.

The Modern Favicon Package

To ensure your favicon looks great everywhere, you need more than just a single file. A complete, modern favicon package should include several sizes and formats to cater to different browsers, devices, and contexts.

1. The Classic: `favicon.ico`

The `.ico` format is a container for multiple icon sizes. While modern browsers prefer PNGs, many older browsers and some web crawlers will still look for a `favicon.ico` file in your website's root directory. Including it is a good practice for maximum compatibility. A standard `.ico` file should contain at least 16x16 and 32x32 pixel versions.

2. The Workhorse: PNG Favicons

Modern browsers favor PNG files. You should provide at least two sizes:

  • `favicon-32x32.png`: The standard size for most desktop browsers.
  • `favicon-16x16.png`: For smaller contexts, like the browser taskbar.

3. The Mobile Must-Have: `apple-touch-icon.png`

This is arguably the most important icon for mobile users. When a user saves your website to their home screen on an iPhone or iPad, this is the icon that will be used. Apple devices do not use the standard favicons for this. The recommended size is 180x180 pixels. Unlike other favicons, this one should not have transparency; iOS will add rounded corners and a drop shadow automatically.

4. The PWA Icon: `android-chrome`

For Progressive Web Apps (PWAs) and for users who add your site to their Android home screen, you'll need icons specified in a `site.webmanifest` file. The two most important sizes are:

  • `android-chrome-192x192.png`
  • `android-chrome-512x512.png` (used for the splash screen)

Implementing Your Favicons

Once you have your image files, you need to tell the browser where to find them by adding `` tags to the `` of your HTML document.

<!-- For modern browsers and mobile -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">

<!-- For PWAs -->
<link rel="manifest" href="/site.webmanifest">

<!-- Fallback for legacy browsers (optional but recommended) -->
<link rel="shortcut icon" href="/favicon.ico">

The `site.webmanifest` file is a simple JSON file that describes your PWA:

{
  "name": "My Awesome App",
  "short_name": "AwesomeApp",
  "icons": [
    {
      "src": "/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone"
}

Making It Easy

Creating all these different sizes and formats by hand is tedious. That's why we built the Favicon Generator. You can upload a single high-resolution image (512x512px is ideal), and our tool will instantly generate the complete package for you, including all the necessary image files and the HTML code, all bundled into a convenient zip file.

Share: