What Are Favicons?
Favicons — short for favorite icons — are the small icons displayed in a browser's tab, bookmark list, history, and other interface elements to identify a website. They are one of the most visible branding elements on the web, appearing every time a user has your site open in a tab or saves a bookmark. Despite their small size, favicons play a significant role in brand recognition, user experience, and perceived professionalism. A missing or default favicon makes a website feel unfinished, while a well-designed one reinforces your brand identity at a glance.
The favicon ecosystem has evolved far beyond the original 16x16 pixel ICO file. Modern web applications need to provide icons in multiple sizes and formats to support desktop browsers, mobile devices, pinned tabs, home screen shortcuts, progressive web apps, and operating system integration. Understanding the full range of favicon requirements and how to configure them properly ensures your site looks polished across every platform and context. You can use our Favicon Generator to create all the icon sizes you need from a single source image.
Required Favicon Sizes
Different browsers, devices, and platforms expect favicons at different sizes. Providing the right sizes ensures your icon looks crisp and properly scaled everywhere it appears. The sizes you need depend on your target platforms, but a comprehensive setup includes multiple variants to cover all common use cases. The following sizes represent the current standard for maximum compatibility across browsers and devices.
- 16x16px — The classic favicon size used in browser tabs on desktop. This is the minimum size you should provide.
- 32x32px — Used by Windows taskbar thumbnails and some older browsers as a scaled-up version of the 16px icon.
- 48x48px — Used by Windows site icons and the Windows taskbar for standard desktop shortcuts.
- 64x64px — Used by high-DPI (Retina) displays on Windows for site icon tiles and shortcut overlays.
- 180x180px — The required size for Apple Touch Icon, used when users add your site to their iPhone or iPad home screen.
- 192x192px — The required size for Android Chrome manifest icons, used for home screen shortcuts and the splash screen.
- 512x512px — Used by Android Chrome for the splash screen background and PWA installation dialogs.
ICO vs PNG vs SVG
ICO Format
The ICO format is the original favicon format and is still required for maximum backward compatibility, particularly with older versions of Internet Explorer and some legacy desktop applications. An ICO file can contain multiple icon sizes in a single file, which is efficient for serving different resolutions. However, ICO does not support transparency as cleanly as PNG, and it is limited to a maximum of 256x256 pixels. Despite its age, including an ICO file at the root of your website (favicon.ico) remains a best practice because many browsers and crawlers still request it by default.
PNG Format
PNG is the modern standard for favicons. It supports full alpha transparency, lossless compression, and all the sizes required by contemporary browsers and devices. PNG icons are specified in HTML using the <link> tag with the sizes attribute, allowing browsers to select the most appropriate size for the current context. PNG produces smaller file sizes than ICO at equivalent quality levels, loads faster, and is universally supported by all modern browsers. For most projects, PNG is the preferred format for all favicon sizes except the root favicon.ico file.
SVG Format
SVG favicons are the newest option and offer significant advantages for modern web applications. Because SVG is a vector format, a single SVG file looks crisp at any size and resolution, eliminating the need to generate multiple PNG files for different devices. SVG favicons also support CSS media queries and JavaScript, enabling dynamic, animated, or context-aware icons. However, SVG favicon support is not universal — Chrome and Firefox support them, but Safari support is limited. For maximum compatibility, provide both SVG and PNG favicons, using SVG as the preferred format with PNG as a fallback.
Apple Touch Icon
The Apple Touch Icon is the icon displayed when a user adds your website to their iPhone or iPad home screen using Safari's "Add to Home Screen" feature. It is specified using a <link> tag with rel="apple-touch-icon". The recommended size is 180x180 pixels. iOS automatically applies rounded corners, a drop shadow, and a reflective shine effect to the icon (unless you add the rel="apple-touch-icon-precomposed" attribute, which disables the shine). Designing your touch icon with enough padding around the edges ensures it looks good after iOS applies its visual effects.
Apple devices cache touch icons aggressively, which means updating the icon on an existing site can be challenging. To force iOS to reload the icon, you may need to change the filename or add a cache-busting query parameter. Testing on actual iOS devices — not just the simulator — is recommended because icon rendering behavior can differ between iOS versions.
Android Chrome Icons and manifest.json
Android Chrome uses a web app manifest (manifest.json) to determine the icons displayed for home screen shortcuts, recent apps, and the splash screen. The manifest file should be linked in your HTML using a <link> tag with rel="manifest". The icons array in the manifest should include at minimum 192x192 and 512x512 PNG files, with purpose set to "any maskable" if you provide maskable variants. The maskable icon format ensures your icon adapts correctly to different device shapes — circles, squares, rounded squares, squircles — by defining a safe zone within which your logo should be contained.
The manifest.json file also specifies metadata like the app name, short name, theme color, and background color, which are used in conjunction with the icons to create the full splash screen experience when a user launches your web app from the home screen. Providing all required icon sizes and manifest metadata ensures your progressive web app looks and feels like a native application on Android devices.
PWA Maskable Icons
Maskable icons are a special icon format for progressive web apps that ensures your icon looks correct regardless of the device's icon shape. On Android, different OEMs use different icon shapes — some use circles, others use rounded squares, squircles, or full squares. A standard icon may be cropped or padded awkwardly on devices with non-square shapes. A maskable icon includes extra padding around the logo so that it remains visible and centered regardless of how the operating system masks the icon.
To create a maskable icon, place your logo within the center of a larger canvas with generous padding. The safe zone is roughly the inner 80% circle of the icon. Any content outside this safe zone may be cropped on some devices. Many favicon generators can create maskable variants automatically by scaling your logo to fit the safe zone. Testing your maskable icons with Google's Maskable.app editor is recommended to verify they look correct across different device shapes.
HTML Head Tags for Favicon Configuration
Properly configuring your favicon requires adding several <link> tags to the <head> section of your HTML. A comprehensive favicon setup includes the root favicon.ico for legacy support, PNG favicons with explicit sizes for modern browsers, an Apple Touch Icon for iOS devices, and a manifest link for Android PWA support. Here is the recommended set of tags: a <link> with rel="icon" href="/favicon.ico" for the classic favicon, multiple <link> tags with rel="icon" type="image/png" and sizes attributes for PNG variants, a <link> with rel="apple-touch-icon" for iOS, and a <link> with rel="manifest" href="/manifest.json" for Android.
Browser icons should be served with long cache durations (one year or more) because favicons rarely change and are requested frequently. Set Cache-Control headers to maximize caching efficiency and reduce unnecessary requests. When you do update your favicon, consider using cache-busting by changing the filename or adding a version query parameter to force browsers to download the new version.
Testing Across Browsers
Thorough testing is essential because favicon behavior varies significantly across browsers and operating systems. Test your favicons on Chrome, Firefox, Safari, and Edge on both desktop and mobile platforms. Check browser tabs, bookmarks, history, pinned tabs, home screen shortcuts (iOS and Android), and PWA installation dialogs. Tools like RealFaviconGenerator provide online preview tools that simulate how your icons will look across different contexts, but nothing replaces testing on actual devices and browsers.
Common issues discovered during testing include blurry icons on high-DPI displays (caused by using too small a source image), icons that look wrong on Android home screens (caused by not providing maskable variants), and cached icons not updating after deployment (caused by aggressive browser caching). Addressing these issues before launch ensures a polished, professional appearance everywhere your brand appears.
Common Favicon Mistakes
- Using only favicon.ico — A single ICO file is not sufficient for modern browsers and mobile devices. Always provide PNG variants at multiple sizes.
- Skipping the Apple Touch Icon — Without this icon, iOS devices display a screenshot of your webpage when users add your site to their home screen, which looks unprofessional.
- Missing manifest.json — Android Chrome requires a web app manifest with properly sized icons for home screen shortcuts and PWA features.
- Not testing on actual devices — Emulators and preview tools do not always accurately represent how icons render on real hardware. Test on physical devices.
- Ignoring cache invalidation — Browsers cache favicons aggressively. If you update your icon without changing the filename or adding a cache-busting parameter, users may see the old icon for weeks or months.
Key Takeaways
- Favicons are essential for branding, appearing in browser tabs, bookmarks, home screens, and PWA interfaces across all devices and platforms.
- Provide icons at multiple sizes: 16x16, 32x32, 48x48, 180x180 (Apple Touch Icon), 192x192, and 512x512 (Android/PWA) for comprehensive coverage.
- Use ICO for legacy compatibility at the root, PNG for all modern contexts, and SVG as a future-proof option where browser support allows.
- Configure Apple Touch Icons for iOS home screen additions and manifest.json for Android Chrome PWA features including maskable icons.
- Test on actual devices and browsers — emulators and preview tools do not always reflect real-world rendering accurately.
- Use long cache durations for favicons and implement cache-busting strategies when updating icons.
Frequently Asked Questions
Do I still need a favicon.ico file?
Yes, keeping a favicon.ico file at the root of your website is still recommended. Many browsers, email clients, RSS readers, and other tools automatically request /favicon.ico even if you do not explicitly link to it. Without this file, the server will return a 404 error for every automatic request, which adds unnecessary server load and clutters your error logs. You can embed multiple sizes (16x16 and 32x32) within a single ICO file, making it a compact fallback for any tool that requests it.
What is the best source image size for generating favicons?
The ideal source image is a square SVG file or a high-resolution PNG (at least 512x512 pixels, preferably 1024x1024 or larger). Starting from a large, high-quality source ensures that downscaled versions remain crisp and detailed. Avoid using JPEG sources because JPEG compression artifacts become more visible at small sizes. If your logo has text, ensure the source is large enough that the text remains legible at 16x16 pixels — extremely fine details will not survive downscaling to favicon sizes.
How do I force browsers to update my favicon after a change?
Browsers cache favicons very aggressively, making updates difficult to propagate. The most reliable approach is to change the filename (for example, from favicon-v2.png to favicon-v3.png) and update the href attribute in your <link> tags. Alternatively, you can add a cache-busting query parameter like ?v=3 to the URL. Clearing browser cache, visiting the favicon URL directly, and using private/incognito mode can also help during testing. Note that some browsers, particularly Safari on iOS, may take longer to reflect the change.