How to Create a Favicon (Sizes, Formats & HTML)
A favicon is the small icon in browser tabs. Learn which sizes you need, how to make one from text or an emoji, and the HTML link tags to add.
A favicon is the small icon shown in browser tabs, bookmarks and history. The quickest way to make one is to generate it from a letter or emoji, export a few sizes, and add a couple of link tags to your HTML.
Which sizes you need
- 16×16 and 32×32 — browser tabs and bookmarks
- 180×180 — Apple touch icon for iOS home screens
- 512×512 — PWA manifest and Android
Make one in three steps
- Open the favicon generator and type one or two letters, or paste an emoji.
- Pick a background colour, text colour and shape (square or circle).
- Download each size as a PNG.
Everything is drawn in your browser, so nothing is uploaded.
Add it to your site
Place the PNGs at your site root and add these tags inside <head>:
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"><link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"><link rel="apple-touch-icon" sizes="180x180" href="/favicon-180x180.png">
Design tips
At 16px, detail disappears — keep it to one or two bold characters or a single emoji on a high-contrast background. Test how it looks pinned in a real tab before shipping. Related: Image to Base64.