Favicon checklist for a new website
Updated 26 September 2026
Tool for this guide: Favicon generator
A complete favicon setup is six small files and a few lines of HTML. Our favicon generator makes all of them from one logo or from letters.
The files you need
| File | Size | Used by |
|---|---|---|
| favicon.ico | 16, 32 and 48 px inside one file | Browsers, bookmarks, Windows, tools that request /favicon.ico |
| favicon-32x32.png | 32 × 32 | Browser tabs on high-resolution screens |
| favicon-16x16.png | 16 × 16 | Browser tabs on standard screens |
| apple-touch-icon.png | 180 × 180 | iPhone and iPad home screen |
| android-chrome-192x192.png | 192 × 192 | Android home screen |
| android-chrome-512x512.png | 512 × 512 | Android splash screens, installed web apps |
| site.webmanifest | Text file | Tells Android and browsers about the icons |
| favicon.svg (optional) | Vector | Modern browsers, sharp at any size |
The HTML
Put the files in the root folder of your website and add this inside <head> on every page:
<link rel="icon" href="/favicon.ico" sizes="48x48">
<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" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">The favicon generator gives you this code with your theme colour already filled in.
Design tips
- Simplify. At 16 pixels, detailed logos turn into blurs. A single letter or symbol works best.
- Use a background for letters. Text on a transparent background disappears on dark browser themes.
- Keep the Apple icon opaque. iOS fills transparent areas with black, so it's saved with a background.
Check it's working
- Open your site in a private window, since browsers cache favicons aggressively.
- Visit
yoursite.com/favicon.icodirectly. It should show your icon. - On a phone, add the site to your home screen to see the touch icon.
On WordPress, Shopify or Wix
These platforms have their own setting for the site icon (WordPress calls it Site Icon). Upload the 512 px PNG there instead of editing HTML.
Only need favicon.ico?
Convert an image to ICO to get a single .ico file with 16, 32 and 48 pixel sizes inside. See how to make an ICO file.
Try it now
Make a complete favicon set from your logo, or from letters or an emoji: favicon.ico, PNG sizes, Apple touch icon, Android icons, web manifest and the HTML to paste in.
Open favicon generator