Favicons in 2026: Every Size You Need and How to Add Them
Which favicon sizes still matter, why favicon.ico refuses to die, and how to install a full icon set in five lines of HTML.
I once shipped a site with a single 16-pixel favicon and figured that was that. Then someone bookmarked it on an iPhone, and the home-screen icon came out as a blurry grey square. That’s the catch with favicons: the little 16×16 in the browser tab is the part you see every day, but the rest of the set only shows up when you’re not looking.
Why favicon.ico won’t die
The .ico format goes back to Internet Explorer 5 in 1999, and browsers have been requesting /favicon.ico from the site root ever since, whether or not you asked them to. Pull up any server log and you’ll see the hits.
That’s why a modern icon set still ships an .ico file. PNG favicons are sharper and simpler to make, but plenty of clients still look for favicon.ico first and give up if it’s missing: older browsers, RSS readers, link-preview bots, a fair number of bookmarking tools. Including one costs nothing and catches the stragglers. The Favicon Generator packs 16, 32, and 48-pixel versions into a single .ico so it stays crisp wherever it turns up.
The sizes that actually matter
You don’t need forty icons. You need a handful, each doing one job:
- 16×16 and 32×32 — the browser tab and the bookmark bar. Legibility lives or dies here.
- 48×48 — Google shows a favicon next to your result in mobile search, and it wants something at least 48px (or a multiple of it) at a stable URL.
- 180×180 — Apple’s touch icon, used when someone adds your page to their iPhone home screen.
- 192×192 and 512×512 — Android and installable web apps read these from the manifest. The 512 also doubles as a splash image.
Skip the sizes nobody requests and you’ve still covered every real surface.
Text or a logo — both work
Not everyone has a logo ready. If you’re launching a side project at 11pm, two letters on a coloured background beats a broken icon any day. Type your initials, pick a background colour, choose square, rounded, or circle corners, and the tool draws each size to a canvas right in the page. Already have artwork? Drop a PNG or SVG in instead and it gets scaled down to every size for you.
Either way, nothing uploads. The rendering happens on your own machine, which is also why it keeps working with the Wi-Fi switched off.
Installing the set
Unzip the download into your site’s root folder, the same directory as your homepage, and paste five lines into your <head>:
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">One warning worth its own paragraph: browsers cache favicons hard. If the old icon lingers after you deploy, it probably isn’t broken. Do a hard refresh, or open the icon URL directly to check it’s really live.
Two letters and a colour, or a logo you already have — either one gets you a full set in a single download. Open the Favicon Generator and grab yours.