How to Create a Favicon for Your Website
· 6 min read
A favicon is the tiny icon that appears in browser tabs, bookmarks, history lists, and on phone home screens. It is small, but it does a lot of work: it makes your site instantly recognizable among a dozen open tabs and gives your brand a professional, finished feel. Here is how to make one properly.
What Sizes You Need
The original favicon was a single 16 by 16 pixel image, but modern devices display your icon at many sizes, so you want several.
- 16 by 16 and 32 by 32 for browser tabs and bookmarks.
- 48 by 48 for some desktop shortcuts.
- 180 by 180 for the Apple touch icon used when someone saves your site to an iPhone or iPad home screen.
- 192 by 192 and 512 by 512 for Android and Progressive Web App home screen icons.
Rather than crafting each size by hand, start from one high-resolution square image, ideally 512 by 512 or larger, and generate the full set at once. The Favicon Generator takes a single image and produces every size you need, so you never have to resize each one manually.
Formats: ICO and PNG
Two formats cover everything.
ICO is the classic favicon format. It can pack multiple sizes into one file and is understood by every browser, including very old ones. This is your safe baseline.
PNG is used for the larger modern icons, especially the Apple touch icon and the Android and PWA icons. PNG supports transparency and crisp edges, which is exactly what you want for a logo.
In practice you ship an ICO file for legacy support plus several PNG files for modern devices. A good generator outputs all of these together.
If your logo is a vector SVG, convert it to a high-resolution PNG first so you have a clean raster source to work from. Use SVG to PNG to export it at 512 by 512, then feed that into the favicon generator for the sharpest possible result.
The HTML Link Tags
Once you have your files, you tell the browser about them inside the head section of your pages. A complete, modern setup includes a few link tags.
- A link with rel of icon pointing to your 32 by 32 PNG, with the type set to image/png.
- A link with rel of icon pointing to favicon.ico for legacy browsers.
- A link with rel of apple-touch-icon pointing to your 180 by 180 PNG.
- A web app manifest file referenced with rel of manifest, which lists your 192 and 512 PNGs for Android and PWA installs.
Many browsers will also automatically find a file named favicon.ico in your site root even without a tag, so placing one there is a reliable fallback. Adding the explicit tags gives you control over sizes and ensures the right icon shows on every device.
Modern vs Legacy Support
You do not have to choose between old and new. The layered approach above covers both: the ICO file handles ancient browsers, the standard PNG icon handles current desktop browsers, the Apple touch icon handles iOS, and the manifest icons handle Android and installable web apps. Ship them all and your icon looks right everywhere from a decade-old browser to the newest phone.
Design Tips for a Tiny Canvas
A favicon is displayed extremely small, so designs that look great on a business card often turn to mush at 16 pixels.
- Keep it simple. One bold shape, letter, or symbol reads far better than a detailed full logo. Strip away fine details.
- Use strong contrast. The icon sits on light and dark tab bars alike, so make sure it stands out on both.
- Fill the space. A symbol that uses most of the square reads better than a small mark floating in empty padding.
- Test at actual size. Shrink your design to 16 by 16 and look at it. If you cannot tell what it is, simplify further.
- Stay on brand. Use your brand colors so the favicon ties into the rest of your identity.
Start from a clean, square, high-resolution source image, generate the full set of sizes and formats, drop in the link tags, and your site gains a small but unmistakable mark of polish.