--- title: What is a Favicon? Complete Guide description: A favicon is the small icon a browser shows for your site in tabs, bookmarks and history. What it is, the sizes and formats you need, and how to add one. canonical: https://favicontools.com/glossary/what-is-favicon --- # What is a Favicon? Complete Guide A favicon is the small square icon a browser displays for your site: in the tab, next to a bookmark, in history, and on a phone home screen. It is a real image file served from your domain and referenced from the page head, usually supplied in several sizes so each surface can pick the one it needs. ## Where a favicon actually appears The browser tab is the obvious one, but it is the least demanding. Bookmarks bars, history lists, browser start pages, search results, link previews in chat apps, and phone home screens all reach for an icon, and several of them want a much larger file than the tab does. This is why a favicon is really a set rather than a single file. A 16 pixel tab icon and a 180 pixel iOS home screen icon are different images with different design constraints, even when they come from the same mark. ## The same mark at the sizes that matter - 16x16 - 32x32 - 48x48 - 96x96 - 180x180 Rendered at true pixel dimensions, not scaled for display. Detail that reads fine at 180px disappears entirely by 16px. > **Design at the bottom, not the top:** Draw the mark so it works at 16px first, then scale up. Starting from a detailed logo and shrinking it is how you end up with a grey smudge in the tab. ## Favicon FAQ ### Is a favicon required? No standard requires one, but browsers will request /favicon.ico regardless, and a missing icon shows as a blank or generic placeholder. On a new product that reads as unfinished. ### What is the difference between a favicon and an app icon? A favicon identifies your site inside a browser; an app icon represents an installed app on a home screen or launcher. In practice they come from the same artwork and ship together, which is why generators export both.