How to make a favicon
- 1Drop a square logo or icon into the box above, or click Choose an image.
- 2Choose a shape and background. Previews show how it looks in a browser tab.
- 3Download the favicon pack and paste the HTML into your site's head section.
What's in the favicon pack
| File | Used by |
|---|---|
| favicon.ico (16, 32 and 48 px) | Browser tabs, bookmarks, Windows |
| favicon-16x16.png, favicon-32x32.png | Modern browser tabs |
| apple-touch-icon.png (180 px) | iPhone and iPad home screens |
| android-chrome-192x192.png, 512x512.png | Android home screens and install prompts |
| site.webmanifest | Tells Android which icons to use |
How to install it
- Unzip the pack and upload every file to the top folder of your website, next to your home page.
- Paste the HTML snippet into the
<head>of your pages. - Open
site.webmanifestand add your site's name between the quotes.
Browsers cache favicons heavily, so it can take a while for a new icon to show up. A hard refresh or a private window usually shows it straight away.
Designing a good favicon
At 16 pixels, detail disappears. Use your logo's symbol rather than the full wordmark, bold shapes and strong contrast. Check the 16 × 16 preview: if you can't tell what it is, simplify it.