Favicon Generator
Turn any square image into a full favicon set — ICO plus every PNG size modern browsers and mobile platforms ask for — with the HTML to match.
Generated sizes
HTML to paste in your <head>
site.webmanifest icons
About the Favicon Generator
The favicon is a sixteen-pixel square that appears in the browser tab, the bookmark bar, search results, the history list and the home screen when somebody saves your site to their phone. It is the smallest piece of branding a website has and the one users see most often. A site without one shows a blank sheet icon, which reads as unfinished at a glance.
What makes favicons annoying is that one file is not enough any more. Browsers still look for /favicon.ico at the site root, and an ICO ideally contains several sizes in one container. Modern browsers prefer a 32 × 32 PNG. iOS wants a 180 × 180 apple-touch-icon. Android and installable web apps read 192 × 192 and 512 × 512 from a web manifest. Producing all of that by hand means exporting six files and writing five link tags without a typo.
This generator does the whole set from a single source image. It renders each size on a canvas, builds a genuine multi-resolution favicon.ico container in the browser, and prints the exact HTML link tags and web manifest entries you need. Everything is generated locally — your logo is never uploaded, which matters when the brand has not launched yet.
How to use it
- Upload a square imageA 512 × 512 PNG with transparency is ideal. Non-square images are centred on a background you choose.
- Choose a backgroundKeep transparency, or set a solid colour so the icon stays visible against both light and dark browser chrome.
- Optionally round the cornersA rounded-square mask suits app-style icons; leave it off for logos that already have their own shape.
- Review every size16, 32, 48, 64, 96, 128, 180, 192, 256 and 512 pixel versions are previewed so you can check the small ones stay legible.
- Download the filesGrab favicon.ico plus the PNG sizes you need. The ICO contains 16, 32 and 48 pixel versions in one file.
- Copy the HTMLPaste the generated link tags into your and the manifest entries into site.webmanifest.
Features
- Real multi-size ICOA proper favicon.ico container holding 16, 32 and 48 pixel images, built in the browser.
- Complete PNG setTen sizes from 16 up to 512, covering browsers, iOS, Android and installable web apps.
- Apple touch iconThe 180 × 180 PNG iOS uses when a visitor adds your site to their home screen.
- Background and roundingComposite onto a solid colour and optionally apply a rounded-square mask.
- Ready-to-paste HTMLCorrect link tags in the right order, plus the JSON block for your web manifest.
- Small-size previewSee the 16 and 32 pixel versions at actual size, where most logos fall apart.
Who uses this tool
- New website launchesProduce the whole icon set in a couple of minutes instead of exporting sizes one at a time.
- WordPress and Shopify sitesGenerate the exact sizes a theme's site-icon field expects, correctly cropped.
- Web app developersGet the 192 and 512 pixel icons a progressive web app needs to be installable.
- AgenciesDeliver a complete favicon package alongside a logo without touching a design application.
Tips worth knowing
- Simplify. A wordmark that reads perfectly on a business card turns to mush at 16 pixels — use a single letter, monogram or symbol instead.
- Test on a dark tab bar. A dark navy icon disappears in dark mode; adding a light background or a subtle outline fixes it.
- Keep favicon.ico at the site root even if you also ship PNGs. Browsers and crawlers still request that path directly.
Frequently asked questions
What size should a favicon be?
Start from a 512 × 512 source and generate down. Browsers display 16 × 16 and 32 × 32, iOS uses 180 × 180, and installable web apps need 192 × 192 and 512 × 512. Generating all of them from one high-resolution square is the reliable approach.
Do I still need favicon.ico?
Yes. Browsers and many crawlers request /favicon.ico from the site root even when PNG link tags are present, so keeping the file there avoids a stream of 404s in your logs and guarantees an icon everywhere.
Why is my favicon not updating?
Favicons are cached aggressively. Hard-refresh with Ctrl+F5, or open the favicon URL directly and reload it. Adding a query string such as /favicon.ico?v=2 to your link tag forces browsers to fetch the new file.
Can I use a JPG as a favicon?
You can upload one here as a source, but the generated icons are PNG and ICO. JPEG is a poor favicon format because it cannot store transparency and its compression artefacts are very visible at 16 pixels.
What is an apple-touch-icon?
The 180 × 180 PNG iOS uses when someone adds your site to their home screen. Without it, iOS screenshots the page and uses that instead, which looks unmistakably unfinished.
Is my logo uploaded to generate the icons?
No. Every size is rendered on a canvas and the ICO container is assembled byte by byte in JavaScript, all inside your browser. An unreleased brand mark stays entirely on your machine.