Website Favicon Best Practices in 2026

A favicon is the tiny icon that appears in browser tabs, bookmarks, history, and search results. It is one of the smallest visual elements of a website and one of the most neglected.

Getting favicons right is surprisingly complex. Different browsers, devices, and contexts expect different sizes, formats, and HTML markup. What shows up in a Chrome tab is not the same file that appears on an iPhone home screen or in a Google search result.

In 2026, the minimum viable favicon setup requires fewer files than it used to, thanks to SVG support and modern browser behavior. But you still need to get it right, because a missing or broken favicon looks unprofessional.

The Favicon Generator creates all the sizes and formats you need from a single source image. Upload your logo or icon, and it generates the complete favicon package with the HTML markup to include in your pages.

The Minimum Favicon Set in 2026

You need fewer files than the 20+ icons that older guides recommend. Here is the minimum set that covers all major use cases:

1. favicon.ico (32x32, in the root directory): the classic format. Still needed for legacy browser compatibility and some tools that look for /favicon.ico directly. Include 16x16 and 32x32 sizes in the same ICO file.

2. favicon.svg (any size, vector): modern browsers prefer SVG favicons. They scale perfectly to any tab size, support dark mode media queries, and are typically smaller in file size than raster formats.

3. apple-touch-icon.png (180x180): required for iOS home screen icons when a user adds your site to their home screen. Apple ignores SVG and requires a specific PNG format.

4. web-app-manifest icons (192x192 and 512x512 PNG): for Progressive Web Apps and Android home screen icons. Referenced from your manifest.json file.

The HTML in your : `html `

This covers Chrome, Firefox, Safari, Edge, iOS, Android, and PWA installations. Four files and four HTML tags is all you need.

Convert your source image to the right formats using the Image Format Converter. Start with a high-resolution PNG or SVG and generate the smaller sizes from it.

SVG Favicons with Dark Mode Support

SVG favicons are the most flexible option because they support CSS, including the prefers-color-scheme media query:

`svg `

This SVG renders a blue circle with a white letter. When the user switches to dark mode, the circle changes to a lighter blue. This is a subtle touch that most sites miss, and it makes your favicon look intentional rather than neglected in dark mode.

SVG favicon support: - Chrome 80+ (2020): full support - Firefox 41+ (2015): full support - Safari 15+ (2021): full support - Edge (Chromium): full support

The only browsers that do not support SVG favicons are older versions of Safari and Internet Explorer. The favicon.ico fallback handles these cases.

Before finalizing your SVG favicon, make sure the file size is reasonable. SVG files with complex paths can be larger than equivalent PNGs. Use the Image Compressor for your raster fallbacks to keep file sizes minimal.

Apple Touch Icon: Getting iOS Right

Apple has specific requirements for home screen icons that differ from standard favicons:

Size: 180x180 pixels. Apple will downscale this for older devices. Do not provide smaller sizes; Apple handles the scaling.

No transparency: iOS adds its own background behind transparent icons, which usually looks wrong. Fill the entire 180x180 canvas with your background color.

No rounded corners: iOS applies the rounded rectangle mask automatically. If you add rounded corners to the source image, they will not align with the system mask and the icon will look off.

Padding: leave about 10% padding around your icon content. iOS clips the edges slightly with the rounded rectangle mask, and content too close to the edges gets cut.

File location: ideally at /apple-touch-icon.png in the root directory. iOS looks for this file automatically even without the tag, but include the tag for reliability.

Common mistakes: - Uploading a favicon-sized (32x32) image as the touch icon. It will be upscaled and look blurry on Retina displays. - Adding a transparent background. The system adds a white or black background that clashes with most icons. - Including rounded corners or drop shadows that conflict with iOS system styling.

Test by adding your site to the home screen on a real iOS device. The simulator can show you the icon, but real-world rendering sometimes differs slightly.

PWA Manifest Icons

Progressive Web Apps require icons in the manifest.json file for installation on home screens and app launchers:

`json { "name": "Your App", "short_name": "App", "icons": [ { "src": "/icons/icon-192.png", "sizes": "192x192", "type": "image/png" }, { "src": "/icons/icon-512.png", "sizes": "512x512", "type": "image/png" }, { "src": "/icons/icon-512-maskable.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" } ] } `

The maskable icon is important for Android. Different Android launchers crop icons to different shapes (circle, rounded square, squircle). A maskable icon has extra padding (the safe zone is the inner 80% circle) so the icon looks correct regardless of the crop shape.

Test maskable icons at maskable.app/editor to verify your content stays within the safe zone for all mask shapes.

Minimum icons for a working PWA: 192x192 (required by Chrome) and 512x512 (required for the install prompt and splash screen). The 512x512 size is also used as the source for adaptive icons on Android.

Testing Your Favicon Setup

After implementing your favicons, verify them across contexts:

Browser tabs: open your site in Chrome, Firefox, Safari, and Edge. The favicon should appear sharp and correctly colored in each browser's tab bar.

Bookmarks: bookmark your site and check the icon in the bookmark bar and bookmark manager.

Google search results: Google sometimes shows favicons in search results. It can take days for Google to pick up a new favicon. Verify by searching site:yourdomain.com after the crawl.

iOS home screen: on an iPhone, open Safari, tap Share, then Add to Home Screen. Verify the icon matches your design at the correct size.

Android home screen: in Chrome on Android, tap the three-dot menu and Install App (or Add to Home Screen). Check that the icon looks correct in the app launcher.

PWA install: if your site is a PWA, trigger the install prompt and verify the icon in the install dialog and on the home screen.

Dark mode: switch your OS to dark mode and verify the favicon is still visible and looks intentional in dark browser chrome.

Common issues: wrong tag href paths, cached old favicons (hard refresh with Ctrl+Shift+R), and missing files at the expected URLs. Use Chrome DevTools Application tab to verify manifest icon references resolve correctly.

FAQ

Do I still need a favicon.ico file?

Yes, as a fallback. Some tools, bots, and older browsers request /favicon.ico directly without checking your HTML for icon links. It is a small file and easy to include. Generate it alongside your SVG and PNG icons.

What is the ideal source image size for generating favicons?

Start with at least 512x512 pixels. This is the largest size needed (for PWA manifest) and scales down cleanly to all smaller sizes. SVG is the best source format because it scales without quality loss.

Can I use an animated favicon?

Technically, animated GIFs and APNG work as favicons in some browsers (Firefox supports animated favicons). But they are distracting, potentially annoying, and do not work consistently across browsers. A static favicon is the professional choice.

How do I update my favicon without users seeing the old one?

Browsers cache favicons aggressively. To force an update, change the favicon filename (e.g., favicon-v2.ico) and update the HTML reference. Alternatively, add a query parameter: href="/favicon.ico?v=2". Users with the old cached version will get the new one on their next visit.