What is a favicon, and where does it appear?
A favicon is the small icon a browser shows in a tab, in bookmarks and in its history, and the one a phone uses when someone adds your site to the home screen. Each place asks for its own size, from a 16-pixel tab icon to a 512-pixel app icon, and a missing one is replaced with a blurry scaled copy or a generic globe.
Which favicon sizes do you need?
These are the files the favicon generator writes, and what each one is for.
| File | Size | Used by |
|---|---|---|
| favicon.ico | 16, 32 and 48 pixels in one file | Browsers and tools that ask for /favicon.ico by path |
| favicon-16.png, favicon-32.png, favicon-48.png | 16, 32 and 48 pixels | Browser tabs, bookmarks and history |
| apple-touch-icon.png | 180 pixels | iPhone and iPad home screens |
| icon-192.png, icon-512.png | 192 and 512 pixels | Android home screens and installed web apps, through the manifest |
| icon-maskable-512.png | 512 pixels, with the artwork inside the middle 80 percent | Launchers that crop icons to a circle or another shape |
| site.webmanifest | Text | The app name, theme color and icons of an installed web app |
| snippet.html | Text | The tags to paste into the head of every page |
Browsers pick the closest size they are offered, so one set covers standard and high-density screens without you deciding for each.
How do you make one?
- Drop one square image, at least 512 pixels on each side, into the favicon generator. A smaller one still works, but the large icons are then enlarged from it and look soft, and the tool warns you. Favicon generator
- Pick a background color. The Apple and maskable icons cannot be transparent, so this fills them; turn on rounded corners if you want the tab and web icons rounded over it too.
- Type the app name, which goes into site.webmanifest, and the theme color, which goes into both site.webmanifest and the snippet.
- Check the contact sheet, which shows every icon at its actual pixel size, then download the ZIP.
- Copy the files into the root folder of your website, and paste the snippet into the head of every page.
How do you design an icon that reads at 16 pixels?
Design for the smallest size first. A 16-pixel icon has 256 pixels in total, so a detailed logo becomes a smudge. A single letter, a simple shape or a bold mark reads far better than a wordmark, and strong contrast against both light and dark browser tabs matters more than exact color.
If your artwork is not square, the favicon generator centers it inside a square rather than stretching it. The space around it stays transparent in the tab and web icons, and takes the background color in the Apple and maskable icons, or in every icon when rounded corners are on. Cropping it square yourself with Crop image usually gives a better icon, and Remove white background can clear the white box around a logo so the tab icon is transparent.
Worth knowingBrowsers cache favicons hard. After replacing one, a new private window is often the quickest way to see the new icon.
Do you still need favicon.ico?
It is still worth including. Some browsers and tools request /favicon.ico from the root of a site without reading any HTML, and the one in the pack holds its 16, 32 and 48 pixel versions in a single file. If you need an .ico with larger sizes, for a desktop shortcut or an app, the PNG to ICO converter writes one with seven sizes up to 256 pixels.