Favicon generator from image

How to use the favicon generator

1. Upload your logo or mark. A square source works best — anything else is fitted inside a square canvas rather than stretched, so it will not distort.
2. Decide what sits behind any transparency. Keeping it transparent is right for the browser tab icon; a solid colour often looks better as an iOS home screen icon, where transparent pixels render as black.
3. Add a few percent of padding if your logo runs edge to edge. iOS and Android round the corners of app icons, and a full-bleed square loses its corners to that mask.
4. Press Generate favicons. You get all five sizes previewed at their true pixel dimensions, which is the only honest way to judge whether your logo survives at 16 pixels.
5. Download the sizes, drop them in your site root or an images folder, and paste the generated HTML into your head tag.

What you can use it for

Launching any new site needs this. A missing favicon shows as a blank page icon in the browser tab and as a generic placeholder in bookmarks, and it is one of the small signals that make a site read as unfinished — particularly to an AdSense reviewer or a first-time visitor deciding whether to trust you.

Progressive web apps and Android home screen shortcuts need the 192 and 512 pixel versions specifically. Those are the sizes referenced by the web app manifest, and without them Android substitutes a screenshot of your page, which looks broken.

Apple devices use the 180 pixel apple-touch-icon when someone adds your site to their iPhone home screen. It is the largest of the set for a reason: it is displayed at physical icon size on a retina screen, where a scaled-up 32 pixel version looks obviously blurry.

Rebrands need all of them regenerated together. Favicons are cached aggressively by browsers, and a site left with half the old set and half the new one shows different logos in the tab, the bookmark bar and the home screen for weeks.

Things to know about favicons

A 16 pixel icon is 256 pixels in total. Detailed logos, wordmarks and thin strokes turn to mush at that size. Almost every recognisable brand uses a simplified mark — a single letter, a shape, a symbol — for the favicon rather than shrinking their full logo. Judge yours at actual size in the preview, not zoomed in.

Modern browsers prefer PNG favicons and have done for years, but a favicon.ico file in your site root is still worth having as a fallback. Browsers request that path automatically even with no HTML pointing at it, and some older ones will not read a PNG. This tool produces PNGs; convert the 32 pixel one to .ico with a dedicated converter if you want that fallback.

The HTML block matters as much as the files. Without the link tags, browsers only find the root favicon.ico and you lose the Apple and Android icons entirely. Paste the generated block into every page's head, or into your theme header template so it appears everywhere.

Favicon caching is unusually stubborn. After replacing one, browsers can serve the old icon for days. To check your work, open the icon URL directly — yoursite.com/favicon-32.png — and hard refresh, rather than trusting what the tab shows you.

Frequently asked questions