100% in your browser
Source never uploaded
Drop an image here or click to browse
Square images work best — PNG · JPG · WebP · SVG
Generating…
Favicon Generator every size, one drop.
Drop a square image and get back the favicon files browsers and phones actually ask for: 16, 32, 180, 192 and 512 pixel PNGs, plus a ready-to-paste set of <link> tags. Everything runs in your browser using a canvas, so the picture never leaves your device. A 512×512 source works best because the tool scales down, never up. Download the icons, or upload them here to get a shareable https link.
Favicon generator at a glance
- Price
- Free
- Sign-up
- Not required
- Input formats
- PNG, JPG, SVG
- Sizes
- 16, 32, 180, 192, 512
- Output
- PNG icons (+ optional link)
How the favicon generator works
Drop a square image
Drag a PNG, JPG or SVG onto the box. A 512×512 source is ideal since the tool only scales down, and a square picture avoids any awkward cropping.
Download each size
You get 16×16, 32×32, 180×180, 192×192 and 512×512 PNGs at once. Each one is rendered straight from your source on a canvas, so nothing is uploaded unless you ask.
Paste the HTML snippet
Copy the generated <link rel="icon"> and apple-touch-icon tags into your page <head>, drop the PNGs in your site root, and reference 192 and 512 in a web app manifest for PWA installs.
Why generate the icons here
All the real sizes at once
Browsers, iOS and Android each want a different size. Instead of resizing by hand five times, you drop one image and get every file you need in a single pass.
Nothing is uploaded
The resizing happens in your browser on a canvas. Your logo stays on your machine, which matters when the icon is from an unreleased product or a private project.
A snippet you can paste
You also get the matching <link> tags. No guessing which rel value goes with which size, and no copy-pasting from a half-remembered Stack Overflow answer.
Host the icons if you want
Need a quick link to a 512 icon for a manifest or a README? Upload the output here and you get a direct https URL, no separate hosting to set up.
Favicon sizes and where each one is used
Each size answers a specific request from a browser or device. Here is what gets generated and where it shows up, so you know which files actually matter for your site.
| Size | Format | Where it is used |
|---|---|---|
| 16×16 | PNG / ICO | Browser tab and bookmark |
| 32×32 | PNG | Taskbar and retina (higher-DPI) tab |
| 180×180 | PNG | apple-touch-icon, iOS home screen |
| 192×192 | PNG | Android / PWA web app manifest |
| 512×512 | PNG | PWA splash and install icon |
What is a favicon?
A favicon is the small icon a browser shows next to a page title in the tab, in the bookmark list, and in history. The name is short for 'favorite icon', from the early days when it appeared mostly in bookmarks. Today the same idea covers a wider set of icons: the tab mark, the icon iOS uses for a home-screen shortcut, and the larger icons Android and progressive web apps use when someone installs your site. They are all just square images at fixed sizes, referenced from your page <head> or a web app manifest.
Which favicon sizes do I actually need?
For browser tabs and bookmarks you want 16×16 and 32×32. Apple devices use a 180×180 apple-touch-icon for home-screen shortcuts. If you support installable web apps, the manifest needs 192×192 and 512×512. The old approach was a single multi-size .ico file, and that still works for very old browsers, but most modern sites just ship PNGs plus a small manifest. If you only had time for two files, 32×32 and 180×180 cover the everyday cases; add 192 and 512 the moment you care about installs.
How to add a favicon to your site
Put the PNG files in your site root or an /icons folder. In the page <head>, add <link rel="icon" sizes="32x32" href="/favicon-32.png"> for the tab icon and <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> for iOS. For installable apps, list the 192 and 512 PNGs inside a site.webmanifest file and reference it with <link rel="manifest" href="/site.webmanifest">. The generated snippet here already wires these up, so you can paste it and swap in your filenames.
When you need a favicon
Any site that opens in a browser tab should have one. A few common moments:
A new site or landing page
You launched something and the tab still shows the blank default icon. Drop your logo in, add the tags, and the tab shows your mark instead of a generic globe.
Turning a site into a PWA
Android install prompts and home-screen icons read the 192 and 512 PNGs from your web app manifest. Generate both, point the manifest at them, and the install icon looks sharp.
iOS home-screen shortcuts
When someone adds your page to their iPhone home screen, iOS uses the 180×180 apple-touch-icon. Without it, iOS just screenshots the page, which rarely looks good.
Favicon generator FAQ
What size should a favicon be?
There is no single size. Generate 16×16 and 32×32 for browser tabs and bookmarks, 180×180 for the iOS apple-touch-icon, and 192×192 plus 512×512 for Android and PWA installs. Starting from a 512×512 source keeps every scaled-down version crisp.
Do I need an .ico file?
Not for modern browsers, which happily read PNG icons. The .ico format is the old multi-size container, and a /favicon.ico in your root is still a safe fallback for very old browsers. Most current sites ship PNGs plus a web app manifest instead.
How do I add a favicon in HTML?
Put the PNGs in your site root, then add <link rel="icon" sizes="32x32" href="/favicon-32.png"> and <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> inside <head>. For PWA install icons, reference the 192 and 512 PNGs from a site.webmanifest. The tool gives you this snippet to paste.
Why is my favicon not showing up?
Browsers cache favicons hard, so the most common cause is an old cached icon. Try a hard refresh, open the page in a private window, or load the icon URL directly to confirm it exists. Also check that the <link> path matches where the file actually lives.
What is the best source image for a favicon?
A square image, at least 512×512, with a simple design that stays readable when shrunk to 16 pixels. Fine detail and small text disappear at tab size, so a bold mark or single letter usually reads better than a full logo with a tagline.
What is an apple-touch-icon?
It is the 180×180 icon iOS uses when someone adds your site to their home screen. You reference it with <link rel="apple-touch-icon" sizes="180x180" href="...">. Without one, iOS just takes a screenshot of the page, which usually looks rough as an icon.
Which icons do I need for a PWA?
Android and progressive web apps read 192×192 and 512×512 PNGs from your web app manifest. The 192 is the home-screen icon and the 512 is used for the splash and install prompt. List both in the manifest's icons array with their sizes.
Can a favicon have a transparent background?
Yes. PNG supports transparency, so the icon can sit on the browser's own tab background. For Apple touch icons, iOS adds rounded corners and a solid background anyway, so a transparent area there may render on white.
Is my image uploaded anywhere?
No. The resizing runs in your browser on a canvas, so the source image stays on your device. If you choose to host the output for a shareable link, only then is a file sent to our CDN.
My logo is not square. What happens?
Favicons are square, so a wide or tall logo will be center-cropped before scaling. For the best result, start from a square version or one with even padding so nothing important sits near the edges.
Should I use an SVG favicon?
An SVG icon scales cleanly and supports light and dark variants with prefers-color-scheme, which is great for flat logos. Photographic or highly detailed marks do better as PNGs. You can ship an SVG plus PNG fallbacks for the sizes that need them.
Do I need a manifest.json?
Only if you want your site to be installable as a PWA. The manifest (often named site.webmanifest) lists the 192 and 512 icons and controls the install name and theme. For a plain website, the <link rel="icon"> and apple-touch-icon tags are enough.