How to set up a website favicon the right way
Right after launching a new site, you will often see a gray globe or a blank page icon in the browser tab. That means the site has no favicon. It is a tiny icon, but for people with many tabs open it is how they find your site, and Google shows it next to your site name in search results, so it shapes first impressions.
1. Which files do you need?
A single favicon.ico used to be enough. Today each device looks for a different file. These five cover almost every case.
| File | Size | Used by |
|---|---|---|
favicon.ico | 16, 32, 48px bundle | Older browsers and services that look for it by default |
favicon-32x32.png | 32px | Modern browser tabs, high-resolution screens |
apple-touch-icon.png | 180px | Adding the site to an iPhone or iPad home screen |
android-chrome-192x192.png, 512x512 | 192, 512px | Android home screens and installable web apps |
site.webmanifest | - | Settings file that tells Android where the icons are and what the app is called |
An ICO file can hold several image sizes in one file. Simply renaming a PNG to .ico breaks in some environments, so use a properly encoded ICO.
2. Where do the files go?
The safest place for all of them is the root folder of your site, right under the domain, so that https://yourdomain/favicon.ico opens directly. Some services and browsers check that address first without reading your HTML. Then add links like these inside the <head> of every page.
<link rel="icon" href="/favicon.ico" sizes="any"><link rel="apple-touch-icon" href="/apple-touch-icon.png"><link rel="manifest" href="/site.webmanifest">
If you use WordPress or a hosted blog platform with an icon upload option in the admin panel, that menu does this for you.
3. Design for tiny sizes
- Keep it simple: 16px is really small. A single symbol from your logo or its first letter reads better than the full logo.
- Cut the padding: Lots of empty space around the icon makes it look like a dot in the tab. Fill most of the square.
- Check dark mode: A black icon on a transparent background disappears in dark tabs. Placing it on a colored square or circle keeps it visible in any theme.
- Fill the background for iPhone: Transparent areas in home screen icons can show up black, so add a background color.
4. Changed it, but nothing happened?
Browsers remember favicons for a very long time. If you still see the old icon after replacing the files, do a hard refresh (Ctrl+Shift+R) or check in a private window. If it still sticks, add a version to the link, such as ?v=2, to force a fresh download. The icon in Google search results updates only after Google crawls your site again, which can take days or weeks.
If you are also releasing an app, the app stores need their own icon sizes. The app icon generator below creates them all at once.