Favicon generator (ICO, Apple touch icon, manifest)
Make favicon.ico, the Apple touch icon, Android icons and site.webmanifest from one image.
Or choose them. Files are processed in this tab and never uploaded to any server.
Every site needs the same handful of icon files, and most generators still produce two dozen sizes that no browser has asked for in years. This makes the current minimal set from one square image: a favicon.ico holding 16, 32 and 48 pixel versions, an SVG icon if you started from SVG, a 180-pixel Apple touch icon with a solid background, 192 and 512 pixel icons for Android and installable apps, and the web manifest — together with the HTML to paste into your page's head.
How it works
- The .ico container is written byte by byte in the page, with PNG images inside it — the variant every browser since Internet Explorer on Vista reads.
- Large sources are shrunk by repeated halving rather than one jump, so the 16-pixel icon averages the whole image instead of sampling a few stray pixels.
- The Apple touch icon gets the background colour you choose, because iOS fills transparent areas with black; the other icons keep their transparency.
Where your data goes
Nowhere. This tool runs entirely in your browser: the text you paste is processed by the page and is never transmitted to a server or written to a log.
This tool is free and needs no account. Its results exist only in your open page and are not saved anywhere.
What it costs
This tool is free, with no sign-in and no points.
Common questions
- What image should I start from?
- A square SVG, or a PNG of at least 512 × 512 pixels. A non-square image is centred with empty space around it, or cropped to fill if you choose that fit; an image smaller than 512 pixels gets upscaled for the largest icon and will look soft.
- Where do I put the files?
- In the root of your site, so they are served at /favicon.ico, /apple-touch-icon.png and so on — the snippet refers to those paths. In Next.js that is the public folder; in most static site generators it is the static or public directory.
- Do I still need favicon.ico at all?
- Yes. Feed readers, some search tools and older browsers request /favicon.ico directly without reading your HTML, and a 404 there shows up in your logs on every visit. The sizes attribute of 32x32 in the snippet keeps modern Chrome using the SVG icon when there is one.
- What is the icon padding for?
- Android can mask app icons into circles or rounded squares, cutting off the corners. Around 10 percent padding keeps a logo that touches its edges inside the safe zone; for a favicon on a browser tab, no padding makes the most of 16 pixels.
The open-source behind it
This tool is a self-contained implementation. itgalaxy/favicons (MIT) does the same job as a library — if you need this behaviour inside your own program, start there rather than calling a web page.
itgalaxy/faviconsAlso known as
- favicon generator
- png to ico
- favicon ico generator
- apple touch icon generator
- create favicon from image
- site.webmanifest generator