Which favicon sizes you need
One icon is shown in many places, and each asks for its own size. These six cover every current browser and phone:
- 16 × 16 and 32 × 32: browser tabs, bookmarks and history.
- 48 × 48: Google search results and Windows shortcuts.
- 180 × 180: the apple-touch-icon for iPhone and iPad home screens.
- 192 × 192 and 512 × 512: Android home screens and installed web apps, listed in the web manifest.
Designing an icon that works at 16 pixels
A favicon is tiny, so keep it simple. One bold letter or a single emoji on a solid color reads best. Thin strokes, small text and detailed logos turn to mush at 16 pixels. If your logo has a symbol, use just the symbol.
Pick a heavy weight, strong contrast and a little space around the edges. Check the tab preview: if you can't tell what it is there, nobody else can either.
favicon.ico or PNG?
The .ico file this tool makes holds the 16, 32 and 48 px icons as PNGs inside one file. Every current browser reads it, and some tools and older crawlers still look for /favicon.ico first, so it's worth adding.
The PNG links on their own also work in all modern browsers. Use both and browsers pick the best match.
How to add your favicon
Upload the files to the root folder of your site, so they live at addresses like yoursite.com/favicon.ico. Paste the HTML tags into the head of every page, then save the site.webmanifest file alongside them.
On site builders like Shopify, Squarespace or Wix, look for a Favicon or Site icon setting and upload the 512 px PNG. Browsers cache favicons hard, so open your site in a private window to see the change.
What the web manifest does
The site.webmanifest file tells Android and Chrome which icons to use when someone adds your site to their home screen, plus the name under the icon and the color of the browser bar. The tool fills it in with your site name and background color. If your site name is long, shorten short_name to about 12 characters so it isn't cut off under the icon.
Frequently asked questions
What size should a favicon be?
Make it at several sizes: 16, 32 and 48 px for browsers, 180 px for Apple devices, and 192 and 512 px for Android and installed web apps.
Can I use an emoji as a favicon?
Yes. Type it in the letters field and download the files. Emoji look different on each device, and the icon is drawn with yours, so what you see is what you get.
Why isn't my new favicon showing?
Browsers cache favicons for a long time. Check the files are at your site's root, then try a private window or clear the cache.
Do I still need a favicon.ico file?
Not strictly, since PNG favicons work in modern browsers, but adding one helps older tools and crawlers that request /favicon.ico directly.
Why is the Apple icon square?
iOS adds its own rounded corners and fills transparent areas with black, so the 180 px icon is always a full square with your background color.