Private · No upload

Make a favicon from a logo

Upload a square logo once. Download the PNG sizes browsers still use, plus the HTML tags to paste into your site head.

Drop images here or choose files

One square PNG or SVG-exported PNG works best.

Favicon PNG sizes and HTML tags

A laptop on a desk - the tab icon has to read at 16 pixels, not at poster size

Use this page to generate favicon PNG files from a square logo: 16, 32, 48, 180, 192, and 512, plus HTML link tags. Tabs are cruel. A detailed crest becomes mud. Start from a symbol that still reads as a silhouette.

16 and 32 are the tab. 180 is Apple touch. 192 and 512 show up in Android and PWA manifests. 48 is a courtesy for older shortcuts. The HTML snippet is a starting point; point the hrefs at wherever you actually host the files. Pair with a theme-color meta that matches light and dark, which this site already does in the head.

If the source is not square, we cover-crop from the center. Crop it yourself on crop image if the mark is off-center. Round-rect masking belongs to the OS; do not pre-round unless you want a circle inside a circle.

Favicon HTML, apple-touch-icon, and web manifest

HTML - favicon and theme-color in the head
<link rel="icon" href="/favicon-32.png" sizes="32x32" type="image/png">
<link rel="icon" href="/favicon-16.png" sizes="16x16" type="image/png">
<link rel="apple-touch-icon" href="/apple-touch-180.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#fafafa" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#14110e" media="(prefers-color-scheme: dark)">
JSON - manifest icons from the same pack
{
  "name": "Example",
  "icons": [
    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

Frequently asked questions

Do I still need a .ico favicon file?

Modern browsers are happy with PNG. A 32x32 and a 192x192 cover most tabs and Android. Apple wants 180x180. ICO is legacy; skip it unless a stubborn old environment demands it.

Why is my favicon blurry at 16 pixels?

Because it was drawn at poster size. Use a mark with fewer strokes, more contrast, and less thin type. This generator scales; it does not redesign.

Should I round favicon corners?

No. Operating systems mask favicons. A circle inside a circle looks like a mistake. Keep the square PNG.

Where do I put favicon PNG files?

On your origin, often /favicon-32.png and friends, or in a /icons folder. The HTML snippet must match those paths.

Do I need a web app manifest for favicons?

For a PWA, yes: 192 and 512 go in the manifest icons list. For a marketing site, the link tags in the head are enough.

Can I use an SVG favicon instead of PNG?

Some browsers accept image/svg+xml in rel=icon. Keep PNG fallbacks for Apple touch and older Android. This tool exports the PNG pack.