What Is a Favicon? Definition, Uses & How to Make One
By AZ Utils Editorial · · 7 min read
It's the tiny image in your browser tab, your bookmarks bar, and your phone's home screen — and it's doing more brand work than almost anything else on your site. But what is a favicon, exactly, and why does it matter so much? This guide explains what a favicon is, where it appears, the formats and sizes involved, and how to create one.
It's written for beginners, bloggers, small business owners and anyone building a credible web presence.
Key Concepts: The Favicon Defined
A favicon ("favorite icon") is the small image that represents your website across browser and device interfaces. It started life as a single 16×16 pixel favicon.ico file and has grown into a small family of icons in different sizes for different contexts.
Where a favicon appears
- Browser tabs
- Bookmarks and favorites lists
- Browser history and address-bar suggestions
- Mobile home-screen icons (when a site is "added to home screen")
- Sometimes in search results on mobile
In short: A favicon is the small icon representing your website in browser tabs, bookmarks and on devices. Modern sites use a set of favicon sizes and formats generated from one source image.
Why Favicons Matter
- Branding — instant recognition among dozens of open tabs.
- Trust & professionalism — a missing favicon shows a generic blank icon that looks unfinished.
- Usability — helps users find your tab and bookmarks quickly.
Formats & Sizes (At a Glance)
- ICO — the classic multi-size
favicon.ico. - PNG — used for most modern sizes (16, 32, 180, 192, 512).
- SVG — an optional scalable favicon for crisp display at any size.
For the full breakdown, see Favicon Sizes Guide.
Step-by-Step: Creating a Favicon
- Start with a square image, ideally 512×512 px with a transparent background.
- Generate the full icon set with the Favicon Generator.
- Add the provided HTML to your site's
<head>— see How to Add Favicon in HTML.
Try Our Free Favicon Generator
Turn one image into a complete favicon set with our free Favicon Generator — all the sizes and the HTML, no design software needed.
- ✅ ICO + all PNG sizes from one image
- ✅ iOS and Android icons included
- ✅ Copy-paste HTML provided
- ✅ Free, runs in your browser
Real-World Examples
Example 1 — A blog
A blogger uploads their logo, generates a favicon set, and every tab now shows a branded icon instead of a blank page sheet.
Example 2 — A simplified mark
A business with a detailed logo uses just its initial as the favicon, because fine detail vanishes at 16px.
Example 3 — Home-screen icon
A user adds a web app to their phone; the 180px apple-touch-icon ensures a crisp icon rather than a blurry screenshot.
Common Mistakes to Avoid
- Having no favicon at all, leaving a generic icon.
- Using a detailed image that's unreadable at small sizes.
- Providing only one size.
- Using a non-square source that gets cropped.
Best Practices
- Use a simple, bold mark that reads at 16px.
- Start from a 512×512 square image.
- Generate the full set, not just one icon.
- Keep it consistent with your brand. See Favicon Best Practices.
Frequently Asked Questions
What is a favicon?
A favicon is the small icon that represents your website in browser tabs, bookmarks, history and on device home screens. Modern sites use a set of favicon sizes generated from one source image.
Why is a favicon important?
It provides instant brand recognition among many open tabs, makes a site look professional and trustworthy, and helps users find your tab or bookmark quickly.
What format is a favicon?
Traditionally ICO for favicon.ico, with PNG used for modern sizes and optionally SVG for a scalable icon. A generator outputs all of these from one image.
What size should a favicon be?
Provide several sizes — 16x16 and 32x32 for tabs, 180x180 for iOS, and 192x192 and 512x512 for Android — generated from a 512x512 source.
How do I make a favicon?
Upload a square image to a favicon generator, generate the full set of sizes and formats, and add the provided HTML link tags to your site's head.
Conclusion
A favicon is small but mighty — the most-seen piece of your brand across browsers and devices. Create one from a clean, square source image, generate the full modern set, and add it to your site. Your pages will look polished everywhere from tabs to home screens.
Related Resources
- Favicon Generator: Complete Guide — the full how-to
- Favicon Sizes Guide — every size you need
- How to Add Favicon in HTML — the markup
- Favicon Best Practices — design & technical tips
