The Complete Favicon Guide for 2026

What Is a Favicon?

A favicon (short for "favorites icon") is the small icon associated with a website. It originally appeared only in browser bookmark lists, but today it shows up in browser tabs, address bars, browser history, PWA home screen shortcuts, search engine results pages, social media link previews, and reading lists.

The favicon is often a user's first visual impression of your brand in a browser. A missing or default favicon makes a site look unfinished. A crisp, well-implemented favicon signals professionalism and attention to detail.

Why Favicons Matter

Beyond branding, favicons serve a practical navigation function. When users have dozens of tabs open, the favicon is the primary way they identify and switch between sites. A distinctive favicon makes your site findable in a sea of tabs.

Google also displays favicons in mobile search results next to your site's URL. A missing favicon means a generic globe icon appears instead — which reduces visual credibility and can impact click-through rates.

For Progressive Web Apps (PWAs) and home screen bookmarks on mobile devices, your favicon effectively becomes your app icon. This is where high-resolution versions (192px, 512px) become essential.

Essential Favicon Sizes

Modern favicon implementation requires several sizes to cover all platforms and use cases. Here are the essential files you need:

You don't need every conceivable size. The six listed above cover all major platforms. Some guides recommend dozens of additional sizes, but those are edge cases that add complexity without meaningful benefit.

Formats: ICO vs PNG vs SVG

ICO (legacy)

The ICO format is a container that can hold multiple image sizes in a single file. It was the original favicon format and is still recognized by all browsers. Its main advantage is backward compatibility — very old browsers that don't support PNG favicons will still display an ICO file placed at /favicon.ico in your site root.

PNG (current standard)

PNG is the most widely used favicon format today. It supports transparency, looks sharp at all sizes, and is easy to generate. Most modern favicon implementations use PNG files in specific sizes linked via meta tags in the HTML head.

SVG (modern option)

SVG favicons are vector-based, meaning they scale perfectly to any size without quality loss. They support CSS media queries — including the ability to detect dark mode and adapt colors automatically. SVG favicon support is now available in all major browsers.

Creating Your Favicon

Start with a square source image at least 512×512 pixels. This gives you enough resolution to generate all required sizes through downscaling. If you're designing from scratch, work at 512×512 and pay attention to how the design looks when scaled down to 16×16 — fine details disappear at small sizes.

Design tips for effective favicons: use simple shapes with strong contrast, limit your palette to 2–3 colors maximum, avoid text (it becomes illegible at small sizes), ensure the icon reads clearly against both light and dark browser chrome, and test at the actual sizes your users will see.

The Ultimate Design Tools Favicon Generator lets you upload a source image and instantly generate all six required sizes with proper formatting, ready to download and deploy.

HTML Meta Tags

The complete set of HTML tags for a modern favicon implementation goes in the head section of your HTML. Here's the recommended minimum:

Browsers will use the most appropriate size from the available options. Chrome prefers 32×32 for the tab icon, Safari uses the Apple Touch Icon for bookmarks, and PWA install flows use the manifest icons.

Apple Touch Icons

When an iOS user adds your site to their home screen, Safari uses the Apple Touch Icon as the app-like icon on the home screen. The recommended size is 180×180 pixels. iOS automatically applies rounded corners, so your source image should be a square with no rounded corners or transparency.

Unlike regular favicons, Apple Touch Icons should have a solid background (no transparency). iOS home screens render the icon against a wallpaper, and a transparent background will result in a black or unexpected-colored fill behind your icon.

Web App Manifest Icons

The web app manifest (site.webmanifest) is a JSON file that defines your site's name, theme color, and icon set for PWA functionality. Android Chrome and other browsers use these icons when a user installs your site or adds it to their home screen.

The 192×192 icon is used for the home screen shortcut. The 512×512 icon is used for the PWA splash screen (the loading screen shown when the installed app launches). Both should be PNG format with no transparency.

Dark Mode Favicons

With more users running dark mode, a favicon designed for light browser chrome might become invisible on a dark tab bar. SVG favicons solve this elegantly with an embedded CSS media query:

This SVG automatically switches between a dark and light version based on the user's system preference. For PNG favicons, there's no automatic switching — you'd need JavaScript to detect the color scheme and dynamically update the favicon link tag.

Testing & Troubleshooting

After implementing your favicons, test across multiple browsers and devices. Common issues and their fixes:

If the favicon doesn't appear, check that the file paths in your meta tags match the actual file locations. Paths are relative to the HTML file or absolute from the site root (starting with /). The most reliable approach is absolute paths.

If you see a cached old favicon, browsers aggressively cache favicons. Hard-refresh with Ctrl+Shift+R (Cmd+Shift+R on Mac). For persistent caching, add a version query string: href="/favicon-32x32.png?v=2".

If the Apple Touch Icon shows a screenshot instead of your icon, the apple-touch-icon meta tag may be missing or the file doesn't exist at the specified path. Verify the file is a 180×180 PNG with a solid background.

Complete Implementation Checklist