Favicon Generator (ICO · PNG)

Turn one image into favicon.ico, PNG favicons, home-screen icons and a web manifest, and download them as a ZIP together with the HTML tags to paste.

Loading…

How to use

  1. Choose an image or drop it into the box. PNG, JPEG, WebP, GIF and SVG work; a square image of at least 512 × 512 px gives the sharpest result.
  2. Adjust padding and rounded corners, and pick a transparent or solid background. The list below updates as you change them.
  3. Enter an app name if you want it in site.webmanifest. It is shown when the site is added to a phone’s home screen.
  4. Press “Download all (ZIP)”, or download single files from the list.
  5. Upload the files to the root folder of your site and paste the tags shown under “Tags for <head>” into the <head> of your pages.

Frequently asked questions

Is my image uploaded?
No. Resizing and packaging happen only in your browser.
Which files are included?
favicon.ico (16·32·48), favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png (180), android-chrome-192x192.png, android-chrome-512x512.png, site.webmanifest, favicon-head.html. The HTML file holds the tags to paste.
Why does apple-touch-icon.png have a background even when I choose transparent?
iOS fills transparent areas with black and rounds the corners itself. So this icon always gets a solid background (white when transparent is selected) and no rounded corners.
My image is not square. What happens?
It is scaled to fit and centered, leaving empty space on the shorter sides. Crop it to a square first if you want it to fill the icon.
The icon looks blurry at 16 px.
Fine detail and thin text disappear at 16 × 16 px. Use a simple shape or one or two letters, and keep the padding small.
The browser still shows the old icon.
Browsers keep favicons in their cache for a long time. Reload with the cache cleared, or add a version to the link, for example /favicon.ico?v=2.