Start with a simple square image
Use a simple logo mark, not a detailed picture, because it will be shown very small. A tab icon is only 16 pixels across on many screens, so thin lines and small text disappear. A square image of at least 512 by 512 pixels gives the best results, because it can be scaled down cleanly to every other size.
If your logo is not square, crop it to the part that works best alone, such as a single letter or symbol. It is usually better to show a small piece clearly than the whole logo poorly. A transparent background is fine for most cases, but a solid colour can help on tabs that are dark.
Which files you need
- favicon.ico with 16, 32 and 48 pixel versions for older browsers
- PNG icons at 32 and 16 pixels
- apple-touch-icon.png at 180 by 180 for iPhones and iPads
- 192 and 512 pixel PNG icons for Android and web app manifests
A web manifest is a small JSON file that lists your larger icons so that phones can use them when a site is saved to the home screen.
You may see other sizes recommended in some guides. The set above covers the common cases for browser tabs, bookmarks, iOS home screens and Android installs, and it is usually enough for a normal website.
Add the HTML
Place the files in your site root and add link tags in the head of your pages that point to them. A generator can give you the exact tags to paste. Add the manifest with one more link tag. If you move the files to a folder, update the paths in the tags to match.
A typical set of tags names the ico file, the two small PNGs, the apple-touch-icon and the manifest. Paste them once into the shared header of your site rather than into each page by hand, so every page stays consistent.
Design tips
Leave some padding so round masks do not cut the edges, because some phones crop icons into circles or rounded squares. Use strong contrast and a simple shape. Check the icon on both light and dark browser themes, since a dark logo on a transparent background can vanish on a dark tab bar.
Test a draft by viewing it at 16 pixels on your own screen. If you cannot tell what it is at that size, simplify the shape, remove fine detail and thicken the lines.
A worked example (illustrative)
Suppose your site is a small bakery and the logo is a wheat ear with the shop name underneath. At 16 pixels the name is unreadable. Crop to just the wheat ear, place it on a solid warm background with some margin, and export a 512 by 512 square. From that one source you can produce every size in the list above.
If the first attempt looks muddy at 16 pixels, try a bolder outline or fewer colours and export again. Two or three rounds are normal.
Step-by-step workflow
- Pick or draw a simple mark and crop it to a square
- Add padding and, if needed, a solid background
- Generate the full set of icon sizes from the large source
- Upload the files to your site root
- Paste the link tags into the head of your pages
- Reload and test in a browser tab, and clear the cache if the old icon stays
Common mistakes
- Using a wide logo with text, which becomes a tiny blur
- Starting from a small image and enlarging it
- Forgetting padding, so edges are cut off on phones
- Leaving old link tags in place that point to missing files
- Expecting the change to show instantly, when browsers often cache favicons for a while
Quick checklist
- Square source of 512 pixels or more
- favicon.ico plus 16 and 32 pixel PNGs
- 180 pixel apple-touch-icon
- 192 and 512 pixel icons and a manifest
- Link tags added to every page template
Doing it with DoneImg in your browser
Open the favicon generator and add your square image. It creates favicon.ico with the 16, 32 and 48 pixel sizes, the 16 and 32 pixel PNGs, the 180 pixel apple-touch-icon, the 192 and 512 pixel PNGs, a web manifest and an HTML snippet, all together in one ZIP file.
Everything is made in your browser, so your logo is not uploaded anywhere. Unzip the files into your site root, paste the snippet into your page head, and test the result in a tab.