Favicon Generator

How to use

1. Upload an image, or use letter mode. For an image, 512 px or larger is recommended. For a letter mark, type one or two letters and pick colours.
2. Adjust padding, background and mask. Transparent backgrounds keep a logo's shape. A rounded or circle mask changes the silhouette. Check the maskable safe-zone guide: artwork inside the 80% zone is not cropped by phone home screens.
3. Check the true-size previews. A logo that looks clear at 512 px can become unreadable at 16 px. Simplify it before you export if the 16 px render is a blur.
4. Download the ZIP, upload the files to your site root, and paste the HTML snippet into the head of your pages. Test the snippet on a test page so no file returns a 404.

Worked example

Load sample fills letter mode with a fictional letter mark, the letter A on a navy background, and produces the full set: a true multi-layer ICO with 16, 32 and 48 px layers, PNG files at 16, 32, 48, 180, 192 and 512 px, a site manifest, and the HTML snippet. The ICO is not a renamed PNG: its header lists three layers, and each layer's size can be parsed from the file. The SVG output is offered only for SVG and letter sources, so it is a real vector, not a traced raster image.

Limitations

This tool does not trace a raster logo into a true vector, does not guarantee that every browser or platform picks the same icon, and does not generate a social or open-graph image — those are out of scope for this tool. The ICO uses PNG entries, which modern browsers support; a legacy bitmap-entry ICO is not produced, and the set includes PNG fallbacks for modern browsers. Complex logos lose detail at 16 px no matter how good the source is, which is why the preview at true size matters more than the preview at 512 px. A 1 px input is warned against, not presented as high quality.

How browsers choose an icon

Browsers do not all ask for the same file. A desktop browser tab usually asks for the favicon.ico file first, and then falls back to a PNG if the ICO is missing or unusable. A phone home screen asks for the Apple touch icon or the manifest icons, and it may crop the image into a rounded square or a circle depending on the device. An installable web app reads the manifest, which lists the 192 and 512 px icons and says whether an icon is maskable. That is why a single file is not enough, and why the set in this tool includes several sizes and a manifest: each context gets a file made for it, instead of one file stretched, cropped or ignored. The HTML snippet tells the browser where each file lives, so a missing file shows up as a 404 in testing instead of a silently wrong icon in production. Keeping the files at your site root, with the exact names in the snippet, avoids the most common placement error, which is uploading the files to a subfolder and pasting a snippet that points somewhere else.

Frequently asked questions