Favicon Generator — ICO, PNG and Apple Touch Icon
Turn one image into a complete favicon set: favicon.ico, PNG icons, an apple-touch-icon and a web app manifest.
The apple-touch-icon is always opaque. When the app name is empty, the manifest uses the image file name.
Preview
Files in the ZIP
How to make a favicon
- Choose a square image, ideally at least 512 by 512 pixels, in PNG, JPG, WebP or SVG format.
- Pick how non-square images should fit: contain pads them with the background colour, cover centre-crops them.
- Set the background and theme colours, the padding and whether the small icons keep a transparent background.
- Type the app name and short name that the web app manifest should carry, then check the live previews.
- Download the ZIP with every file, or grab favicon.ico and apple-touch-icon.png on their own, and copy the HTML snippet.
When it helps
- Giving a new website a favicon without opening an image editor.
- Replacing a missing or blurry favicon that shows as a blank page icon in tabs.
- Adding an apple-touch-icon so a site looks right when saved to an iPhone home screen.
- Preparing Android icons and a manifest for a progressive web app.
- Turning a logo into a tidy icon set with even padding on every size.
Frequently asked questions
What sizes does the generator produce?
It writes favicon.ico with 16, 32 and 48 pixel images inside, separate favicon-16x16.png and favicon-32x32.png files, an apple-touch-icon.png at 180 by 180, and Android icons at 192 and 512 pixels.
Why is the apple-touch-icon always opaque?
iOS does not show transparency in a home screen icon, so a transparent PNG would come out with a black or white block behind it. The generator fills that file with your background colour and leaves the small favicon sizes transparent if you want.
What should I put in the manifest?
Use the full site or app name and a short name of about twelve characters, because the short name is what appears under the icon on a phone. The theme colour tints the browser bar and the background colour fills the splash screen.
Can I use an SVG logo?
Yes. The SVG is rasterised at 512 pixels wide and its aspect ratio is taken from the width and height attributes or from the viewBox, so a square logo stays square.
Where do the files go on my server?
Put them in the site root next to index.html, so the paths in the snippet such as /favicon.ico and /site.webmanifest resolve. If you keep them in a subfolder, edit the href values in the snippet to match.
Is my image uploaded anywhere?
No. The image is decoded and drawn on a canvas inside your browser, and the ZIP is assembled in memory, so nothing is sent to a server.