Technical Guide
How to Create Favicons & PWA Icons That Work Everywhere (Complete Guide)
Learn which favicon sizes you need in 2026, how ICO vs PNG vs Apple Touch icons differ, and how to generate a complete browser pack with webmanifest — free, private, no signup.
Table of contents
A favicon is the tiny brand mark in browser tabs, bookmarks, history rows, and — increasingly — mobile search results. Get it wrong and the site looks unfinished. Get the full pack right and the same logo also powers Apple home-screen icons, Android PWA icons, and Windows tiles.
Designers often export a single 32×32 PNG and call it done. That worked in 2012. In 2026 you still need favicon.ico for legacy paths, high-res PNGs for crisp tabs on retina displays, 180×180 Apple Touch artwork, 192 / 512 PWA icons, and a site.webmanifest that points at them. Doing that by hand in Photoshop is tedious and easy to get wrong.
This guide explains every file in a modern favicon package, how sizes map to surfaces, padding and background rules, HTML installation, Next.js notes, caching pitfalls, and a private browser workflow on Jaconir. Companion posts: Favicon Generator Guide and Favicon ICO File Guide.
What is a Favicon (Really)?
Tab icon vs brand system
| Surface | Typical asset | Notes |
|---|---|---|
| Browser tab | 16×16 / 32×32 PNG or ICO | Must read at microscopic size |
| Bookmarks | 16–32 px | Same mark, often cached forever |
| iOS home screen | 180×180 Apple Touch | Rounded mask; solid fill often helps |
| Android / PWA | 192 & 512 PNG + manifest | Installability and splash |
| Windows tile | browserconfig + 150 tile | Optional but nice for Edge |
A “favicon” in casual speech means the tab icon. A favicon package is the set of files that make your brand consistent across those surfaces.
Master artwork rules
- Square canvas only — non-square sources get cropped or padded
- ≥512×512 source (1024 if the logo has fine strokes)
- Simple silhouette — hairline serifs die at 16 px
- Transparent PNG for tabs; plan a solid background option for Apple/Android
- High contrast against both light and dark browser chrome
Files You Should Ship in 2026
favicon.ico (multi-resolution)
Still the universal fallback. Prefer an ICO that embeds 16×16, 32×32, and 48×48. Browsers pick the best layer. See the deep dive: Favicon ICO File Guide.
PNG sizes
| Size | Role |
|---|---|
| 16×16 | Classic tab |
| 32×32 | Retina tab / taskbar-ish uses |
| 48×48 | Some Windows / older UI |
| 96×96 | Occasional Android / shortcuts |
| 180×180 | Apple Touch (often named apple-touch-icon.png) |
| 192×192 | Manifest / Android Chrome |
| 512×512 | Manifest splash / high-res PWA |
You do not always need every intermediate size, but 16, 32, 180, 192, 512 + ICO covers almost every real deployment.
site.webmanifest
Minimal shape:
{
"name": "Your Product",
"short_name": "Product",
"icons": [
{ "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" }
],
"theme_color": "#18181b",
"background_color": "#ffffff",
"display": "standalone"
}
Link it from HTML:
<link rel="manifest" href="/site.webmanifest" />
browserconfig.xml (optional)
Windows tiles can read a small XML config pointing at a square tile image. Harmless to include; skip only if you know you will never care about pinned Edge sites.
Design for 16 Pixels First
Legibility test
Shrink your logo to 16×16 before you fall in love with the 1024 master. If the mark becomes a muddy blob:
- Increase stroke weight
- Drop secondary wordmarks (lettermark or symbol only)
- Boost contrast
- Add a slight safe padding so the glyph does not touch the tab’s clip edge
Padding and fit
| Setting | When to use |
|---|---|
| Contain + padding | Logos that must not clip; Apple icons |
| Cover | Fills the square aggressively — watch edges |
| Solid background | Apple Touch / Android when transparency looks unfinished |
| Transparent | Browser tabs on light and dark themes |
iOS applies a mask and shadow. Artwork that kisses the canvas edge often feels cropped. 8–12% padding on the Apple/PWA sizes is a common sweet spot.
Dark mode tabs
Browsers may sit your icon on light or dark chrome. Pure white logos vanish on light tabs; pure black vanishes on dark ones. Prefer mid-contrast marks or a soft circular plate behind the glyph.
HTML Installation
A practical <head> snippet:
<link rel="icon" href="/favicon.ico" sizes="any" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<link rel="manifest" href="/site.webmanifest" />
<meta name="theme-color" content="#18181b" />
Optional SVG (alongside the pack):
<link rel="icon" href="/favicon.svg" type="image/svg+xml" />
Next.js App Router notes
- Static files in
public/map to/filename - Or use
app/icon.png/app/apple-icon.pngconventions andmetadatainlayout.tsx - After replacing icons, bump a cache-buster query in custom link tags if the old ICO sticks
Path mistakes to avoid
- Generating files named
favicon-32x32.pngbut linking/icons/favicon-32.png - Putting icons only in
/assetswhilemanifeststill points at/ - Forgetting to deploy
site.webmanifestwith the PNGs
Caching: Why “I Uploaded It” Still Shows the Old Icon
Favicons are cached more aggressively than CSS. When a replace “does nothing”:
- Hard refresh / empty cache
- Incognito window
- Another browser
- Append
?v=3to thehref - Confirm the CDN/edge actually serves the new bytes (content-hash or purge)
For client handoff docs, write: “Replace files + bump ?v= + test in a private window.”
PWA and Theme Color
theme_color influences Android UI chrome around your site/PWA. background_color is the splash backdrop behind the icon while the app boots. Match them to your brand system — extract candidates with the Color Palette Generator if you are starting from a logo photo.
Display modes (standalone, minimal-ui, browser) belong in the manifest when you are actually shipping installable behavior — not every marketing site needs standalone.
Interactive Browser Tool
Hand-exporting eight PNGs, building an ICO, and writing manifests is busywork. Automate it once the master art is ready.
Jaconir Favicon Generator is a free, browser-based favicon and PWA pack builder:
- Upload one square master (PNG / WebP / JPEG)
- Tune padding, fit (cover/contain), and optional background
- Live tab and home-screen style previews
- Export multi-size favicon.ico (16/32/48), PNG set, Apple Touch, Android 192/512
- Editable site.webmanifest + optional browserconfig.xml
- Copy-paste HTML tags for your
<head> - Privacy-friendly: 100% client-side canvas processing — logos stay on your device
Create Your Favicon Pack Online → Favicon Generator
How to Use the Tool
Step 1 — Prepare the master
Export a square PNG ≥512×512. Prefer transparency for tab use. If the mark is a wordmark, also prepare a simplified symbol — you may swap masters after seeing the 16 px preview.
Step 2 — Upload and frame
Open the Favicon Generator. Drop the file. Adjust padding so the glyph breathes. Use contain for logos that must not clip; add a solid fill when Apple/Android previews look weak on transparency.
Step 3 — Set PWA metadata
Enter app name, short name, theme color, and background color. These write into site.webmanifest inside the ZIP.
Step 4 — Preview
Check the tab mock at tiny size and the home-screen style tile. If the 16 px view fails the squint test, simplify art and re-upload — do not ship hope.
Step 5 — Download and install
Download the ZIP, extract into your site root or public/, paste the HTML snippet into <head>, deploy, then verify in a private window. Compress oversized marketing images separately with the Image Compressor.
Create Your Favicon Pack Online → Favicon Generator
Continue Your Brand & Web Asset Workflow
Favicons sit at the end of a small identity loop: mark → colors → compression → icons → print/QR.
Logo / SVG mark
↓
Color Palette Generator
↓
Image Compressor (master cleanup)
↓
Favicon Generator ← you are here
↓
QR Code / Business Card (offline brand)
| Step | Tool | What it does next |
|---|---|---|
| 1 | SVG Shape Generator | Draft simple geometric marks you can refine into a favicon. |
| 4 | Favicon Generator | Builds ICO, PNGs, Apple/Android icons, manifest, HTML (current step). |
| 7 | CSS Gradient Generator | Builds page backgrounds that sit beside the new tab icon. |
More free utilities: Jaconir Tools.
Common Mistakes
- Only shipping 32×32 — missing Apple/PWA sizes and ICO fallback
- Non-square masters — awkward crops on home screens
- Hairline logos at 16 px — illegible tabs
- No padding on Apple icons — iOS mask eats the edges
- Manifest paths that do not match ZIP filenames
- Forgetting cache bust after a redesign
- Uploading unreleased logos to account-based generators — prefer client-side tools
- Using the full wordmark as the only favicon — use a symbol for tabs
Best Practices
Startups and product sites
- Symbol for tab, full logo in the header
- Theme color = primary brand
- Regenerate the pack whenever the mark changes — do not stretch an old ICO
Agencies handing off to clients
- Deliver ZIP + HTML snippet + one-line cache-bust note
- Include both transparent and solid-background Apple icons if the brand uses glass-like marks
PWAs
- Always include 192 + 512 in the manifest
- Test “Add to Home Screen” on a real Android device
- Keep
short_name≤12 characters when possible
Frequently Asked Questions
What size should my source image be?
At least 512×512 square. Larger is fine; the generator downscales cleanly.
Do I still need favicon.ico?
Yes for compatibility. Pair it with modern PNGs and a manifest.
What is an Apple Touch icon?
Usually 180×180 PNG used when saving a site to an iPhone/iPad home screen.
What goes in site.webmanifest?
Name, short name, icons (192/512), theme/background colors, and display mode.
Why is my favicon not updating?
Caching. Private window + ?v= query + confirm the file on the server.
Should I use SVG?
Great as an enhancement in Chromium/Firefox; keep PNG/ICO fallbacks.
Does the generator upload my logo?
Jaconir’s Favicon Generator runs entirely in the browser.
How do I add favicons in Next.js?
Put files in public/ or use App Router icon metadata; paste or map the generated tags.
Is there a free all-in-one favicon pack tool?
Yes — Favicon Generator exports ICO, PNGs, Apple/Android icons, manifest, browserconfig, and HTML.
Related Guides
- Favicon Generator Guide — earlier walkthrough of generator basics
- Favicon ICO File Guide — deep dive on the ICO container
- Complete Guide to Video Collages — brand the videos you publish next to the site icon
- Sprite Sheet Generator Guide — packing many small images (different problem, similar “one master → many sizes” mindset)
Conclusion
A professional favicon setup is a package, not a single 32 px file: multi-layer ICO, retina PNGs, Apple Touch, PWA icons, and a correct site.webmanifest, installed with HTML that matches real paths — then verified past the cache. Design for 16 px legibility, pad for masked home screens, and keep unreleased logos in client-side tooling.
When you are ready to generate the pack:
Create Your Favicon Pack Online → Favicon Generator
Then continue through Image Compressor, Color Palette Generator, and the rest of Jaconir’s free tools to keep the brand consistent from tab icon to print.
Frequently asked questions
What size should my favicon source image be?
Start from a square master at least 512×512 pixels (1024×1024 is even safer). Transparent PNG is ideal for browser tabs; you can add a solid background for Apple Touch icons when needed.
Do I still need favicon.ico in 2026?
Yes for maximum compatibility. Modern browsers love PNG and SVG, but legacy bookmarks, older intranet browsers, and some crawlers still request /favicon.ico. A multi-size ICO (16, 32, 48) remains best practice.
What is an Apple Touch icon?
apple-touch-icon.png (typically 180×180) is the home-screen icon when someone adds your site to an iPhone or iPad. It usually looks better with a solid background and slight padding so the mark is not clipped by iOS rounding.
What goes in site.webmanifest?
A JSON file that names your PWA/web app, theme colors, display mode, and icon paths (commonly 192×192 and 512×512). Browsers use it for install prompts and Android home-screen icons.
Why is my new favicon not showing?
Aggressive caching. Hard-refresh, try an incognito window, clear site data, or append ?v=2 to the favicon URL after replacing files.
Should I use an SVG favicon?
SVG favicons look sharp in Chromium and Firefox. Keep a PNG/ICO fallback pack for Safari older behavior and universal support. You can ship SVG alongside the generated ZIP files.
Does a favicon generator upload my logo?
Jaconir’s Favicon Generator processes everything in the browser with canvas APIs — your logo is not uploaded to a server to build the pack.
How do I add favicons in Next.js?
Place files in public/ or use the App Router metadata/icons API. Paste the generated link tags into your root layout head or map them in metadata.
What theme color should I pick?
Match your primary UI chrome or brand color. theme_color tints browser UI on Android; background_color shows behind the icon during splash/install.
Is there a free favicon generator with ICO + PWA files?
Yes. Jaconir’s Favicon Generator exports multi-size ICO, PNGs, Apple Touch, Android icons, site.webmanifest, browserconfig.xml, and copy-paste HTML.