How to create a favicon from one image

Why a site needs more than one icon

A favicon is the small mark in the browser tab. Phones, Windows and macOS ask for larger copies of the same mark: an Apple touch icon, Android Chrome icons, and a favicon.ico. Making each size by hand is slow, and a missing size means a blurry tab icon or a blank home-screen icon.

The Favicon Generator builds that set from one image in the browser. Nothing is uploaded. You get a ZIP, a manifest.json for a PWA, a test page, and the <link> tags to paste into <head>.

Step by step

1. Open the Favicon Generator. Use a square image, PNG if you have one. A wide logo is stretched into a square, so crop it first. 512 pixels on each side is enough; 1024 is better, because the macOS icon in the archive is 1024×1024.
2. Drop the file on the upload area, or click Select File. The preview appears above the file name, and the Icon Path field sits underneath. The default path is /img. Change it if your icons will live somewhere else, for example /assets/icons.

   

3. Click Generate Icons. The browser downloads favicons.zip. On the page, a green note confirms the download, and a block titled HTML Tags to Insert lists the <link> tags that point at your path.

   

4. Unzip the archive into the folder you named. It contains PNG icons for the web, iOS, Android and macOS, a favicon.ico, manifest.json, test.html and html-tags.txt.
5. Copy the tags into the <head> of your pages. Open test.html from the same folder to check that the files resolve.

Tips

• Match the path. If the field says /img, the tags request /img/favicon-32x32.png. The files have to be in that folder on the site, or the tab stays empty.
• Start from a square. The tool draws the whole picture into every square size. A landscape logo will look squashed.
• Keep the source large. Small sizes are reduced from your file. A tiny upload cannot become a sharp 512×512 icon.
• Ship the manifest with the icons. manifest.json points at android-chrome-192x192.png and android-chrome-512x512.png on the same path.
• The work stays in the browser. The image is resized locally, then the ZIP is downloaded. There is no account and no upload step.

FAQ

Is my logo uploaded?

No. The generator runs in your browser. The image never leaves the computer.

Which sizes are in the ZIP?

Web PNGs from 16×16 up to 512×512, Apple touch icons from 60×60 to 180×180, Android Chrome icons at 192×192 and 512×512, macOS PNGs up to 1024×1024, and favicon.ico.

Where do the HTML tags go?

In the <head> of each page. The Copy button puts the whole block on the clipboard. The same text is saved as html-tags.txt inside the ZIP.

What if I change the folder later?

Type the new folder in Icon Path. If the tags are already on the page, they update to the new path. Click Generate Icons again so the downloaded html-tags.txt matches.

Related tools

• Favicon Generator: the tool in this guide.
• SVG to CSS Converter: embed an SVG icon in a stylesheet instead of a file.
• CSS Unit Converter: turn px sizes into rem.
• Web Tools: the rest of this category.

Try it now

Open the Favicon Generator, drop in a square logo and click Generate Icons.