A site without a favicon shows a generic globe in the browser tab and looks unfinished next to every other bookmark. The good news is that you only need one square image. The Favicon Generator turns it into the set of files browsers, phones and bookmark bars ask for, and your image stays on your device while it does.
Favicon Generator FREE online toolRuns in your browser. No sign-up, nothing to install. Open the tool →Start with the right source image
A full logo with a wordmark rarely survives at 16 × 16 pixels. Pick the simplest part of your brand: an initial, a symbol or a bold shape. Use a square canvas, ideally 512 × 512 pixels or larger, with the artwork centered and some padding around it.
High contrast matters because tabs can be light or dark. A thin dark line on a transparent background disappears in dark mode, so test a version with a solid background color or a light outline.
Which files you actually need
- favicon.ico containing 16, 32 and 48 pixel versions, used by browsers and bookmark lists.
- A PNG or SVG icon for modern browsers, where an SVG scales cleanly.
- apple-touch-icon.png at 180 × 180 pixels, used when someone adds your site to an iPhone or iPad home screen.
- 192 × 192 and 512 × 512 PNG icons referenced from a web app manifest for Android and installable sites.
Generate and install in five steps
- Upload your square logo to the generator and check the previews at small sizes.
- Adjust padding or background color if the shape looks cramped.
- Download the generated files and place them in the root folder of your website.
- Paste the provided link tags into the head of every page, or into your shared layout or template.
- Open your site in a private window and hard refresh to confirm the new icon appears.
What the tags look like
A typical head section contains a rel="icon" link for the ICO or PNG, a rel="apple-touch-icon" link pointing to the 180 pixel file, and a rel="manifest" link if you provide an app manifest. Use absolute paths starting with a slash, for example /favicon.ico, so the icons work from every page depth. Browsers also request /favicon.ico automatically, so keeping that file in the root is a useful fallback.
Why you do not see the change
Favicons are cached aggressively. If you replaced an old icon and still see the previous one, clear the site data, test in a private window, or add a version query such as /favicon.ico?v=2 to the link tag. Search engines also refresh their copy on their own schedule, so it may take days before it updates elsewhere.
Check the file location as well. A favicon returning a 404 error is the most common reason for a blank tab icon, and typos in the path are easy to miss.
Small details that make it look professional
Keep the icon consistent with your logo colors. Avoid text smaller than a single large letter. Compare it next to other tabs, because what looks distinctive at 512 pixels can look like a smudge at 16. If your brand uses a gradient, flatten it to one or two colors for the smallest sizes. Test the icon on a dark browser theme and on a bookmark bar before you publish.
Comments (0)
No comments yet. Be the first to share a thought.