UsefulTab

How to make a favicon

The little icon in a browser tab is a favicon, and getting it right means producing several sizes, not just one. This guide shows which sizes you need, how to generate them from a single image, and the HTML to drop in.

The fastest way

Upload a square image to the Favicon Generator and it produces the icon set browsers expect. Read on for how to prepare the source and wire it up.

Start with a square, high-contrast image

Begin from a square image of at least 512×512 so it stays sharp when scaled down. Keep the artwork simple and high-contrast — fine detail vanishes at 16×16. If your source isn't square or is too small, resize and crop it first with Resize Image.

The sizes you actually need

Adding it to your page

Place the generated files at your site root and reference them in the <head>: 

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" href="/favicon-32x32.png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

A note on privacy

The Favicon Generator builds every size in your browser, so your source image is never uploaded to a server.

Open the Favicon Generator →

Common questions

What is a favicon?

A favicon is the small icon a browser shows in the tab, bookmarks, and history for your site. Modern sites also provide larger versions used for mobile home-screen icons and when the page is shared.

What sizes does a favicon need?

At minimum a 32×32 and 16×16 for browser tabs. For full coverage you also want a 180×180 apple-touch-icon for iOS home screens and a 192×192 / 512×512 for Android and PWAs. A good generator produces all of these from one source image.

What image should I start from?

Start from a square image at least 512×512 so it stays crisp when scaled down. Simple, high-contrast artwork reads best at tiny sizes — fine detail disappears at 16×16.

Is my image uploaded when I make a favicon?

No. The favicon set is generated from your image entirely in your browser, so your artwork never leaves your device.