Favicon Sizes Guide: Which Icons Your Website Actually Needs
The favicon, Apple touch icon and PWA icon sizes that matter today, the HTML to add, and how to design an icon that reads at 16 pixels.
Editorial disclosure: Pyalm publishes and maintains the products and free tools discussed on this site. Regulatory statements are linked to primary sources where applicable. No independent professional review is claimed unless a reviewer is explicitly named.
A favicon is the tiny icon in browser tabs, bookmarks and search results — and on phones, the app-like icon when someone adds your site to their home screen. Missing or blurry favicons make a site look unfinished.
The sizes that matter today
| File | Size | Used by |
|---|---|---|
favicon.ico |
16, 32, 48 (multi-size) | Older browsers, Windows, default /favicon.ico requests |
favicon-32x32.png |
32×32 | Modern browser tabs |
favicon-16x16.png |
16×16 | Small tab icons |
apple-touch-icon.png |
180×180 | iPhone and iPad home screen |
android-chrome-192x192.png |
192×192 | Android home screen, PWA |
android-chrome-512x512.png |
512×512 | PWA splash screens and installs |
site.webmanifest |
— | Lists the Android/PWA icons and theme colour |
Google search results show your favicon next to your listing — it should be a multiple of 48 px and represent your brand clearly.
The HTML
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#2E8B57">Generate the full set
- Open the free Favicon Generator.
- Upload your logo — or design an icon from letters or an emoji with your brand colours.
- Choose the shape (square, rounded, circle) and preview at 64, 32 and 16 px.
- Download the ZIP with every file, the web manifest and the HTML tags.
Upload the files to your site root (in Next.js, the public/ folder).
Designing for 16 pixels
- Simplify. Use your logomark or initials, not the full logo with tagline.
- High contrast — light mark on a strong background, or vice versa.
- Bold shapes survive; thin lines disappear.
- Apple icons need a solid background — iOS adds its own rounded mask and fills transparency with black.
Not updating?
Browsers cache favicons aggressively. Hard-refresh, test in a private window, or add a version query (/favicon.ico?v=2).
Rather have it built?
Pyalm designs and builds fast, conversion-focused websites in Next.js — the same stack these tools run on — with a consistent design system, accessible colours and technical SEO built in.
Related free tools
Favicon Generator | OG Image Generator | Image Resizer | SVG Downloader | All free tools