How to make a favicon
- Drop a square image of your logo into the box: an SVG or a PNG of at least 512 × 512 px gives the sharpest results.
- Type your site’s name and pick a background colour for the Apple icon, which can’t be transparent. The preview shows the icon in a browser tab, light and dark, and on a phone home screen.
- Download favicon.zip, upload the files to the root of your website, and paste the HTML shown into the head of your pages.
What each file is for
| File | Used by |
|---|---|
| favicon.ico | Every browser, and anything that looks for /favicon.ico automatically |
| favicon-16x16.png, favicon-32x32.png | Browser tabs, bookmarks and history |
| favicon.svg (from an SVG) | Modern browsers, sharp at any size |
| apple-touch-icon.png | iPhone and iPad home screens |
| android-chrome-192x192.png and 512x512 | Android home screens and installed web apps |
| site.webmanifest | Tells Android and installable web apps the name, icons and colours |
Designing a good favicon
A favicon is shown as small as 16 × 16 pixels, so keep it simple: one bold shape or a single letter, high contrast, and no fine lines or small text. Use the same mark as your logo if it’s simple enough, or a cut-down version of it if not. Check it in a browser tab next to other sites before you settle on it.