Ctrl K

How to make a favicon

A favicon is the small icon in the browser tab, the bookmarks and the search results. You need three files for a modern site: an ICO with 16, 32 and 48 pixels, an SVG icon, and a 180 pixel PNG for the iPhone. All the converters on this page work in your browser, so nothing is uploaded.

The files you need

File Size Used by
favicon.ico 16, 32 and 48 px in one file every browser as a fallback, bookmarks, crawlers, Windows
icon.svg any, drawn as a square current Chrome, Edge and Firefox, sharp on every screen
apple-touch-icon.png 180 × 180 px iPhone and iPad home screen
icon-192.png, icon-512.png 192 × 192 and 512 × 512 px Android and installed web apps, through the web manifest

You do not need the dozens of sizes that older guides and generators list. Browsers pick the closest size they find and scale it.

The HTML

Put the files in the root of your site and add this to the <head> of every page:

<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.webmanifest">

The sizes="32x32" on the ICO matters: it stops Chrome from preferring the ICO over your SVG. The manifest only needs a list of the 192 and 512 pixel PNGs under icons.

Step by step

  1. Start from one square image, ideally a vector (SVG) or a PNG of 512 × 512 pixels with some padding. A simple shape or a single letter works best, because at 16 pixels there is room for about 256 dots.
  2. Make the ICO. From an SVG use SVG to ICO. From a PNG with a transparent background use PNG to ICO. From a JPG use JPG to ICO, keeping in mind that a JPG has a solid background.
  3. Make the PNG for the iPhone. SVG to PNG gives you a PNG from a vector, and shrink image scales a 512 pixel PNG down to 35%, which is about 180 pixels. Use a solid background colour: iOS fills transparent areas with black.
  4. Upload the files to the root of your site and add the HTML above.

Is your image not square, or full of empty space? Crop image with the 1:1 ratio fixes that first. Does it have a background you do not want? The background remover makes it transparent.

Mistakes that make a favicon look bad

  • Too much detail. Text and thin lines disappear at 16 pixels.
  • A transparent logo that is only dark. On a dark browser theme it vanishes. Test on both a light and a dark tab, or give the icon a solid shape behind the logo.
  • Only one size. A single 16 pixel image looks soft on high-density screens. Put at least 16, 32 and 48 in the ICO.
  • No ICO at all. Crawlers and older software still request /favicon.ico and get a 404.
  • Wrong cache. A changed icon can take a while to appear. Rename the file or add a version, like /favicon.ico?v=2, to force an update.

Frequently asked questions

Do I still need a favicon.ico file?

Yes. Browsers that understand SVG do not need it, but crawlers, bookmarks, feed readers and older browsers request /favicon.ico on their own. A missing file also fills your server log with 404 errors.

What is the smallest set of files?

Three: favicon.ico (16, 32 and 48 pixels in one file), icon.svg for modern browsers and apple-touch-icon.png at 180 × 180 pixels. If your site can be installed as an app, add 192 and 512 pixel PNGs in the web manifest.

Can I use a photo as a favicon?

You can, but at 16 pixels a photo becomes a smudge. Crop to the face or the main object, choose a square, and check the result at actual size before you publish.

Why does my new favicon not show up?

Browsers cache favicons for a long time. Hard-refresh the page, clear the site data, or open the site in a private window. Search engines update their copy of the icon on their own schedule, which can take days or weeks.