BrowserTools
Advertisement
Home / Images / Favicon Generator

Favicon Generator

Generate favicon PNGs at every standard size and a multi-resolution .ico file from any image, entirely in your browser.

Loading Favicon Generator… If nothing happens, please enable JavaScript.

A favicon is the small icon a browser shows next to a page title in the tab strip, in the bookmarks bar, and in the history list. The name is a contraction of favorite icon, a term that dates back to Internet Explorer 5 in 1999, when Microsoft introduced support for a file named favicon.ico in the site root. Two and a half decades later the humble favicon has grown into a small family of assets: a classic multi-size .ico for legacy desktop browsers, a set of PNGs for modern browsers, a 180x180 apple-touch-icon for iOS home screens, and 192x192 and 512x512 PNGs referenced from a web app manifest for Android and installable progressive web apps.

Frequently asked questions

Is my image uploaded anywhere?
No. The image is decoded and redrawn entirely in your browser using the Canvas and Blob APIs. Nothing is sent to a server, there is no telemetry, and the tool works offline once loaded. This makes it safe for confidential logos and client work.
What sizes does the generator produce and why?
It produces 16x16 and 32x32 for browser tabs and bookmarks, 48x48 for Windows and higher-density tabs, 180x180 for the iOS apple-touch-icon, and 192x192 and 512x512 for the Android web app manifest and installable PWAs. Together these cover virtually every place an icon is shown across modern platforms.
Can a .ico file really contain PNG data?
Yes. Since Windows Vista, the ICO container format has allowed each entry to be stored either as an uncompressed BMP or as a full PNG image. All current browsers and operating systems read PNG-in-ICO entries. This tool embeds the 16, 32, and 48 pixel PNGs directly, which keeps the file small and the edges sharp.
What source image should I use for the best favicon?
Start with a square image at 512x512 pixels or larger so every downscaled size stays crisp. Use bold shapes and high contrast, because fine detail and thin strokes vanish at 16 pixels. A transparent PNG keeps the icon clean on light and dark browser themes alike.
How do I add the generated favicons to my website?
Place the files in your site root or an assets folder, then reference them in the page head: a link with rel=icon pointing to favicon.ico, a link with rel=icon type=image/png for the 32x32 PNG, a link with rel=apple-touch-icon for the 180x180 PNG, and the 192 and 512 PNGs listed in your web app manifest under icons.
Why does my favicon look blurry or pixelated?
Blurriness usually comes from upscaling a small source image, so always start larger than the biggest output size. Pixelation at 16 pixels is normal and unavoidable for detailed art; the fix is to simplify the design rather than the export. This tool uses high-quality smoothing when downscaling to minimise both problems.
Does the tool keep image transparency?
Yes. All PNG outputs and the PNG entries inside the .ico preserve the alpha channel of your source image, so transparent backgrounds stay transparent. If your source has no alpha channel, the icon simply uses its existing solid background.
Why is my favicon not updating in the browser?
Browsers cache favicons aggressively, sometimes for days. After deploying a new icon, force a hard refresh, clear the site data, or append a version query string such as favicon.ico?v=2 to the link tag. The cache is on the browser side, not in this tool, which always generates fresh files.

About Favicon Generator

This generator takes a single source image and produces all of those sizes at once. It draws your image onto HTML canvases at 16, 32, 48, 180, 192, and 512 pixels, keeping the aspect ratio and centring the artwork inside each square, then encodes each one as a crisp PNG you can download individually. It also assembles a real .ico file that bundles the 16, 32, and 48 pixel renditions into one container, so a browser can pick whichever resolution it needs. Modern .ico files may embed PNG-compressed entries rather than raw bitmaps, and that is exactly what this tool writes, producing a smaller and sharper icon than the old uncompressed BMP format.

Everything happens locally inside your browser using the Canvas API and the Blob API. Your image is never uploaded to a server, there is no account to create, and there is no queue to wait in. That makes the tool safe for unreleased logos, client work under NDA, and any artwork you would rather not hand to a third-party service. Once the page has loaded it also works offline, and the generated files are produced instantly on your own device.

For the best result, start from a square, high-resolution source, ideally 512x512 or larger, with a transparent or solid background and bold, simple shapes. Fine detail and thin lines disappear at 16 pixels, so favicons that read well are almost always simplified versions of a full logo. Test the 16 and 32 pixel previews at their true size before shipping, because that is how most users will actually see your icon in a crowded row of browser tabs.

From a single hidden file to a whole icon ecosystem

The favicon was born in March 1999 with Internet Explorer 5. Microsoft's implementation was quietly clever and slightly invasive: the browser automatically requested a file called favicon.ico from the root of any site you bookmarked, with no markup required. Webmasters discovered the feature by noticing mysterious requests for that filename in their server logs. Because the request happened only on bookmarking, an early unofficial metric for site popularity was counting favicon.ico hits.

The original specification tied favicons to the Windows ICO container, a format inherited from Windows 3.0 that can hold multiple images at different sizes and colour depths inside one file. For years those entries were uncompressed BMP bitmaps, which made high-resolution icons surprisingly large. Windows Vista changed that by allowing PNG-compressed entries inside the same container, and the web standardised on PNG favicons referenced through link rel=icon tags, freeing designers from the constraints of the old format while keeping .ico alive for backward compatibility.

The mobile era multiplied the requirements. Apple introduced the apple-touch-icon so a bookmarked page could sit on the iOS home screen looking like a native app. Android and the Web App Manifest specification added 192 and 512 pixel icons for installable progressive web apps and splash screens. What started as one hidden 16x16 file has become a small design system in its own right, and generating the whole set by hand in an image editor is exactly the tedious, repetitive task a browser-based tool is meant to take off your plate.

Advertisement
Advertisement
Advertisement