Favicon Generator

How favicon generation works

This tool uses the HTML5 Canvas API to resize your source image to each required favicon dimension using browser-native bicubic interpolation. For each target size, a canvas element is created at that exact pixel dimension, the source image is drawn onto it using drawImage() with the destination dimensions specified, and the result is exported as a PNG blob. The ICO format is assembled by combining multiple PNG blobs into the multi-image ICO container structure, with each image stored at a different resolution entry in the ICO directory.

The Canvas drawImage() method is the core of the resizing process. When you specify destination dimensions that differ from the source dimensions, the browser applies an interpolation algorithm to resample the pixel data.>( Modern browsers use bicubic interpolation (specifically, the Mitchell-Netravali filter or a similar kernel), which produces sharper results than bilinear interpolation when downscaling. For very small sizes like 1616, the tool applies additional sharpening to preserve detail that would otherwise be lost in the downsampling.

The ICO file format is a legacy container originally designed for Windows icons. It supports multiple images at different resolutions within a single file, which is why a single .ico file can serve as the favicon for both standard and high-DPI displays. The ICO format uses a directory structure at the beginning of the file, with each entry specifying the image dimensions, color count, and byte offset to the image data. The tool generates ICO files with 1616, 3232, and 4848 PNG images embedded inside the ICO container, giving you a single file that covers the most common favicon contexts.

PNG output preserves the full alpha channel from the source image. If your source image has transparency (for example, an SVG exported to PNG with a transparent background), the generated PNG favicons will retain that transparency. This is important for favicons that need to display over varying tab bar background colors a favicon with a white background rectangle will look wrong on a dark browser theme.

Favicon size requirements across platforms

Different contexts require different favicon sizes, and missing any of them results in blurry or pixelated icons in that context:

• 1616 Browser tab icon (Chrome, Firefox, Safari, Edge). This is the smallest and most commonly used favicon size. It appears in the tab, the bookmarks bar, and the reading list.
• 3232 Taskbar pinned sites on Windows, browser tab at 2 density. Windows uses 3232 for pinned site icons on the taskbar, and high-DPI displays may render the tab icon at 2 scale, requiring a 3232 source for a crisp 1616 display.
• 4848 Windows desktop shortcut icon. When a user creates a desktop shortcut to a website on Windows, the system uses the 4848 favicon. It also appears in the Windows Start menu for pinned sites.
• 180180 Apple touch icon (iOS Safari "Add to Home Screen"). When an iPhone or iPad user adds a website to their home screen, iOS fetches the apple-touch-icon at this size. Missing this icon results in a generic screenshot thumbnail instead of a branded icon.
• 192192 Android Chrome home screen shortcut. Android Chrome uses this size for home screen shortcuts and the "Add to Home Screen" prompt. It is also used in the Web App Manifest for Android.
• 512512 PWA splash screen icon (required by Web App Manifest). Progressive Web Apps use this size for the splash screen that displays while the app loads. It is the largest favicon size and should be designed to look good at full-screen scale.
• 256256 Windows Metro tile. Microsoft's Metro/>( Modern UI uses this size for live tiles on the Start screen.
• 128128 Chrome Web Store. If you publish a Chrome extension, the Chrome Web Store requires a 128128 icon.
• 9696 Google TV. Google TV uses this size for app icons.
• 6464 General HiDPI fallback. Some contexts use this as an intermediate size between 48 and 128.

The generated HTML snippet includes the correct <link rel="icon">, <link rel="apple-touch-icon">, and Web App Manifest icon array entries for all generated sizes. This means you can copy the snippet, paste it into your HTML, and have complete favicon coverage without manually writing any link tags.

The ICO format: why it still matters

The ICO file format was introduced by Microsoft in 1995 and remains the only format supported by all versions of Internet Explorer and some legacy Windows applications. While modern browsers support PNG favicons via <link rel="icon" type="image/png">, the ICO format is still required for several contexts: the default favicon lookup path (browsers check /favicon.ico automatically), Windows desktop shortcuts, and some email clients that display favicons next to sender addresses.

A multi-resolution ICO file contains multiple images at different sizes. When a browser or operating system needs a favicon, it selects the image in the ICO file that best matches the requested size. For example, if the system needs a 3232 icon, it reads the 3232 entry from the ICO directory. If it needs a 1616 icon, it reads the 1616 entry. This means a single ICO file can serve all standard favicon contexts without requiring separate PNG files.

The tool generates ICO files using 32-bit PNG images embedded inside the ICO container. This preserves full alpha transparency, unlike the legacy ICO format which used 8-bit palettized images with a single transparent color. The 32-bit approach produces smooth alpha edges on the favicon, which is essential for icons with curved or anti-aliased shapes displayed over varying background colors.

How to use it

1. Drop a PNG, SVG, JPEG, or WebP source image (512512 or larger recommended).
2. The tool generates all favicon sizes simultaneously.
3. Download individual PNG files or the combined ICO.
4. Copy the HTML snippet and paste it into your site's <head>.

Tips and best practices for favicon design

Start with a high-resolution source. The quality of your favicons depends on the quality of the source image. A 512512 or larger PNG with transparency gives the best results. If you're starting from a vector logo, export it to PNG at a resolution that is evenly divisible by the largest target size (512) to avoid sub-pixel alignment issues during resizing.

Design for small sizes first. A logo that looks great at 512512 may be unreadable at 1616. The most effective favicons use simple, high-contrast shapes a single letter, a simplified icon, or a bold geometric form. Fine details, thin lines, and small text disappear at 1616. Test your favicon at actual display size before committing to a design.

Use transparency wisely. A transparent background lets your favicon blend with the browser's tab bar color, but it also means the icon shape must be self-contained. If your logo relies on a background color for contrast, flatten it onto a solid background before generating favicons. Most successful favicons have a solid background (white, black, or brand color) with the logo shape on top.

Consider dark mode. If your site supports dark mode, your favicon may need to work over both light and dark tab bar backgrounds. A favicon with a white background will look like a white square on a dark theme. Test your favicon on both light and dark browser themes to ensure it remains recognizable.

Host favicons at the root. Browsers automatically request /favicon.ico from the site root. Placing your ICO file there ensures it is found even if no <link> tags are present. The HTML snippet from this tool includes explicit <link> tags that override the default lookup, but hosting the ICO at the root provides a fallback for contexts that do not process <link> tags.

Comparison with alternative approaches

Online favicon generators with server upload. Several websites generate favicons but require you to upload your logo to their servers. This introduces the same privacy concern as other cloud-based tools your logo image is transmitted to a third-party server. Some services also watermark the output or require payment for full-resolution downloads. This browser tool generates all sizes locally without any upload.

Desktop applications. Applications like Adobe Illustrator, Figma, and GIMP can export favicons at specific sizes, but the workflow requires manual resizing for each target dimension, manual ICO assembly (or a plugin), and manual HTML snippet writing. This tool automates the entire pipeline in one operation.

Build tools and CLI utilities. Developers can use build tools like webpack with the favicons npm package to generate favicons as part of their build process. This approach is ideal for automated pipelines but requires Node.js setup and configuration. The browser tool is more convenient for one-off favicon generation or for users who do not have a development environment set up.

Canva and design tools. Design tools like Canva offer favicon templates, but they typically generate a single size. You still need to manually create the other sizes and assemble the ICO file. This tool generates all sizes from a single source, including the ICO, which no single design tool does out of the box.

Browser compatibility for favicons

Favicon support varies across browsers, and understanding these differences helps you avoid broken icons in specific contexts. Chrome, Firefox, Safari, and Edge all support PNG favicons via <link rel="icon" type="image/png">, but each browser has quirks in how it selects which size to display. Chrome performs the most sophisticated size selection, choosing the linked image that best matches the display context based on the sizes attribute. Safari primarily relies on the apple-touch-icon for iOS and the first <link rel="icon"> for the tab, ignoring most size attributes.

Internet Explorer and legacy Edge versions have limited support for PNG favicons. IE uses the ICO format almost exclusively, which is why hosting a favicon.ico at the site root remains important for cross-browser compatibility. The ICO fallback ensures that even older browsers display an icon, even if they ignore the PNG link tags entirely. Windows 10 and 11 use the 4848 favicon entry from the ICO file for desktop shortcuts and taskbar pinned sites.

Mobile browsers introduce additional considerations. iOS Safari ignores <link rel="icon"> tags entirely and uses only the apple-touch-icon for home screen shortcuts. Android Chrome supports both PNG link tags and the Web App Manifest icons, with the manifest taking precedence when a PWA is installed. Samsung Internet, which ships on many Samsung devices, follows Android Chrome's behavior but may cache favicons differently, requiring a cache-busting query parameter or filename change when updating icons.

Favicon best practices for modern web apps

( Modern web applications have specific favicon requirements beyond static websites. A PWA must declare icons in the Web App Manifest with the correct sizes and purpose attributes. The "maskable" purpose tells the browser that the icon can be cropped to fit Android's adaptive icon shape, while "any" indicates the icon should be displayed at its natural dimensions. Including both entries in the manifest gives the browser the flexibility to choose the best representation for each context.

Cache busting is essential when updating favicons. Browsers aggressively cache favicon files, sometimes for weeks or months, because they are small and rarely change. To force browsers to fetch the updated icon, append a query parameter to the href (for example, href="/favicon.png?v=2") or rename the file entirely. Some developers embed a version hash in the filename (for example, favicon.a3b2c1.png) which guarantees a fresh fetch on every deployment.

For sites that support dark mode, consider generating a second set of favicons optimized for dark backgrounds. While most browsers do not yet support automatic favicon switching based on theme, some contexts like the Android home screen will display the icon over a dark wallpaper. A favicon with a light background and dark logo shape works best for universal readability across both light and dark environments. Testing your favicon at actual size on both light and dark backgrounds helps identify contrast issues before deployment.

Frequently Asked Questions