Convert PNG to ICO Favicon Online

Generate browser-ready favicons without uploading your logo

Getting favicons wrong is one of the most common web development oversights using a single 1616 PNG means your icon is blurry on retina displays, missing on iOS home screens, and broken in Web App Manifests. This generator produces all required sizes in one operation from a single source image, using Canvas-based bicubic resampling entirely in your browser.

Why single-size favicons cause problems

The most common favicon mistake is creating a single 1616 PNG and expecting it to work everywhere. A 1616 image displayed on a 2 Retina display will appear as 32 physical pixels but only 16 CSS pixels, making it look blurry because the browser upscales the small image. Conversely, a 512512 image used as a tab icon will be downscaled to 16 pixels, losing all detail and appearing as an indistinct blob.

The solution is to provide multiple sizes and let the browser choose the appropriate one.>( Modern browsers request favicons at the size that matches their display context: a standard display needs 1616, a Retina display needs 3232 for a 1616 CSS pixel icon, and the iOS home screen needs 180180. By providing all these sizes, you ensure the browser always has a source image that matches the display context, resulting in a crisp icon at every scale.

The Web App Manifest adds another layer of complexity. Progressive Web Apps require icon declarations in the manifest file, with specific sizes for different contexts: 192192 for the Android home screen shortcut and 512512 for the splash screen. If these sizes are missing, the PWA may display a generic placeholder or fail to meet the installability criteria that Chrome and other browsers use to prompt users to install the app.

How browser favicon lookup works

When a browser loads a page, it follows a specific sequence to find the favicon. First, it checks the HTML for <link rel="icon"> tags. If multiple tags exist, the browser selects the one with the most appropriate size for the display context. If no link tags are found, the browser falls back to requesting /favicon.ico from the site root. This fallback is why many sites have a favicon.ico file at their root even if they also specify PNG favicons via link tags.

The order of preference varies by browser. Chrome prioritizes PNG favicons over ICO when both are specified. Safari primarily uses the apple-touch-icon for iOS home screen shortcuts and the <link rel="icon"> for the tab. Firefox supports both ICO and PNG formats and selects based on the declared sizes. Edge follows Chrome's behavior for most contexts but uses the ICO format for legacy Windows integration.

The HTML snippet generated by this tool includes link tags in the correct order of specificity, with the smallest sizes first and the largest last. This ensures that browsers select the most appropriate size for each context. The snippet also includes the sizes attribute on each link tag, which tells the browser what size the linked image is without this attribute, the browser may use the wrong image for a given context.

The role of favicons in brand recognition

Favicons serve as a visual anchor for your website in the browser. When users have multiple tabs open, the favicon is the primary visual identifier that distinguishes your site from others. A consistent, recognizable favicon builds brand recognition over time users learn to associate your icon shape and colors with your content, even at the small sizes where text is unreadable.

For brands with complex logos, favicon design requires simplification. A detailed logo with fine lines and small text will not be recognizable at 1616 pixels. The most effective favicons extract a single distinctive element a letter, a geometric shape, or a simplified symbol and present it in high contrast against a solid background. Google's multicolor "G", Twitter's bird silhouette, and GitHub's octocat are examples of favicon designs that work at every size because they use simple, bold shapes.

The favicon also appears in other contexts beyond the browser tab: bookmarks, reading lists, browser history, search results (in some browsers), and PWA install prompts. A well-designed favicon improves the user experience across all these touchpoints, while a missing or poorly designed favicon makes the site feel unpolished.

Progressive Web App icon requirements

Progressive Web Apps (PWAs) have strict icon requirements defined in the Web App Manifest. The manifest file must include an icons array with at least two entries: a 192192 PNG and a 512512 PNG. The 192192 icon is used for the Android home screen shortcut, and the 512512 icon is used for the splash screen that displays while the PWA loads.

Both icons should have a purpose of "any" for standard display or "maskable" for icons that adapt to Android's adaptive icon shape. Maskable icons must have their content within a safe zone (a circle inscribed in the square) to ensure nothing is clipped when the system applies its mask shape. If you plan to use maskable icons, design your favicon with the main content centered and sufficient padding around the edges.

The tool generates the manifest icon entries automatically in the HTML snippet, so you can copy them directly into your manifest.json file. The snippet includes both the 192192 and 512512 entries with the correct sizes and type attributes.

Practical examples of favicon implementation

Static HTML site. For a simple HTML site hosted on a static server, upload all generated PNG files and the ICO file to your web root. Paste the HTML snippet into your <head> section. The browser will automatically request the appropriate size for each context. Place the favicon.ico at the site root as a fallback for browsers that do not process <link> tags.

React or Next.js project. In a React or Next.js project, place the favicon files in the public/ directory. Next.js automatically serves files from public/ at the site root, so a public/favicon.ico is accessible at /favicon.ico. For the HTML snippet, add the link tags to the <head> section of your root layout or pages/_document.js.

WordPress site. WordPress themes typically have a favicon upload option in the Customizer. Upload your ICO file or the largest PNG (512512) through the Customizer, and WordPress will generate the required link tags. However, the WordPress favicon upload may not generate all the required sizes you may need to manually upload additional sizes and add the corresponding link tags to your theme's header.php or use a plugin.

PWA with workbox. If you are building a PWA with Workbox, place the favicon files in your public/ directory and reference them in your manifest.json. The tool's generated manifest snippet provides the correct icons array that Workbox expects. Ensure the splash screen icon (512512) is available at the exact path specified in the manifest.