What Is a Favicon? The Complete Guide to Website Icons
A favicon is the tiny icon that represents a website — the little image you see in your browser tab, next to a bookmark, or in your browsing history. The word is short for “favorites icon,” and despite being just a handful of pixels, it’s one of the most recognizable pieces of a brand’s online identity. This guide explains where favicons appear, where they came from, the formats and sizes you need, and how to create and add one to your own site.
Where do favicons appear?
Favicons show up in more places than most people realize. A single small icon is reused across the browser and operating system:
- Browser tabs — the most common spot, helping users tell your tab apart from dozens of others.
- Bookmarks and favorites — displayed next to the saved page name.
- Browsing history — listed beside previously visited pages.
- Address bar — some browsers show it in or near the URL bar.
- Mobile home screens — when a user adds your site to their phone’s home screen, a larger icon is used.
- Search results — Google displays favicons next to results on mobile, so a clean icon can improve click-through.
A brief history of the favicon
The favicon was introduced in 1999 with Internet Explorer 5. Microsoft added support for a file called favicon.ico placed at the root of a website, which would appear next to bookmarks saved in IE’s “Favorites” feature. That’s where the name comes from: “favorites icon” → favicon.
Back then a favicon was a single low-resolution ICO file. Today it has evolved into a whole ecosystem: high-resolution PNG files in multiple sizes, scalable SVG icons, dedicated Apple touch icons for iOS home screens, and a web app manifest that defines icons for progressive web apps. Modern favicons adapt to retina displays, dark mode, and installable web apps.
What favicon formats and sizes do you need?
You don’t need every possible size, but covering the essentials ensures your icon looks crisp everywhere. See our favicon sizes guide for the complete breakdown.
- 16×16 — the classic browser tab and bookmark size.
- 32×32 — sharper tabs and taskbar icons on higher-DPI screens.
- 192×192 — Android home screen and general modern default.
- 512×512 — high-resolution PWA and splash-screen icon.
As for formats: ICO is the legacy format for older browsers, PNG is the modern standard supported everywhere, and SVG stays perfectly sharp at any size. A good favicon package includes all three.
How to create a favicon
You don’t need design software. There are four easy ways to make a favicon with EasyFavicon:
- Emoji favicon — turn any emoji into an icon. Make an emoji favicon.
- Text or letter favicon — use your initials or brand name. Create a text favicon.
- AI-generated favicon — describe an icon and let AI design it. Generate a favicon with AI.
- Convert an existing image — upload your logo and export a full set. Convert an SVG or PNG.
How to add a favicon to your website
Once you have your favicon files, place them in your site’s root or assets folder and reference them in the <head> of your HTML. The basic link tag looks like this:
<link rel="icon" href="/favicon.ico" sizes="any" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />For step-by-step instructions covering every framework and CMS, read our full guide on how to add a favicon.
Favicon best practices
- Keep it simple — a favicon is tiny, so a single shape, letter, or symbol reads best.
- Use high contrast — bold colors and clear edges stay legible at 16×16 pixels.
- Test at small sizes — what looks great at 512×512 can turn into mush at 16×16.
- Provide multiple sizes — include 16, 32, 192, and 512 so every device gets a crisp icon.
- Match your brand — reuse your logo mark or brand colors so the icon is instantly recognizable.
Ready to make your own? Create a free favicon in seconds — pick an emoji, type text, generate with AI, or upload an image, then download a complete package.
Create your favicon →