Favicon Generator
Turn one image into the complete favicon set a modern site actually needs: a multi-size favicon.ico, crisp 16 and 32px PNGs, the 180px Apple touch icon, and 192/512px manifest icons including a maskable variant. Live browser-tab and iOS home-screen previews show exactly what you'll ship, and everything is generated on your device — nothing is uploaded.
How to make favicons from a photo
- 1
Open your logo or artwork
Drag in a PNG, JPG, WebP or SVG — ideally square and at least 512px so the large icons stay sharp. It loads instantly and never leaves your device.
- 2
Square it up
Non-square images can be center-cropped or fitted inside the square with padding. Add a background color or keep transparency, and round the corners if you want a softer mark.
- 3
Check the live previews
A browser-tab mockup (light and dark) renders your real 16px favicon, and an iOS home-screen tile shows the 180px Apple touch icon — judge legibility before you ship.
- 4
Download the set
Grab everything as one ZIP — favicon.ico (16+32+48), favicon-16.png, favicon-32.png, apple-touch-icon.png, icon-192.png, icon-512.png, icon-maskable-512.png and site.webmanifest — or download files individually.
- 5
Add it to your site
Unzip into your site's root folder and paste the copy-ready HTML snippet into your <head>. The manifest snippet is included too — just adjust the name fields.
Why use PicStudio for this?
The favicon checklist used to be absurd — thirty files, browserconfig.xml, half a dozen apple-touch-icon sizes, Windows tile colors. Almost all of that is dead weight now. What a modern site needs is short: a favicon.ico at the site root with 16, 32 and 48px versions inside, favicon-16.png and favicon-32.png for browsers that prefer PNG, one 180px apple-touch-icon.png for iOS home-screen bookmarks, and 192px plus 512px icons referenced from site.webmanifest for Android and installable web apps. This tool generates exactly that set — no padding the ZIP with files nobody requests.
Every favicon size + ICO from one image, zipped.
Why does .ico still matter when every modern browser accepts PNG? Because the rest of the web hasn't caught up: browsers, crawlers, RSS readers and corporate proxies request /favicon.ico unprompted whether you declare it or not, and a single .ico can carry multiple resolutions so Windows shortcuts and high-DPI tabs each pick their best match. Modern ICO files can embed PNG data directly — that's what this tool writes, building the ICO directory structure right in your browser. The 48px entry isn't decorative either: Google's documentation asks for a favicon of at least 48px for search results, and a multi-size ICO is the cleanest way to provide it.
The maskable icon is the piece most generators skip. When Android installs a web app, it crops your icon into whatever shape the launcher uses — circle, squircle, rounded square — and an ordinary icon with artwork near the edges gets its corners sliced off. A maskable icon solves this by keeping all important content inside the central 80% "safe zone" on a full-bleed background. This tool builds icon-maskable-512.png automatically, scaling your artwork into the safe zone over a solid plate, and wires it into the manifest snippet with purpose: "maskable".
Two details trip people up. First, transparency: PNG favicons with transparent backgrounds look great in browser tabs, but iOS fills transparent regions of an Apple touch icon with solid black, which usually looks broken. That's why the Apple and maskable icons here are flattened onto a background color you choose, while the tab icons stay transparent. Second, legibility: a favicon spends its life at 16 pixels. Detailed logos turn to mush at that size — the browser-tab preview (in both light and dark themes) renders your actual generated 16px file, so you can judge it honestly before shipping. If it's unreadable, try cropping tighter to the mark or adding a background plate.
Start from the largest, squarest source you have — ideally 512px or bigger. Non-square images can be center-cropped or fitted with padding, and you can round the corners or drop in a background color without opening another editor. When it looks right, download everything as one ZIP (including a ready site.webmanifest), drop the files into your site's root, and paste the five-line HTML snippet into your <head>. Since generation runs entirely client-side, your unreleased logo never touches a server.
- Free forever
- No upload
- No watermark
- No sign-up
Frequently asked questions
Do I still need a favicon.ico these days?
Yes — as the safety net. Modern browsers happily use PNG or SVG favicons, but crawlers, RSS readers, older tooling and some browsers still request /favicon.ico from your site root automatically. A multi-size ICO (16, 32, 48px) is the lowest-common-denominator file that works everywhere, and the 48px entry satisfies Google's favicon guidance for search results.
Which favicon sizes actually matter?
16 and 32px for browser tabs and bookmarks (in the ICO and as standalone PNGs), 48px inside the ICO for Windows shortcuts and Google Search, 180px for the iOS Apple touch icon, and 192px plus 512px in your web manifest for Android and PWA installs — plus a maskable 512px variant. That's the whole list; the old 30-file packs are obsolete.
What is a maskable icon?
Android launchers crop installed web-app icons into their own shape — circle, squircle or rounded square. A maskable icon keeps all important artwork inside the central 80% safe zone on a full-bleed background, so nothing gets clipped. This tool generates icon-maskable-512.png automatically and references it in the manifest with purpose "maskable".
Why does my icon get a solid background on iOS?
iOS renders transparent areas of an Apple touch icon as black, which rarely looks intentional. The generator flattens apple-touch-icon.png (and the maskable icon) onto a background color you pick, while the tab favicons keep their transparency.
Is the ICO file valid? How is it built?
The tool writes the ICO container itself in your browser — a standard ICONDIR header plus one directory entry per size, each embedding a PNG stream. PNG-in-ICO has been valid since Windows Vista and is what modern favicon ICOs use. Every entry is verified against its declared size before the file is produced.
Is my logo uploaded anywhere?
No. Image processing, ICO encoding and ZIP packaging all run client-side in your browser. That makes it safe for unreleased branding and internal projects — the artwork never leaves your machine.
What source image works best?
A square image at 512px or larger, with a simple, bold mark. Favicons spend most of their life at 16px, so fine detail disappears — use the live tab preview to check legibility, and crop tighter or add a background plate if it reads poorly.