Favicon generator

Drop a logo or icon (PNG, JPEG, WebP, GIF, BMP or SVG) and get every file a site needs: favicon.ico, PNG icons for browsers, the Apple touch icon, manifest icons for Android and installed apps, your SVG passed through when you start from one, a web manifest and the <head> lines. Every pixel is drawn by your browser on this device.

Favicon generator

or drop it here. The file stays on this device.

How it works

  1. Choose or drop one image. A square image of at least 512 px, or any SVG, gives the best result.
  2. Pick fit or crop, padding, background and the app name for the manifest.
  3. Press Make favicons, check the preview, download the ZIP and paste the <head> lines into your page: copy them from the box under the preview, or from favicon-snippet.html.

Questions

Which files are in the set?

favicon.ico holding 16, 32 and 48 px images (PNG-compressed inside the ICO, which every current browser and Windows since Vista read); favicon-16x16.png and favicon-32x32.png; apple-touch-icon.png at 180 px; icon-192.png and icon-512.png for the web manifest; favicon.svg, only when your source is an SVG; site.webmanifest; and favicon-snippet.html with the link tags. The paths in the snippet and manifest assume the files sit at the root of your site.

How is the image resized?

On a canvas in your browser, halving step by step before the final size so small icons stay clean, with high-quality smoothing. An SVG is rendered fresh at every size, so it stays crisp; an SVG without a viewBox is given one from its width and height so the drawing keeps its scale, and an SVG with neither is refused, because it has no scale to keep. Fit keeps the whole image inside the square and centres it; crop takes the centre square. Padding leaves 10 or 22 percent of the side empty on every edge, so the image fills the middle 80 or 56 percent of the square. A launcher may mask a maskable icon to any shape, but every mask keeps the circle of 80 percent of the icon's width around its centre (the W3C safe zone); 22 percent padding, rounded up to whole pixels, keeps the image's whole square, corners included, inside that circle at every size, so the manifest marks the icons as maskable only when you choose it.

Why does the Apple touch icon always have a background?

iOS ignores transparency in touch icons and shows black where the image is transparent. The tool fills the Apple touch icon with your background colour, or white when you keep transparency for the other icons. All other icons keep the transparency you asked for.

My image is small or not square. What happens?

Small images are upscaled to 512 px for the largest icons and will look soft; the file list warns you when the source is under 512 px. A non-square image is centred in the square (fit) or cropped to its centre (crop); you choose.

Does it make icons for Windows tiles, Safari pinned tabs or older Internet Explorer?

No. The set covers current browsers, iOS, Android and installable web apps. browserconfig.xml, mask-icon and the old 57 to 152 px Apple sizes are not generated.

Is my file uploaded?

No. The page loads a small script into your browser and every operation runs on your device. You can check this yourself in the browser's network panel: after the page has loaded there are no upload requests. Closing the tab discards the file.

Do I need an account or to pay?

No. These basic tools are free, have no limits set by us and store nothing on our servers. The practical limit is your device's memory for very large files.

What does this page keep in my browser?

Nothing you open or type. While the tab is open, the tool pages keep a short list of the steps taken in it, in the tab's session storage: the step (page opened, started, succeeded, first success, used again or failed), the tool's name, the time, how many files were used and, for a failure, an error code; never a file name, the contents of a file or your text. It holds at most the latest 200 steps, and the browser deletes it when the tab closes. The page never sends it. Where a Report a problem button is shown, you can attach the last 20 steps to your report; nothing is attached unless you tick that box. In local storage the page keeps only choices you made: a Light or Dark theme until you choose System again, the language you picked with the EN / 中文 switch if it differs from your browser's language, and this tool in your recently used list if you switched that list on at the tools page.

Questions or problems

Found a problem or missing feature? Tell us. Please describe the steps; do not send confidential data.