Drag-n-Drop
to upload your archive
Favicon Generator
Make a full favicon set from one image
Drop in a PNG, JPEG, WEBP, SVG or GIF and get every icon a modern website actually needs: a real multi-size favicon.ico, PNGs from 16 to 512 pixels, an apple-touch-icon for iOS home screens, a site.webmanifest for installable web apps, and the exact <link> tags to paste into your <head>. Your image never leaves your browser. It doubles as a PNG to ICO converter: drop in any PNG, JPG or WEBP and download a real multi-size favicon.ico.
Source image:
Free, no sign-up. 100% client-side, nothing is uploaded to any server
Icon options
Transparency is preserved by default. Pick a flat background color if you want the .ico to stay legible on dark browser chrome; Windows and older bookmark bars do not always composite alpha the way you expect.
Background
0%
Breathing room around the artwork. Around 10% suits wordmarks and dense logos; leave it at 0 for a glyph that already has its own margin.
Apple touch icon
iOS already masks home-screen icons for you, so leave this off unless you are also serving the 180×180 file somewhere that does not apply its own mask.
Sizes produced
16, 32, 48, 64, 96, 180, 192 and 512 pixels (including the android-chrome-192x192.png and android-chrome-512x512.png icons for the manifest), plus a multi-size favicon.ico containing the 16, 32 and 48 versions.
Web app manifest
These fields fill in the site.webmanifest. Chrome and Edge read it to decide whether your website can be installed, and Android uses the theme color for the status bar.
Used for
theme_color and the <meta name="theme-color"> tag.
Shown behind the icon while an installed app boots.
-
Every size browsers ask for
16 and 32 for tabs, 48 for Windows shortcuts, 96 for Android search results, 180 for the iOS home screen, 192 and 512 for the PWA manifest. One image in, the whole set out.
-
Your logo never leaves the tab
Resizing, the ICO packing and the zip all happen in your browser with canvas and typed arrays. There is no upload endpoint, so an unreleased brand mark stays on your machine.
-
A real .ico, not a renamed PNG
The
favicon.icois a genuine ICO container with three directory entries (16, 32 and 48), so each context picks the size it needs instead of resampling one image badly.
How to generate a favicon
-
1
Drop a square PNG, JPEG, WEBP, SVG or GIF onto the box above, or click to choose one.
-
2
Adjust the background, padding and app name until the previews look right at 16 pixels.
-
3
Download the zip, drop the files at your website root, and paste the
<link>snippet into your<head>.
Everything a modern favicon set needs
-
apple-touch-icon, sized correctly
iOS looks for a 180×180 PNG and does not read alpha the way a browser tab does. We flatten it against your chosen color and can pre-round the corners if you need the file to look finished outside Safari.
-
Maskable PWA icons
The 192 and 512 icons ship as separate
"purpose": "any"and"purpose": "maskable"manifest entries, as the spec recommends. Add roughly 10% padding and Android launchers can crop your icon into a circle, squircle or teardrop without clipping the artwork. -
Copy-paste HTML, plus a README
The zip carries every PNG, the ICO, the manifest and a README with the exact
<link>tags and what each file is for, so whoever ships the change does not have to guess.
Which favicon sizes actually matter
A favicon is not one file any more. Browsers, operating systems and app launchers each reach for a different asset, and the wrong size gets downscaled on the fly, which is exactly how a crisp logo turns into a grey smudge in a tab.
16×16 is the classic tab and address-bar icon on standard-density displays. It is also the size that punishes detail: thin strokes and small type disappear. If your mark has more than one or two shapes, simplify it before you generate.
32×32 is what most people actually see, because retina and high-DPI screens render the 16-pixel slot at double density. It is also the size Windows uses for taskbar shortcuts. Treat 32 as your primary target.
48×48 shows up in Windows desktop shortcuts, and it rides along inside favicon.ico. 96×96 covers Android shortcuts and some search result treatments.
180×180 is the apple-touch-icon: the file iOS grabs when someone adds your website to their home screen. Skip it and Safari screenshots your page instead, which never looks intentional.
192×192 and 512×512 belong to the web app manifest. Chrome needs both before it will offer an install prompt, and the 512 also drives the splash screen on Android.
Why favicon.ico is still worth shipping
Every current browser reads PNG favicons, so it is tempting to drop the .ico entirely. Do not. Browsers still request /favicon.ico from your website root automatically when no <link rel="icon"> resolves, and plenty of things that render your website are not browsers at all.
Feed readers, chat clients, link-preview crawlers, bookmark managers, some corporate proxies and older intranet browsers all fall back to that fixed path. Without the file they log a 404 against your website on every cold visit, and show a blank page icon.
The other reason is that ICO is a container, not a single bitmap. One file holds several resolutions, each with its own directory entry, and the consumer picks the closest match. That is why we pack 16, 32 and 48 into it: a bookmark bar takes the 16, a Windows shortcut takes the 48, and neither has to resample.
This tool builds that container byte by byte in your browser: a six-byte header, one sixteen-byte directory entry per image, then the PNG payloads. PNG-compressed ICO entries are part of the format and are read correctly by every browser in current use, as well as by macOS Preview and Windows Explorer.
Generated your favicons? Publish the website they belong to with free static hosting
Select File
or drop your archive to upload
Frequently asked questions
What is a favicon?
A favicon is the small icon a browser shows in the tab, the bookmarks bar and the history list for your website. It is the smallest piece of branding you own, and it is one of the first things people notice when your page sits among twenty other open tabs. Google also shows favicons next to search results on both mobile and desktop.
What favicon sizes do I actually need?
A practical modern set is 16x16 and 32x32 for browser tabs, 48x48 for Windows shortcuts, 180x180 for the Apple touch icon used when someone adds your website to an iOS home screen, and 192x192 plus 512x512 for the web app manifest used by Android and installable PWAs. This generator produces all of them, plus 64 and 96 for good measure.
Do I still need a favicon.ico file?
Yes, it is still worth shipping one. Older browsers, some feed readers and various crawlers request /favicon.ico from your website root regardless of what your HTML declares, and serving it avoids a stream of 404s in your logs. The ICO container we build packs the 16, 32 and 48 pixel PNGs into a single file, which every browser and macOS Preview reads correctly.
What is a maskable icon?
Android may crop your app icon into a circle, a squircle or a rounded square depending on the launcher. A maskable icon keeps all its important content inside a central safe zone, roughly the middle 80 percent, so nothing critical is cut off whichever shape is applied. The manifest this tool generates ships separate any and maskable entries for the 192 and 512 icons, so launchers that mask get a croppable image and everything else gets the untouched one.
What source image works best?
Start from a square image of at least 512x512 pixels, ideally an SVG or a high resolution PNG with a transparent background. Simple, high contrast shapes survive being scaled down to 16 pixels; detailed logos and thin text turn to mush. If your logo is wide, crop or redraw a square mark rather than shrinking the whole lockup.
Is my image uploaded anywhere?
No. Every resize, the ICO packing and the zip are done in your browser with the Canvas API. Your image never leaves your device, which means you can safely generate icons from unreleased branding.
How do I convert a PNG or JPG to favicon.ico?
Drop the PNG or JPG onto the box above. The tool resizes it to 16, 32 and 48 pixels and packs those into one favicon.ico container: a true ICO file, not a renamed PNG. Download just the .ico, or the full zip with every PNG size and the HTML snippet.
Which favicon format is best: ICO, PNG or SVG?
Ship all three roles rather than picking one: an ICO for the legacy /favicon.ico request older clients still make, PNGs for browser tabs and touch icons, and optionally an SVG for future-proof scaling in browsers that support it. This generator covers the ICO and PNG set; if you started from an SVG you can reference the original alongside them.
Can a favicon have a transparent background?
Yes, for browser tabs: PNG and ICO both keep the alpha channel, and the checkerboard preview above shows exactly what stays transparent. The exception is the apple-touch-icon: iOS renders transparency as black, so flatten it onto a solid background color, which is what the background option here is for.
Can I use an emoji or a text letter as a favicon?
Yes. Export or screenshot the glyph as a square PNG or SVG (a character on a colored rounded square is the classic pattern) and drop it in. Bold, simple glyphs survive the shrink to 16 pixels far better than words or detailed artwork.
What favicon size does Google recommend for search results?
Google Search Central asks for a favicon that is a multiple of 48x48 pixels, served from a stable URL. The 96x96 and 512x512 files in this set qualify, so you are covered without doing anything extra.
How do I install the generated files?
Upload the files to the root of your website, then paste the generated HTML snippet into your <head>. If an old icon lingers, browsers cache favicons aggressively: force a reload, or rename the file and update the snippet. Our Meta Tag Generator produces the rest of the head block that belongs next to it.
Can I host a website with these icons on Static.app?
Yes. Drop the zip contents into your project folder, upload it to Static.app, and your website is live on a custom domain with free SSL. Because the icons are plain static files, there is no build step and nothing to configure.