How to use it
- Open a square logo or symbol, ideally 512 × 512 or an SVG.
- Add padding if the design touches the edges, and a background colour if you want solid icons.
- Download the zip, copy the files to your site’s root folder, and paste the HTML into your page head.
What is in the pack
| File | Used by |
|---|---|
favicon.ico (16, 32, 48) | Browser tabs, bookmarks, and anything that asks for /favicon.ico by default |
favicon-16x16.png, favicon-32x32.png | Browser tabs on standard and high-density screens |
apple-touch-icon.png (180) | iPhone and iPad home screens |
android-chrome-192x192.png, 512x512 | Android home screens and installed web apps |
site.webmanifest | Tells Android and Chrome where the large icons are |
The Apple touch icon always gets a solid background, because iOS fills transparent areas with black. That is why the background colour setting matters even if your other icons are transparent.
Design advice
At 16 pixels, fine detail vanishes and thin lines blur. Most well-known favicons are a single letter or a simple symbol in strong colours. If your logo is a detailed illustration or a long wordmark, use just the mark. A little padding (5 to 10 percent) stops the design feeling cramped in rounded app-icon masks. The reasoning behind each file is covered in our guide to favicons.
Questions people ask
Which favicon sizes do I really need?
A favicon.ico with 16, 32 and 48 px, a 180 px Apple touch icon, and 192 and 512 px icons for Android cover every mainstream device.
Where do I put the files?
In the root folder of your website, next to your home page, so that /favicon.ico resolves.
Why is my new favicon not showing?
Browsers cache favicons aggressively. Try a private window, or add ?v=2 to the icon links to force a refresh.
Can I use an SVG favicon?
Modern browsers support SVG favicons, but Safari and some older browsers still rely on the PNG and ICO files, so include both.