Favicon Generator
Turn one image into a complete favicon set — 16 through 512 pixels, the Apple touch icon and the Android and PWA icons — with copy-ready HTML tags and a web manifest. Non-square images are centre-cropped, and you can add a background, corner radius or padding. Everything is rendered in your browser; nothing is uploaded. Free, no signup.
Add your source image
Drag and drop, or click to choose. A square PNG or SVG of at least 512×512 gives the best result.
Add an image and every favicon size is generated here. Nothing is uploaded.
How to Use This Tool
- Add your source image — a square PNG or SVG of at least 512 by 512 gives the best result. Non-square images are centre-cropped automatically.
- Adjust the look — keep transparency or add a solid background, round the corners for an Apple-style icon, and add padding if the mark sits too tight.
- Check the small sizes — the 16 and 32 pixel tiles render at their true size. If your logo is unreadable there, simplify it rather than shrinking it.
- Download and paste the code — grab all sizes at once, drop them in your site root, then copy the HTML tags into your head and the manifest into site.webmanifest.
About Favicons
The favicon has grown well beyond the single 16 pixel icon it started as in 1999. A modern site needs a small icon for the browser tab, a larger one for bookmarks and taskbar shortcuts, a 180 pixel Apple touch icon for when someone adds the site to an iOS home screen, and 192 and 512 pixel icons referenced from a web manifest so Android and installed progressive web apps have something to show. Getting this wrong is common and looks careless: a missing Apple touch icon means iOS screenshots your page and uses that instead, which almost never looks intentional.
The single most important design constraint is that a favicon is mostly viewed at 16 or 32 pixels, which is far smaller than people design for. A detailed logo with fine strokes, gradients or a wordmark turns into an unreadable smudge at that size. The favicons that work are the ones that were designed for it: a single letter, a simple geometric mark, or a heavily simplified version of the full logo. This tool renders the 16 and 32 pixel tiles at their true size specifically so you can judge that honestly rather than assuming your logo will survive the reduction.
On the ICO question: you almost certainly do not need one any more. The .ico format existed because early Internet Explorer required it, and its one genuine advantage was bundling several sizes in a single file. Every browser in current use accepts PNG favicons, which are simpler to generate, better compressed and easier to reason about. The one place ICO still turns up is a bare request for /favicon.ico from something that ignores your HTML entirely, so if you want belt and braces, keep a small ICO at the site root and declare PNG sizes in your markup for everything else.
Placement and caching cause more support requests than generation does. Favicon files conventionally live at the site root, and browsers cache them unusually aggressively, often holding on to an old icon long after the file has changed and surviving a normal hard refresh. If a new favicon will not appear, the fix is usually to append a version query string to the href, exactly as you would for a stylesheet, rather than to keep clearing your cache. Also make sure the paths in your link tags are absolute from the root, since relative paths break on any page below the top level.
Two modern details are worth knowing. SVG favicons are now supported in Chrome, Firefox and Edge, and because they are vectors they stay sharp at every size and can respond to the operating system dark mode with a media query inside the SVG itself. Safari still needs a PNG fallback, so declare both. Separately, the maskable purpose in a web manifest tells Android that it may crop your icon into whatever shape the launcher uses, which means the important content needs to sit inside a safe zone of roughly the middle 80 percent. The padding control here is the quickest way to achieve that.
Pair this with our SVG to PNG Converter to rasterise a vector logo first, the Image Compressor to trim the generated files, and the Color Palette Generator to pick a theme colour that matches your brand.
Frequently Asked Questions
Which favicon sizes do I actually need?
A practical modern set is 32 by 32 for the browser tab and taskbar, 16 by 16 as a small fallback, 180 by 180 for the Apple touch icon used when someone adds your site to an iOS home screen, and 192 and 512 referenced from a web manifest for Android and installed progressive web apps. That covers essentially everything in use. The larger sizes in this tool exist for specific cases such as Windows shortcuts and store listings, and there is no harm in shipping them, but the five above are the ones that matter.
Do I still need an ICO file?
Almost certainly not. The .ico format was required by early Internet Explorer, and its one real advantage was packing multiple sizes into a single file. Every browser in current use accepts PNG favicons, which are easier to generate and better compressed. The one case where ICO still helps is a bare request to /favicon.ico from a tool that never reads your HTML, so if you want complete coverage, place a small ICO at your site root and declare your PNG sizes in link tags for everything else. For most sites, PNG alone is fine.
What size should the Apple touch icon be?
Use 180 by 180 pixels, which covers current iOS devices. Apple used to expect a whole ladder of sizes and would pick the closest match, but modern iOS scales a single 180 pixel icon perfectly well, so shipping one file is now the recommended approach. Two things to know: iOS ignores transparency and composites the icon onto a solid background, so supply one rather than letting it choose, and iOS applies its own rounded corners automatically, so you do not need to round them yourself unless you want the preview here to match.
Why has my new favicon not appeared?
Browsers cache favicons far more aggressively than almost any other asset, and a normal hard refresh often will not clear them. The reliable fix is to add a version query string to the href, exactly as you would for a stylesheet, which the browser treats as a new URL. The other common cause is a path problem: if your link tag uses a relative path it will break on any page below the site root, so always use an absolute path starting with a slash. Check the network tab for a 404 on the icon before assuming it is a caching issue.
Can I use an SVG favicon?
Yes, and it is a good idea alongside PNG. Chrome, Firefox and Edge all support SVG favicons, and because they are vectors they render sharply at any size. The genuinely nice trick is that a media query inside the SVG can respond to the operating system dark mode, so your icon can change colour to stay visible against a dark browser chrome. Safari does not yet support SVG favicons, so declare an SVG icon plus a PNG fallback and every browser picks the one it understands.
What should the source image look like?
Square, at least 512 by 512, with a simple, high-contrast mark and generous internal spacing. Remember that the icon is mostly seen at 16 or 32 pixels, where fine strokes, gradients, thin outlines and any wordmark disappear entirely. The favicons that work are usually a single letter or a bold geometric shape rather than a shrunken full logo. If your brand mark is detailed, design a simplified variant specifically for this purpose. Check the 16 and 32 pixel previews here before you commit.
What is a maskable icon?
It is a manifest setting that tells Android it may crop your icon into whatever shape the device launcher uses, which might be a circle, a rounded square or a squircle depending on the phone. Without it, Android puts your icon inside a white box, which usually looks wrong. The requirement is that all important content sits within a safe zone of roughly the central 80 percent, because the outer edge may be cut off entirely. The padding control in this tool is the simplest way to create that margin, and the generated manifest declares the icons as both any and maskable.
Is my image uploaded anywhere?
No. The file is read locally through the browser FileReader API, centre-cropped and drawn to a canvas at each size entirely on your own machine. Nothing is transmitted to a server, nothing is logged, and no copy survives closing the tab. That matters for unreleased brand work and logos under NDA, which is exactly the kind of asset people put through a favicon generator. Only your settings, meaning background, radius and padding, are kept in your own browser localStorage.