What is a favicon?
A favicon is the small icon of a website shown in browser tabs, bookmarks and search results, and on a phone’s home screen when someone saves your site. Without one, browsers show a blank page icon, which makes a site look unfinished.
What is in the ZIP
- favicon.ico with 16, 32 and 48 px icons inside, for browser tabs and older browsers.
- favicon-16x16.png and favicon-32x32.png for modern browsers.
- apple-touch-icon.png (180 × 180) for iPhones and iPads.
- android-chrome-192x192.png and 512x512.png with site.webmanifest for Android and installable web apps.
How to add a favicon to your site
- Make the icon from your logo, or from a letter or emoji with your brand colour.
- Download favicon.zip and upload the files to the root folder of your website.
- Paste the HTML inside the <head> of your pages. On WordPress, use Appearance → Customize → Site Identity → Site Icon instead.
Tips
- Simple shapes read best at 16 pixels: use the symbol from your logo, not the full name.
- Check the small previews — if you cannot recognise the 16 px one, simplify it or add padding.
- Browsers cache favicons for a long time; open your site in a private window to see the new one.
Frequently asked questions
What size should a favicon be?
Provide several: 16 and 32 px for tabs, 180 px for Apple devices and 192 and 512 px for Android. This generator makes them all from one image.
Can I use a PNG instead of favicon.ico?
Modern browsers accept PNG favicons, but favicon.ico at the root of your site is still what many tools and older browsers look for, so include both.
Why is my new favicon not showing?
Browsers keep the old icon in their cache. Clear the cache or check in a private window, and make sure the files are at the root of your domain.