Pixel workshop · 100% client-side
Favicon Generator: every size, one click.
Turn an image, a word, an emoji or your initials into a complete favicon set — 16, 32, 48 px PNGs, a real multi-size favicon.ico, apple-touch-icon, PWA icons, the HTML snippet and the web manifest. Nothing is uploaded; it all happens on a canvas in your tab.
The workshop
Build your favicon
Pick a source, tune the look, preview it live in a mock browser tab — then download every file. Everything regenerates instantly as you change options.
1 · Source artwork
Upload an image, draw with text/emoji, or use initials.
First letters become the mark — e.g. “Rafsan Alhad” → RA. Text color is picked automatically for readability.
2 · Live preview
Exactly how it looks at real favicon sizes.
3 · Export everything
Individual files — no zip library, no server, no waiting. The favicon.ico is encoded in your browser and holds 16 + 32 + 48 px.
Under the hood
From pixels to .ico in three steps
A favicon (favorite icon) is the small image browsers show in tabs, bookmarks, home screens and search results. No servers, no queues — your browser does all the work on an offscreen canvas.
step 01
Draw at 512 px
Your source is composed once on a 512×512 master canvas — image, text, emoji or initials over your chosen background.
step 02
Downscale cleanly
The master is resampled to 16, 32, 48, 180, 192 and 512 px with high-quality smoothing, then each is exported as a real PNG.
step 03
Encode a true .ico
The 16/32/48 PNGs are packed into the ICO container format (ICONDIR + directory entries) byte-by-byte in JavaScript — a genuine multi-size favicon.ico.
Worked examples
Three favicons, start to finish
Load any example into the workshop above and tweak it.
Text → favicon
Single letter “N” on amber. Crisp at 16 px where detailed logos turn to mush.
Emoji → favicon
🚀 on deep ink. A favorite trick for personal sites and side projects.
Photo → favicon
Sample artwork (drawn in-browser as a stand-in) cropped with “cover” fit.
Cheat sheet
Favicon sizes in 2026 — what goes where
Every row below is a file this generator produces.
| File | Size | Used for |
|---|---|---|
favicon.ico | 16 + 32 + 48 px | Browser tabs, bookmarks bar, Windows taskbar & desktop shortcuts — the universal fallback |
favicon-16x16.png | 16×16 | Classic tab icon; what most people picture as “the favicon” |
favicon-32x32.png | 32×32 | Retina/HiDPI tabs, Safari pinned tabs |
favicon-48x48.png | 48×48 | Windows taskbar, shortcuts, some bookmark managers |
apple-touch-icon.png | 180×180 | iOS / iPadOS home-screen icon when your site is saved |
android-chrome-192x192.png | 192×192 | Android home screen & PWA install prompt |
android-chrome-512x512.png | 512×512 | PWA splash screens, maskable adaptive icon |
site.webmanifest | — | Points Android/Chrome at your 192 & 512 px icons |
Honest comparison
How this compares to favicon.io & RealFaviconGenerator
| This generator | favicon.io | RealFaviconGenerator | |
|---|---|---|---|
| Image upload to a server | No — 100% in-browser | Yes | Yes |
| True multi-size .ico | Yes (encoded locally) | Yes | Yes |
| Text / emoji / initials mode | Yes | Text only | No |
| HTML snippet + web manifest | Yes | Partial | Yes (verbose) |
| Ads / tracking | None | Ads | None, but heavy flow |
| Works offline after load | Yes | No | No |
Drop it in
Add your favicon to any stack
Download the files above, then follow the one-liner for your setup. The snippet's root-relative paths (/favicon.ico) work everywhere below.
html
Plain HTML
Paste the snippet inside <head> and upload the files to your site root. Done.
next.js
Next.js (App Router)
Drop icon.png (or favicon.ico) into the app/ directory — Next.js serves it automatically, no <link> needed.
nuxt · vite · react
Nuxt / Vite / React
Put the files in public/ and reference them from your <head> (Nuxt: app.head / nuxt.config).
laravel
Laravel
Place files in public/ and paste the snippet into your Blade layout's <head>.
wordpress
WordPress
Go to Appearance → Customize → Site Identity → Site Icon and upload the 512 px PNG; or paste the snippet via a header plugin.
shopify · squarespace
Shopify / Squarespace / Wix
Upload the 32 px PNG (Shopify: Content → Files, then theme settings → Favicon; Squarespace: Design → Browser icon).
FAQ
Favicon questions, answered
What size should a favicon be in 2026?
Ship a multi-size favicon.ico (16x16, 32x32, 48x48) plus PNGs: 32x32 for modern browser tabs, 180x180 apple-touch-icon for iOS home screens, and 192x192 + 512x512 for Android/PWA install prompts. An SVG favicon with a PNG fallback covers everything else. This generator produces all of these sizes in one click.
Should I use ICO or PNG for my favicon?
Use both. ICO is a container that holds multiple sizes (16, 32, 48) in one file and still works everywhere, including older browsers and Windows taskbars. PNG is sharper for modern browser tabs and is required for apple-touch-icon and PWA icons. The snippet this tool generates references favicon.ico first, then PNG overrides for capable browsers.
What is apple-touch-icon and do I still need one in 2026?
apple-touch-icon.png (180x180) is the icon iOS uses when someone adds your site to their home screen. Safari ignores SVG favicons for this, so yes — if you get meaningful mobile traffic, include it. One line in your HTML head (<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">) is all it takes.
Can I use an SVG favicon? Do I need a fallback?
Yes — modern Chrome, Firefox, Edge and Safari all support SVG favicons (<link rel="icon" type="image/svg+xml" href="/favicon.svg">), and SVG stays razor-sharp at any size. Keep a PNG/ICO fallback anyway: some contexts (older browsers, certain RSS readers, Windows shortcuts) still only read raster formats.
How do I add a favicon to my HTML?
Put the <link> tags inside your page's <head>. The minimum that works everywhere is favicon.ico in your site root (browsers request it automatically) plus explicit tags for PNG, apple-touch-icon and the web manifest. Use the "Copy HTML snippet" button above — it generates the exact tags matched to the files you downloaded.
How do I make a favicon from a PNG or JPG image?
Choose "Upload image", drop in any PNG, JPG or WebP, and the tool redraws it at every favicon size on a square canvas. Use "cover" to fill the square (cropping edges) or "pad" to fit the whole image with background around it. Your image never leaves your browser — resizing happens locally on a canvas.
How do I make a favicon from text or an emoji?
Switch to the "Text & emoji" tab, type up to 4 characters (or pick an emoji from the palette), choose a background color or gradient, and the text is auto-sized and centered. Emoji favicons are a popular trick for personal sites and side projects because they are recognizable at 16 pixels where detailed logos turn to mush.
Why is my favicon not showing up?
The usual culprits: browser cache (favicons are cached aggressively — hard-refresh with Ctrl+Shift+R or test in a private window), a wrong file path in the <link> tag, or the file not being deployed to the URL you referenced. Also confirm the file itself opens when you visit its URL directly. This tool's snippet uses root-relative paths (/favicon.ico), which avoids most path mistakes.
What is favicon.ico and where do I put it?
favicon.ico is the classic favicon container format — one file holding 16x16, 32x32 and 48x48 versions so the browser picks the sharpest for each context (tab, bookmarks bar, taskbar). Upload it to your site's root folder as /favicon.ico; browsers check there by default even without a <link> tag, though adding the tag explicitly is more reliable.
Do I need a web app manifest for favicons?
Only if you want Android install prompts / PWA behavior — the manifest (site.webmanifest) points to your 192x192 and 512x512 icons, which Chrome uses for the home-screen icon and splash screen. It is not required for basic browser-tab favicons. This generator includes a ready-made manifest download with maskable-icon support for Android adaptive icons.
Can I generate a favicon without uploading my image to a server?
Yes — that is the entire point of this tool. Everything (resizing, ICO encoding, snippet generation) runs in JavaScript inside your browser tab. There is no upload, no account, no queue and no watermark. Open your browser's network tab while generating: you will see zero requests.
What is the difference between 16x16, 32x32 and 48x48 favicons?
16x16 is the classic browser-tab size (and what most people picture as "the favicon"). 32x32 serves retina/HiDPI tabs and Safari pinned tabs. 48x48 is used by Windows taskbars, desktop shortcuts and some bookmark managers. Bundling all three inside favicon.ico lets each context grab its ideal size instead of scaling one up or down.
How do I make a transparent favicon?
Select the transparent (checkerboard) background option before generating. PNG output preserves the alpha channel, so rounded logos and non-square artwork keep their see-through areas. Note that favicon.ico entries here are PNG-compressed, which also supports transparency — and apple-touch-icon.png intentionally gets a solid background because iOS adds its own rounded mask.
How is this different from favicon.io or RealFaviconGenerator?
Those are good tools, but they upload your image to a server, show ads, and RealFaviconGenerator's full flow is fairly heavy. This generator runs 100% client-side with no upload and no ads, encodes a real multi-size .ico file in your browser, and gives you every size plus the HTML snippet and web manifest in about ten seconds.
🔒 Your images never leave this tab
This favicon generator is a single HTML file with no backend. Uploads are drawn to a canvas in your browser, resizing and .ico encoding run in local JavaScript, and downloads are created from memory. Open your browser's network inspector while generating — you will see zero requests. No cookies, no accounts, no tracking of your artwork.