Favicon Sizes Guide: 16×16 to 512×512 & HTML Tags (2026)
📅 August 2026⏱ 8 min read✍️ ToolLoom Editorial
One tiny square icon, five different sizes, three different platforms each with their own expectations. Here's exactly which favicon sizes you need in 2026, the HTML tags that reference them, and why your new favicon sometimes refuses to show up.
A single 16×16 favicon.ico used to be the entire story. Today, a favicon needs to look correct in a browser tab, as a bookmarked icon, as an iOS home screen shortcut, and as an Android app-like icon — and each of those contexts expects a differently sized image for the sharpest possible result.
🌐
Browser Tabs
16×16 and 32×32 for crisp rendering at tiny sizes.
🍎
iOS Home Screen
180×180 Apple touch icon for "Add to Home Screen."
🤖
Android Chrome
192×192 and 512×512 for home screen shortcuts and web app manifests.
📦
One Upload, All Sizes
A good favicon generator produces the full set from a single source image.
Every Favicon Size You Need — The Full Matrix
Size
Purpose
Platform
16×16
Browser tab icon
All desktop browsers
32×32
Bookmarks bar, taskbar
All desktop browsers
180×180
Apple touch icon
iOS home screen
192×192
Home screen icon
Android Chrome
512×512
Splash screen, app manifest
Android Chrome, PWA
💡
Covering these five sizes handles the overwhelming majority of devices and browsers in current use. Some very specific contexts (Windows tile icons, certain older browsers) have additional niche sizes, but they're increasingly rare to need in practice.
The HTML Link Tags, Explained
Each favicon size needs a corresponding <link> tag inside your page's <head> section so browsers know which file to use for which purpose.
The rel="apple-touch-icon" tag is specifically what iOS looks for when a user adds your site to their home screen — without it, iOS may fall back to taking an automatic screenshot of your page instead, which rarely looks good as an icon.
Do You Still Need favicon.ico?
Not strictly. Modern browsers fully support PNG favicons referenced through link tags, so a legacy .ico file isn't required for current browsers to display your icon correctly.
⚠️
That said, some older browsers and certain automated tools or crawlers still default to checking for a file at /favicon.ico at the root regardless of what your HTML specifies. Many sites keep one as a fallback alongside their PNG set — it costs little to include and covers an edge case some sites still encounter.
Why Favicons Must Be Square
Every favicon context — browser tabs, home screen icons, app manifests — expects a perfectly square image. A landscape or portrait source image needs to be cropped to a square before resizing down to each target size.
💡
Automatic centered cropping works well for a logo that's already centered in its source image, but can cut off content sitting near the edges of a wide banner-style image. Cropping your own source to a tight square beforehand gives you more precise control over exactly what's kept.
Designing an Icon That Survives Shrinking
A favicon is often viewed at just 16×16 pixels — a few dozen total pixels of information. Detailed logos with thin lines, subtle gradients, or small text lose all their distinguishing detail at that size and can blur into an unrecognisable smudge.
Use a simplified mark, not the full logo — many brands use a single letter, symbol, or simplified icon specifically for favicons
Favor bold shapes with strong contrast — thin strokes disappear at 16×16
Avoid small text entirely — text becomes illegible well before it becomes recognisable
Test at actual size — preview your generated 16×16 icon at 100% zoom, not zoomed in, before finalising
Why Your New Favicon Isn't Showing Up
1
Hard refresh the page
Ctrl+Shift+R (Windows/Linux) or Cmd+Shift+R (Mac) forces a bypass of the normal cache.
2
Clear browser cache specifically
Favicons are cached unusually aggressively — a normal refresh often isn't enough.
3
Try a private/incognito window
This confirms whether the new favicon is actually live on the server, separate from your browser's local cache.
4
Verify the file actually deployed
Visit the favicon URL directly (e.g., yoursite.com/favicon-32x32.png) to confirm the new file is really there.
Common Favicon Mistakes
Using a full detailed logo instead of a simplified mark — becomes an unrecognisable blur at 16×16
Forgetting the Apple touch icon tag — iOS may fall back to an unattractive auto-screenshot without it
Uploading only one size and letting browsers scale it — produces blurry results compared to purpose-generated sizes
Assuming a cache issue means deployment failed — always verify the file itself before troubleshooting further
Not testing on both iOS and Android — each platform has its own expectations and can fail independently
🖼️ Generate All Favicon Sizes — Free
Upload one image, get every size and the ready-to-paste HTML tags — all processed in your browser.
At minimum, generate 16×16 and 32×32 pixel PNGs for browser tabs and bookmarks, a 180×180 pixel icon for Apple touch (iOS home screen), and 192×192 plus 512×512 pixel icons for Android Chrome home screen shortcuts and web app manifests. Covering these five sizes handles the vast majority of devices and browsers in current use.
Not strictly, since modern browsers fully support PNG favicons referenced through link tags. However, some older browsers and certain automated tools or crawlers still default to checking for a file at /favicon.ico regardless of what's specified in the HTML, so many sites keep one as a fallback alongside their PNG icon set for broader compatibility.
Detailed logos with thin lines, gradients, or small text tend to lose all their distinguishing detail once scaled down to 16×16 pixels, which is roughly the size of a few dozen pixels total. Simple, bold shapes with strong contrast and minimal fine detail survive this scaling far better — this is why many brands use a simplified icon mark specifically for their favicon rather than their full logo.
Browsers cache favicons unusually aggressively, sometimes holding onto the old icon even after a normal page refresh. Try a hard refresh (Ctrl+Shift+R on Windows/Linux or Cmd+Shift+R on Mac), clear the browser's cache specifically, or open the site in a private/incognito window to confirm whether the new favicon is actually live on the server before assuming there's a deployment problem.
Upload the generated image files to your website's root directory so they're accessible at paths like yoursite.com/favicon-32x32.png. Then add the corresponding <link> tags inside the <head> section of your HTML — every page that should show the favicon needs these tags present, though most sites add them once to a shared template or layout file.
Since favicons must always be square, a landscape or portrait source image needs to be cropped before resizing. Most favicon generation tools automatically crop to a centered square first, which works well for centered logos but can cut off content that sits near the edges of a wide or tall image — cropping your own source image to a tight square beforehand gives you more control over exactly what's kept.
About ToolLoom: We build free tools for Indian students, professionals and creators. All image processing happens instantly in your browser via the HTML5 Canvas API — your image is never uploaded or stored. Found an error? Email contact@toolloom.in