Skip to content
Benchmo
Language: English

Favicon generator

One image in, every favicon file a website needs out, with the four lines of HTML to paste.

Processed on your device. Files are not uploaded.

Check the preview before downloading: it shows your icon at its real 16 and 32 pixel sizes, on a light and on a dark tab bar. That is where logos fail. Thin lines disappear at 16 pixels, and a dark logo on a transparent background vanishes in a dark browser theme. If yours does, simplify it or give it a solid background before going further.

Our own SVG logo produced this ZIP, which “Download favicon ZIP” saves in one go:

File Pixels Size
favicon.ico 16, 32 and 48 in one file 2.7 KB
favicon-32x32.png 32 × 32 840 bytes
apple-touch-icon.png 180 × 180, on white 5.2 KB
icon-192.png 192 × 192 6.5 KB
icon-512.png 512 × 512 10.1 KB
site.webmanifest text 312 bytes
favicon-html.txt text 233 bytes

The HTML to paste

These four lines go inside <head>. The page shows them with a Copy button, and the same text is in favicon-html.txt:

<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" href="/favicon-32x32.png" type="image/png" sizes="32x32">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

If your site already has favicon tags, replace them rather than adding a second set.

SVG or PNG to start from?

SVG if you have it. The browser draws it fresh at 512 pixels and every size is made from that, so even the 512 px icon is sharp. A PNG works too, but size matters: from a 256 px logo, the tool warns that the larger icons are scaled up and may look soft. 512 px or more avoids that.

The ICO file stores its three sizes as PNG data, which every current browser reads, and Windows since Vista.

Questions and answers

What size should a favicon be?

Browser tabs show 16 or 32 pixels, which is why favicon.ico holds 16, 32 and 48 px versions. Phones want bigger icons: 180 px for an iPhone home screen, 192 and 512 px for Android. Start from an SVG or an image of at least 512 × 512 and the tool makes every size from it.

Why does the Apple icon have a white background?

iOS shows transparent parts of a home-screen icon as black. The tool puts apple-touch-icon.png on white so a transparent logo does not end up on a black square. The other files keep their transparency.

Where do the files go?

In the root folder of your site, so that yoursite.com/favicon.ico opens in a browser. The HTML points to /favicon.ico and the other files at the root, so that is where they must be. Then paste the tags into the head of every page, or once into your site template.

My image is not square. What happens?

The tool takes the largest square from the center and tells you so under the preview. If the important part of your logo is off-center, crop it to a square yourself first.

What is the site name field for?

Only for site.webmanifest, the file Android reads when someone adds your site to the home screen or installs it as an app; it can show that name with the icon. Leave it empty and the icons still work.