Favicon Generator

ICO entries and platform PNG sizes

Use the ICO entries for consumers that accept ICO, and use the separate platform PNG files for Apple touch icons and web app manifests. A large canvas alone does not make a platform asset interchangeable with a different file format.

ICO stops at 256 pixels here. The 512-pixel outputs do not go into the ICO. The current generated ICO contains 16, 32, 48, 64, 128 and 256 entries; 24 is an optional size reference in this table, not an extra entry claimed for the tested file.

The maskable output uses a solid background selected above. Artwork is fitted into a centered square inside a safe circle whose radius is 40% of the image width. The square is smaller than the full image, so its corners also fit inside the circle. Keep essential strokes within that region. The background can extend beyond it, where a launcher can apply its own mask. A transparent regular PNG and an opaque maskable PNG serve different purposes.

Three installation questions

When should I use ICO, and when should I use PNG?

Use ICO for the favicon link when you want several stored sizes in one icon file; use PNG for the Apple touch icon and the Android manifest entries generated in this pack. Choose by the receiving feature and its declared file type, rather than by changing a filename extension. A PNG renamed to .ico has not acquired an ICO directory. Likewise, an ICO renamed to .png has not become a PNG image.

The ICO in this generator contains separate PNG-encoded images for six sizes. That internal encoding does not mean the whole ICO file is one PNG: the container still begins with an ICO header and an image directory. The separate Apple and Android files begin with PNG data directly. Keep both kinds when installing the full pack, and link each one through the appropriate HTML or manifest field.

Transparent pixels found in your input can remain transparent in the ICO and ordinary PNG outputs. An opaque JPG or an opaque WebP does not gain a transparent background just because the destination supports alpha. The pre-generation message checks decoded pixels and warns when none are transparent. It cannot decide that a white area is unwanted, and it does not erase a background. To remove white corners, prepare a genuinely transparent source first.

Where does site.webmanifest go, and what goes in head?

For the unmodified generated pack, put site.webmanifest at the website root beside favicon.ico and the four PNG files. The supplied URLs begin with a slash, so they resolve from the origin root even when the HTML page is in a nested folder. Paste the following tags inside the document head, not into the visible body text.

<link rel="icon" href="/favicon.ico" sizes="16x16 32x32 48x48 64x64 128x128 256x256">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

If you deploy under a subdirectory or use an asset folder, edit the HTML href values and every icon src in the manifest together. Also review the manifest start_url, which defaults to the root in this pack. Moving the manifest alone does not automatically move the icon files, and a copied filename is not proof that the URL is reachable. Open each installed URL on your own domain and confirm it returns the intended image or manifest instead of a sign-in page or a not-found document.

The manifest names the 192-pixel and 512-pixel ordinary PNG files and a separate 512-pixel entry with purpose set to maskable. Preserve that distinction. favicon-links.html is a downloadable snippet, not an additional icon and not a complete website page. Copy its tags into your existing head. Downloading the pack does not install it on your hosting account; you still need to publish those assets with your site.

After editing the app name, generate the files again so site.webmanifest receives the new value. The background choice affects the generated maskable image and the manifest background color. It does not remove the existing background from your source artwork. Check that the text and filenames you deploy belong to the same generation run, particularly if you downloaded several trial versions with browser-added duplicate filename suffixes.

Why does the small favicon look blurry?

Simplify detailed artwork before shrinking it: small text, closely spaced lines and thin outlines can merge when reduced to a tiny pixel grid. A larger export cannot reconstruct details absent from the source. Start with a clean source, remove decorative elements that do not help recognition, and review the smallest result at its actual display size.

Transparent padding preserves the complete source proportions, but it can make the visible mark occupy less of the final square. If a wide wordmark becomes unreadable, use a compact symbol designed for the square canvas rather than stretching the wordmark to fill it. This generator fits the image without stretching. It does not perform a separate artistic redraw for each size, so a detailed logo may need a purpose-designed small version.

Compare the outline and contrast against both light and dark backgrounds. A transparent pale shape can be difficult to see on a pale tab, while a dark shape can disappear against a dark surface. Changing the source design is different from adding an opaque maskable background: regular favicon transparency and launcher masking should be reviewed separately. The tool reports pixel transparency, not a guarantee that every tab theme will make your design readable.

Check the actual downloaded result instead of a large on-screen preview alone. The browser or operating system chooses its displayed icon from the available assets. This page generates files; it does not verify which image a particular installed browser will select or when its cache will refresh. If you are checking a replaced icon, first confirm that the published asset URL returns the replacement file before changing the artwork again.

One input, seven downloaded files: measured 2026-11-06

We selected the same self-made transparent PNG used in the local preset test, generated this pack in Chrome, and downloaded all seven output files. The source was fixture.png from our Minecraft preset test directory. The decoded source contains a green rectangle on a transparent 120 × 80 canvas. These are the sizes of that single downloaded sample set, not limits, target file sizes or promises about other artwork.

We parsed the ICO directory and decoded its embedded PNG entries: 16, 32, 48, 64, 128 and 256 pixels. The separate PNG files decoded to 180, 192, 512 and 512 pixels respectively, with RGBA channels. The generated manifest and HTML snippet were also downloaded as files. An RGBA channel label alone does not establish that every file has transparent pixels: the maskable output deliberately has an opaque background.

All generation runs locally in the browser; your selected image is not uploaded. The test used a local page before publication and checks the downloaded file structures and dimensions. It is not a claim that we installed this sample on every Apple or Android device. To reproduce, select the same source, keep the default name and background, generate the files and inspect their dimensions. Encoded byte lengths can vary with image content and browser encoding; compare the records for the specific run rather than treating these sample byte lengths as a specification.