How to Make a Favicon for Your Website
A favicon lives at a genuinely unforgiving size — most browsers render the tab icon at 16×16 pixels, which is smaller than most people's thumbnail. A logo that looks sharp and detailed at full size can turn into an illegible smudge at that scale, which is the single most common favicon mistake: uploading a detailed logo and expecting the tool to work a miracle on it.
Steps
- Open the Favicon Generator and upload your source image.
- The tool generates the standard set of favicon sizes automatically.
- Download the files and add the standard
<link rel="icon">tag to your site's HTML head, pointing at the generated file.
What actually reads well at 16px
Bold, simple shapes with high contrast between foreground and background survive the shrink. A single letter on a solid color block (which is exactly what this site's own favicon uses) is about as reliable as it gets. Thin lines, small text, gradients, and busy multi-color logos tend to lose their meaning entirely at tab size — if your logo falls into that category, consider simplifying it specifically for the favicon rather than trying to force the full design in. Plenty of brands run a simplified "icon mark" version of their logo for exactly this reason.
Testing it properly
Don't judge a favicon at the size you see it in an image editor. Open the actual generated file, shrink your image viewer's zoom down to roughly 16 pixels, or better, just add it to your site and look at the real browser tab — that's the only test that matches how visitors will actually see it.