Info What Is a Favicon? Sizes, Formats & How to Add One
What a favicon is, the sizes and formats browsers expect, and how to add one with a simple HTML link tag — plus why the validator flags a missing one.
A favicon ("favorite icon") is the small square image a browser shows next to a page's title — in the tab bar, in bookmarks, in browser history, and next to search results on mobile. The name dates back to 1999, when Internet Explorer 5 introduced the feature and browsers started automatically requesting a file named favicon.ico from a site's root.
What size should a favicon be?
| Size | Used for |
|---|---|
| 16×16 | Browser tab (standard displays) |
| 32×32 | Browser tab (high-DPI/retina displays), taskbar |
| 48×48 | Windows site shortcuts, some browser UI |
| 180×180 | apple-touch-icon — iOS home screen bookmark |
| 192×192 / 512×512 | Web app manifest icons (Android home screen, PWA install) |
Rather than picking one size, the modern approach bundles several into one .ico file (browsers pick whichever fits) or lists multiple <link> tags with different sizes attributes, shown below.
Favicon.ico vs. PNG vs. SVG
.ico is the original, most universally-supported format — and uniquely, a single .ico file can bundle multiple sizes internally, so the browser or OS picks the best fit rather than stretching one fixed image. Modern browsers also accept plain .png and .svg favicons via <link rel="icon">; SVG has the advantage of scaling perfectly to any size from one file, at the cost of no support in some older browsers. Most real-world sites ship a .ico as the safe fallback alongside PNG/SVG variants for modern browsers.
How to add a favicon to your site
<head>
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
</head>A single <link rel="icon" href="/favicon.ico"> is enough to have a working favicon — the extra SVG and Apple touch icon lines above are common companions, not requirements. The validator flags a document with none of these (nor the older rel="shortcut icon") anywhere in <head>.
Why it matters
Without an explicit favicon link, browsers still request /favicon.ico at the domain root by default — so a missing link tag isn't fatal, but it means you have no control over the icon and, if that default path 404s (as it does on most single-page apps and API-driven sites), the tab shows a blank or generic icon. It's a small detail, but a missing or broken favicon is one of the more visible signs of an unfinished site, showing up in every open tab, bookmark, and browser history entry.
Frequently asked questions
What does "favicon" mean?
It's short for "favorite icon" — the small icon browsers show for a bookmarked (favorited) page, a term coined when Internet Explorer 5 introduced the feature in 1999.
How do I convert a PNG to a favicon?
Use Pingfloat's free PNG to ICO converter — it bundles your image into a proper multi-size .ico file (16, 32, 48, and 256px) entirely in your browser, no upload required.
Does a missing favicon hurt SEO?
Not directly as a ranking factor, but Google does display a page's favicon next to its result on mobile search — a missing or broken one makes a listing look less polished next to competitors that have one.
What format should a favicon be?
A .ico file is the safest baseline for broad compatibility, but modern browsers also support .png and .svg via rel="icon". Multiple <link rel="icon"> tags with different sizes/formats is the current best practice.
Is favicon.ico still necessary if I use PNG/SVG icons?
Not strictly, but it's a safe fallback — browsers have requested /favicon.ico by default since 1999, and some older tools and browsers only look for that exact file, ignoring <link rel="icon"> entirely.