How to make a favicon for your website

A favicon is the small icon a browser shows next to your page title in the tab, in bookmarks, and in browser history. It is tiny — often just 16 pixels wide — but it is the first thing people recognize when they have many tabs open.

Which sizes do you need?

There is no single size that covers everything, but a small set covers nearly all cases:

• 16 x 16 px — the classic browser tab icon.
• 32 x 32 px — used by most modern browsers and bookmark lists.
• 48 x 48 px — used by Windows shortcuts and some browsers.
• 180 x 180 px — the Apple touch icon, shown when someone saves your site to a phone home screen.
• .ico file — the traditional Windows icon format, which bundles several sizes (16, 32, 48 and 256 px) into one file.

If you only make one thing, make a 32 x 32 PNG and a .ico file. That pair works almost everywhere.

Step 1: Start from a simple image

A favicon is too small for detail. A simple logo mark, a single letter, or one bold shape works far better than a full logo with small text. If your logo has fine text, use just its symbol or its first letter. Test at 16 px early — if you cannot recognize it at that size, simplify it.

Step 2: Generate the sizes

Open the Favicon Generator, choose your image, and generate 16, 32, 48 and 180 px PNGs. The tool crops from the center, so a square logo gives the cleanest result. For the classic Windows format, use the Image to ICO Converter to build one .ico file that holds all four sizes.

Step 3: Add it to your website

Put the files in your site's main folder and add these lines inside the <head> of your pages:

<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

That is all most sites need. You do not need a separate file for every page — one set in the head of your template covers the whole site.

Common mistakes

• Using a detailed photo as a favicon — at 16 px it becomes an unrecognizable blur.
• Uploading only a large logo and hoping the browser shrinks it well — browsers do shrink it, but the result is often muddy. Generate the small sizes yourself.
• Forgetting to refresh after changing a favicon — browsers cache favicons aggressively, so a new icon may not show until you hard-refresh or open a fresh tab.
• Using JPG for a favicon — JPG has no transparency, so a logo on a dark tab gets a white box. Use PNG or .ico instead. See the transparent PNG guide for why.

Quick checklist

• Simple, bold design that reads at 16 px.
• 32 x 32 PNG plus a .ico file, and a 180 x 180 touch icon.
• One icon link and one touch-icon link in your page head.
• Test in a fresh tab, and on a phone home screen, before you call it done.

Your images never leave your device on ImageTool.us: every tool runs entirely in your browser. No upload, no signup, no watermark.