How to Create a Favicon for Your Website
The tiny icon in your browser tab isn't automatic - here's how to actually create one from your logo or image.
A favicon is the small icon shown in a browser tab, bookmarks list, and some search results - a detail easy to forget about until you notice your own site is showing a generic blank page icon while every other tab has a clear little logo.
Creating a favicon
- Start with a square version of your logo or icon, ideally at a reasonably high resolution.
- Upload it to a favicon generator.
- The tool produces the icon at the sizes browsers actually need.
- Download the result and add it to your website according to your site platform's instructions.
Why simpler often works better
A favicon is displayed extremely small - often under 32 pixels wide in a browser tab. A logo with fine detail, thin text, or a complex illustration tends to turn into an indistinct blur at that size. If your full logo doesn't hold up well when shrunk down, consider using just its most recognizable element - an icon, a single letter, a simplified mark - rather than the entire logo.
If it's not showing up after you add it
Browsers cache favicons aggressively, sometimes for a surprisingly long time. If you've added a new favicon and it's not appearing, try a hard refresh or open the site in a private/incognito browsing window before assuming something's wrong with the file itself - in most cases, the favicon is working correctly and the browser is just still showing a cached version of the old one.
Frequently asked questions
What image size should I start with for a favicon?
Starting with a larger, square image - ideally at least 512×512 pixels - gives the generator enough detail to produce sharp results at all the smaller sizes browsers actually use.
Why isn't my favicon showing up after I added it?
This is almost always a caching issue - browsers cache favicons aggressively, so a hard refresh, or testing in a private/incognito window, often reveals the new icon that's actually already working correctly.
Does my favicon need to be a simplified version of my logo?
Usually yes - a detailed logo with fine text or intricate details tends to become an unrecognizable blur at favicon size, so a simplified mark or just the most recognizable element of the logo often works better.