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. |
| 2 | Color Palette Generator | Pull theme and background colors for the manifest and UI. |
| 3 | Image Compressor | Shrink the master PNG before packaging and shipping. |
| 4 | Favicon Generator | Builds ICO, PNGs, Apple/Android icons, manifest, HTML (current step). |
| 5 | QR Code Generator | Extends the same brand into print and packaging. |
| 6 | Business Card Generator | Places the mark on printable cards. |
| 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.