A single favicon file used to be enough, but browsers, phones and app icons have quietly split that requirement into several different sizes over the years. A 16 pixel icon shows in a browser tab, a 32 pixel version covers the Windows taskbar and higher density tabs, 48 is used by some browsers for shortcuts, 180 is the size Apple expects for an icon pinned to an iOS home screen, and 512 covers larger contexts like a progressive web app icon. Missing any one of these produces a blurry or missing icon in exactly that context.
Everything is generated locally. Your source image is decoded by the browser, resampled onto a canvas at each required size, and encoded as PNG on your own device, so a logo that has not been publicly released yet never has to be uploaded just to generate its icon set.
Which favicon sizes you actually need
Not every context needs a different file in practice, since browsers will scale a larger icon down when a smaller one is missing, but providing the exact size for each context avoids the softness that scaling introduces and is what every major favicon guide recommends. The five sizes this favicon generator produces cover the situations that come up most often on a real website.
- 16x16 for the classic browser tab and bookmark bar icon.
- 32x32 for high density browser tabs and the Windows taskbar.
- 48x48 for desktop shortcuts and some browser start pages.
- 180x180 for the Apple touch icon used when a page is added to an iOS home screen.
- 512x512 for a progressive web app icon and other large format contexts.
Starting from the right source image
A favicon generator can only work with what it is given, so the source image matters more than any setting in the tool itself. A square image with a simple, high contrast design reduces to 16 pixels far more legibly than a detailed logo with fine text or thin lines, which simply disappears at that size no matter how good the resampling algorithm is.
If your source image is not already square, this tool centres it on a square canvas before resizing, cropping off centred content on the two longer edges. For the cleanest result, start from a square logo mark rather than a wide logo that includes text, since the wordmark portion will be cut off by that centring step.
Using the generated HTML link tags
Alongside the five PNG files, this tool outputs the exact link tags a browser expects to find in the head of your HTML document, referencing each file by the name it was downloaded with. Pasting that snippet directly into your site removes the guesswork of matching the right rel and sizes attributes to the right file, which is a common source of a favicon that technically exists but never actually shows up.
The snippet includes a standard icon link for each PNG size plus a dedicated apple touch icon link for the 180 pixel version, since Apple's devices specifically look for that rel value rather than falling back to the generic icon links the way most other browsers do.
How this favicon generator works under the hood
For each of the five target sizes, the tool creates a fresh canvas at exactly that dimension, draws the source image scaled and centred to fill it, and encodes the result as PNG using canvas toBlob. Running each size through its own dedicated resample, rather than shrinking one large PNG repeatedly, keeps every file as sharp as the source image allows at that size.
Because the whole pipeline runs on canvas primitives built into the browser, there is no server step and no queue, and you can confirm nothing is uploaded by checking your browser's network panel while the files are generated. A favicon set that would otherwise need five separate exports from a design tool is produced here in one pass.
Common favicon mistakes this avoids
The two most common favicon problems are providing only one size and letting the browser scale it, which produces a soft or pixelated icon, and forgetting the Apple touch icon entirely, which leaves iOS falling back to a screenshot of the page instead of the logo. Generating all five sizes and the matching link tags together at once, in a single favicon generator pass, avoids both problems by construction rather than by remembering a checklist.
How to generate a favicon
- 1
Add your source image
Drag a square logo or icon onto the drop area, or click it to choose a file. A simple, high contrast design works best.
- 2
Review the generated sizes
The tool produces 16, 32, 48, 180 and 512 pixel PNGs automatically from your source image.
- 3
Download each file
Download the full set individually or all at once, keeping the exact filenames the HTML snippet refers to.
- 4
Copy the HTML link tags
Copy the generated snippet and paste it into the head section of your site's HTML.
Related tools worth bookmarking
Sources and further reading
Frequently asked questions
Common questions about the favicon generator.
At minimum, provide 32x32 for the browser tab and 180x180 for the Apple touch icon, since those cover the majority of real world contexts. Including all five sizes this tool produces, 16, 32, 48, 180 and 512, covers every common case without leaving any context to fall back on a blurry scaled version.
No. Every size is generated locally using the canvas element in your browser. Your source image is never transmitted to a server, which you can confirm by checking your browser's network panel while the favicon set is being created.
iOS looks specifically for a link tag with rel apple touch icon rather than the generic favicon links other browsers use, and it expects a 180 pixel image with no transparency for the best result when a page is added to a home screen. Providing that size and link tag together is what makes the icon appear correctly on an iPhone or iPad.
The tool centres a non square source image on a square canvas before generating each size, which crops the two longer edges evenly around the centre. For the sharpest and most predictable result, start from a square logo mark rather than a wide image that includes text.
Technically yes, but it rarely works well, since a photograph has no simple high contrast shape and turns into an unrecognisable smear of colour once it is reduced to 16 pixels. A simple icon or logo mark with bold shapes and few details reduces far more legibly.
Including all five is recommended and is exactly what the generated snippet provides, since each size targets a different real world context. Omitting one, most commonly the Apple touch icon, simply means that specific context falls back to scaling a different size, which usually looks noticeably softer.