Favicon generator — .ico, PNG set and manifest
Turn a PNG or SVG, or just a couple of letters, into the full favicon set: 16, 32, 48, 180, 192 and 512 PNGs, a real multi-size favicon.ico, a web app manifest and the <head> tags. Everything runs in your browser — nothing is uploaded.
Free · no sign-up · runs in your browser
PNG or SVG, 512px or larger. Never leaves your browser.
Used for the initials and the manifest name.
The set
16px · browser
32px · browser
48px · browser
180px · iOS
192px · manifest
512px · manifest
favicon.ico packs the 16, 32 and 48 pixel images as PNGs — a fraction of the size of the uncompressed bitmaps most generators emit.
Everything here runs in your browser. No image is uploaded, and the zip is assembled in the page.
Copy the head block
<head> tags
<link rel="icon" href="/favicon.ico" sizes="any" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="48x48" href="/favicon-48x48.png" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<link rel="manifest" href="/manifest.webmanifest" />
<meta name="theme-color" content="#b9471b" />manifest.webmanifest
{
"name": "Bookmarks for Devs",
"short_name": "Bookmarks for Devs",
"icons": [
{
"src": "/icon-192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/icon-512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"theme_color": "#b9471b",
"background_color": "#b9471b",
"display": "standalone",
"start_url": "/"
}A favicon is not one file any more, and most of the sets you find generated online are either half of what you need or eighteen files you stopped needing a decade ago. This produces the set that is actually used in 2026 — three browser sizes packed into a real .ico, one 180px icon for iOS, and the two the web app manifest requires — plus the manifest and link tags to reference them. Your image never leaves the page: it is read with FileReader and drawn to a canvas here, not sent to a server.
How it works
- 01Drop in a PNG or SVG, or type a name and let it draw the initials — two letters, because three in a 16-pixel tab is a smudge.
- 02Each size is drawn separately on its own canvas rather than scaled down from one bitmap, so the small ones stay crisp instead of turning to mush.
- 03Your artwork is fitted inside the square, never cropped to fill it. A logo cropped to fill a square is a different logo.
- 04The .ico is a real multi-size container holding the 16, 32 and 48 pixel images. They are stored as PNGs inside it — every browser and every Windows version since Vista reads that, and it is a fraction of the size of the uncompressed bitmaps most generators still emit.
- 05Corners are square by default. Every platform that wants a rounded icon masks it for you, so rounding it yourself just means it gets rounded twice.
- 06Download any single file, or the whole set as a zip built in the page — the archive is assembled byte by byte in JavaScript, with no library and no server.
Use cases
- Setting up favicons for a new site without hand-exporting six sizes.
- Replacing a lone 16px favicon.ico from years ago with a set that works on retina tabs and iOS home screens.
- Generating a placeholder mark from initials before the real logo exists.
- Producing the icons a web app manifest needs so a site can be installed to a phone home screen.
- Getting the <head> block right without looking up which rel values still matter.
- Making an icon from a logo you would rather not upload to a random website.
Frequently asked questions
What favicon sizes do I actually need in 2026?
Far fewer than the old lists suggest. 16 and 32 for browser tabs and bookmarks, 48 because Windows uses it for shortcuts, one 180px apple-touch-icon (iOS has downscaled a single icon for years), and 192 and 512 for the web app manifest. That is six files plus a .ico. The eighteen-size apple-touch pile you may have seen generated is dead weight.
Do I still need a favicon.ico?
Yes, as a fallback. Modern browsers prefer the PNG link tags, but plenty of things still request /favicon.ico blindly — feed readers, link unfurlers, older crawlers, and a browser that has not yet parsed your head. It costs a few kilobytes and it is the file that answers when nothing else is found.
Should a favicon have rounded corners?
Generally no. iOS, Android and macOS all apply their own mask to a home-screen icon, so a pre-rounded icon gets rounded twice and ends up with a thin sliver of background showing at the corners. Ship a square icon and let each platform shape it. The radius control here defaults to zero for that reason.
Is my image uploaded anywhere?
No. The file is read locally with FileReader, drawn to a canvas, and turned into PNGs in your browser. The zip is built in JavaScript in the page. There is no upload, no server round trip, and nothing to delete afterwards — which is the point if the image is a logo that is not public yet.
PNG or SVG as the source?
SVG if you have it, since it rasterises cleanly at every size. If you only have a PNG, give it at least 512 pixels square — the sizes are each drawn from your source, so anything smaller will be soft at 512. Either way, check the 16px preview: fine detail that reads beautifully at 512 usually disappears at tab size, and simplifying the mark for the small end is normal.
What goes in the web app manifest?
The name, a short name for under the icon, the 192 and 512 icons, a theme colour, a background colour, display: standalone and a start URL. Standalone is what makes an installed icon open without browser chrome — without it, adding to a home screen just makes a bookmark. The generated manifest above includes all of it.
Related resources
SVG SpinnersA collection of 60+ SVG and CSS loading spinners — copy the markup or use them via Iconify.Design & UIOpen sourceSep 2
CoolorsGenerate, browse, and save color palettes in seconds.Design & UIFreemiumJul 17
MDN Web DocsThe definitive reference for HTML, CSS, JavaScript, and the web platform.Learn & DocsPickFreeJul 17
Related reading
- Frontend5 Frontend Tools Worth Bookmarking in 2026A short, opinionated list of the frontend tools and references we reach for every week — frameworks, styling, components, and icons.
More tools
Tailwind CSS color palette generator
Open →Turn one hex code into a full Tailwind color scale — 11 OKLCH-tuned shades from 50 to 950, with contrast ratios, ready to paste into Tailwind v4's @theme block or a v3 config. Free, no sign-up, runs in your browser.
CSS clamp() calculator for fluid typography
Open →Generate a responsive CSS clamp() font size from a minimum and maximum size and the viewport range they should grow across — with the slope and intercept shown, a live preview, and the rendered size at every common screen width. Free, no sign-up.
SVG to JSX converter for React components
Open →Paste an SVG and get a React component back — attributes camelCased, class turned into className, style strings converted to objects, xmlns removed, with optional currentColor, a size prop and TypeScript output. Runs entirely in your browser; nothing is uploaded.
Meta tag generator with Google SERP preview
Open →Fill in a title, description, canonical and Open Graph image and get the complete <head> snippet — with a live Google result preview that measures your title and description in pixels, not characters, so you can see exactly where they will be cut.
JSON-LD schema generator and validator
Open →Build valid JSON-LD structured data for Article, FAQPage, Product, Organization and BreadcrumbList from a form, or paste existing markup to have it pretty-printed and checked for the mistakes that stop a rich result appearing. Free, runs in your browser.
robots.txt generator with validation
Open →Build a robots.txt from user-agent groups, allow and disallow rules, crawl-delay and sitemap URLs — with presets for allowing everything, blocking AI crawlers, or locking down a staging site, and warnings for the mistakes that quietly block your whole site.
UTM link builder and campaign URL generator
Open →Build correctly encoded UTM tracking links from a URL and your source, medium and campaign — with the existing query string and fragment preserved, values properly percent-encoded, and warnings for the capitalisation and spacing that split one campaign across several rows in an analytics report.
Colour contrast checker with WCAG suggestions
Open →Check any two colours against WCAG 2 — normal text, large text and UI components — see the ratio and live samples, and get the nearest passing colour when a pair fails, adjusted in OKLCH so the hue stays yours. Free, runs in your browser.
Image converter — WebP, AVIF, JPEG and PNG
Open →Convert and resize images to WebP, AVIF, JPEG or PNG at the quality you choose, see exactly how many bytes each one saved, and download them one at a time or as a zip. Everything happens in your browser — no image is uploaded.
JSON formatter and validator — free, in your browser
Open →Format, minify and validate JSON in your browser. Broken documents get the exact line and column of the error. Nothing is uploaded, and there is no size limit but your machine.
JSON to TypeScript — generate interfaces from a payload
Open →Paste a JSON payload and get TypeScript interfaces: merged array shapes, optional properties, and real unions instead of any. Runs in your browser — nothing is uploaded.
OG image generator — free 1200×630 social cards
Open →Generate an Open Graph image for any page: type a title, pick a theme, download a 1200×630 PNG. Runs entirely in your browser — no account, no upload, no watermark.