What Is a Favicon? The Tiny Icon Explained
By Shihab Mia August 1, 2026 7 min read
Quick answer
A favicon (short for "favorite icon") is the small square image shown in a browser tab, bookmarks list, and history next to a page's title. The classic format is .ico, which can pack several sizes like 16x16, 32x32, and 48x48 into one file so it looks crisp everywhere. Modern browsers also accept .png and .svg favicons, declared with a <link rel="icon"> tag in the page <head>. iPhones and iPads separately look for an apple-touch-icon, usually a 180x180 PNG, for home-screen bookmarks.
If you have ever glanced at a row of open browser tabs and picked one out purely by its tiny logo, you were reading a favicon. It is one of the oldest pieces of web design still in daily use, dating back to Internet Explorer 5 in 1999, and it still matters today for branding, usability, and even a small trust signal in search results.
Where does a favicon actually show up?
A favicon appears in more places than most people notice. It sits in the browser tab next to the page title, in the address bar on some browsers, next to bookmarks and favorites, in browser history and autocomplete suggestions, and as the icon when a page is pinned to a taskbar or saved to a phone's home screen. Some search engines, including Google, also show a small version of it next to organic search results on mobile, which makes it a minor but real part of how a brand looks in the wild.
- Browser tabs, so users can spot your site among a dozen open tabs.
- Bookmarks and the "favorites" bar in every major browser.
- Browser history and the address bar autocomplete dropdown.
- Home screen icons when a page is added to a mobile device.
- Search engine results pages, next to the page title on mobile search.
What file formats work as a favicon?
The original and still most universally supported format is .ico. An ICO file is a container that can hold multiple image resolutions in one file, so a single favicon.ico might include a 16x16, a 32x32, and a 48x48 version, letting the browser pick whichever fits the context without blurring or stretching. That is the main reason .ico has stuck around for over two decades even though it looks like an old-fashioned choice.
Modern browsers have widened what they accept. A plain .png favicon works in every current browser and is simpler to create than an ICO, though you typically only get one resolution per file unless you declare several link tags. An .svg favicon is vector-based, so it scales to any size without quality loss and can even respond to dark mode with CSS, though very old browsers do not support it. For most sites today, a small set of PNGs plus one ICO for legacy support covers everyone.
Favicon file formats compared
| Format | Multi-resolution? | Browser support | Best for |
|---|---|---|---|
| .ico | Yes, multiple sizes in one file | Universal, including very old browsers | Maximum compatibility, the safe default |
| .png | One size per file (use several link tags for more) | All modern browsers | Simple setup, crisp on modern screens |
| .svg | Scales infinitely, no fixed size | Modern browsers only | Sharp icons, dark mode aware favicons |
| apple-touch-icon (PNG) | Single 180x180 size | iOS and iPadOS home screen only | Home screen bookmarks on Apple devices |
Converting between these formats is one of the most common favicon tasks. If a designer handed you a PNG logo, you can turn it into a proper multi-size ICO with a PNG to ICO converter in a few seconds, no design software required.
🖼 Try the free tool PNG to ICO Converter Convert a PNG to a working ICO file free, right in your browser. Pick 16, 32, 48px sizes, then download a real multi-size favicon.ico, no upload needed.What size should a favicon be?
There is no single required size because a favicon gets scaled down for different contexts, but a small set of standard sizes covers nearly every use case. The most common are 16x16 and 32x32 pixels for browser tabs and bookmarks, 48x48 for Windows site shortcuts, and 180x180 for the Apple touch icon. Many teams also add a 192x192 or 512x512 PNG for Android home screen icons and progressive web apps.
- 16x16 px, the classic browser tab size.
- 32x32 px, used for sharper tabs and taskbar shortcuts.
- 48x48 px, used by Windows for desktop site icons.
- 180x180 px, the Apple touch icon for iPhone and iPad home screens.
- 192x192 and 512x512 px, used for Android and progressive web app icons.
Good to know
You do not need to hand-draw every one of these sizes. Upload one square source image, typically 512x512 or larger, to a favicon generator and it can output the full set, including the ICO file and the apple-touch-icon, at once.
How do you add a favicon to a website?
A favicon needs two things: the image file sitting somewhere on your server, and a line in the page's <head> telling the browser where to find it. The simplest legacy method is just naming the file favicon.ico and placing it in your site's root folder, since browsers check that location automatically even without a link tag. But explicit <link> tags are the modern, reliable approach because they work regardless of file location and let you serve different sizes and formats to different devices.
A typical modern setup in the <head> looks like this: a standard icon link pointing to a PNG or ICO, a second sizes-specific link for a larger PNG, and a separate apple-touch-icon link for Apple devices. Browsers read all of them and pick the best match for the context, whether that is a compact tab or a home screen shortcut.
What about Apple and Android home screen icons?
A regular favicon is not enough for phones. When someone adds your site to their iPhone or iPad home screen, iOS looks specifically for an apple-touch-icon, typically a 180x180 PNG referenced with <link rel="apple-touch-icon" href="/apple-touch-icon.png">. Without one, iOS falls back to taking a screenshot of the page, which usually looks messy as a home screen icon. Android is more flexible and can use icons defined in a web app manifest file, often at 192x192 and 512x512, alongside the standard favicon tags.
Because Apple's icon has no transparency support and gets rounded corners applied automatically by iOS, it is best designed as a solid-background square rather than a shape with transparent edges, unlike a typical favicon which often uses transparency. If you already have a square logo, an image to ICO converter or a dedicated favicon generator can produce both the transparent favicon and the solid apple-touch-icon from the same source file.
🖼️ Try the free tool Image to ICO Converter Free image to ICO converter: turn PNG, JPG, WebP or SVG into a real multi-size favicon.ico plus 16, 32, 48px PNG icons, fully private in your browser.Common mistakes with favicons
Most favicon problems are small and easy to avoid once you know what to check. A favicon that looks fine at 512x512 in a design tool can turn into an unreadable smudge at 16x16, since fine detail and thin lines disappear at that size. Testing your icon at actual tab size, not just zoomed in on a screen, catches this early.
- Using a detailed logo with small text or fine lines that turns to mush at 16x16 pixels.
- Forgetting the apple-touch-icon, so iOS falls back to an ugly auto-generated screenshot icon.
- Only uploading one size and expecting browsers to scale it well in every context.
- Caching issues where browsers keep showing an old favicon after you upload a new one, often needing a hard refresh or a changed file name to clear.
- Placing the favicon file somewhere the
<link>tag does not actually point to, so the browser silently fails to load it.
Does a favicon affect SEO?
A favicon is not a direct ranking factor, but it plays a small supporting role in how your site is perceived and used. Google has confirmed it can display favicons next to search results on mobile, and a missing or broken one can make a listing look less polished next to competitors that have one. More practically, a recognizable favicon helps returning visitors spot your site faster among their open tabs and bookmarks, which supports the kind of repeat engagement search engines do reward indirectly.
If branding consistency across your site matters to you, it is worth pairing your favicon work with a look at your brand colors. A hex to RGB converter makes it easy to keep your favicon's palette matching the rest of your site exactly.
Favicon checklist before launch
A quick pre-launch check saves the awkward experience of noticing a broken or generic icon after a site has already gone live.
- Start from a square source image, ideally 512x512 pixels or larger.
- Generate the standard set: 16x16, 32x32, 48x48, and a multi-size .ico.
- Create a 180x180 apple-touch-icon with a solid background, no transparency.
- Add the correct <link> tags in your page <head> for each file.
- View your site in an actual browser tab and on a phone home screen to confirm it reads clearly at small sizes.
Frequently asked questions
What is a favicon in simple terms?
A favicon is the small square icon shown next to a website's name in a browser tab, bookmark, or history entry. It is short for "favorite icon" and helps users visually identify a site among many open tabs. It is usually the same logo or symbol as the site's main branding, just shrunk down.
What file format should a favicon be?
.ico is the safest choice because it can bundle multiple sizes like 16x16, 32x32, and 48x48 in one file and works in every browser, including very old ones. Modern sites often add .png or .svg versions too, since current browsers accept both and .svg scales cleanly to any size.
What size should a favicon be?
The most common sizes are 16x16 and 32x32 pixels for browser tabs, 48x48 for Windows shortcuts, and 180x180 for the Apple touch icon used on iPhone and iPad home screens. Many sites also include 192x192 and 512x512 versions for Android and progressive web apps.
How do I add a favicon to my website?
Upload the icon file to your server, then add a link tag such as <link rel="icon" href="/favicon.ico"> inside the page's <head> section. For Apple devices, add a separate <link rel="apple-touch-icon" href="/apple-touch-icon.png"> pointing to a 180x180 PNG.
Why does my favicon look blurry or wrong?
Blurry favicons usually come from scaling one large image down without a properly sized version for small displays, or from browser caching showing an old icon after an update. Generate dedicated 16x16 and 32x32 versions and, if a new icon is not showing, try a hard refresh or rename the file.
Is a favicon required for a website to work?
No, a site works fine without one, but most browsers show a generic blank page icon in its place, which looks unfinished and makes the tab harder to spot. Adding a favicon takes only a few minutes and is considered a basic part of a polished, professional website.