What Is a Favicon?
A favicon (short for “favorite icon”) is a small square icon associated with a website. It appears in browser tabs, bookmark lists, browser history, search engine results, and even on mobile home screens when someone saves your site as a shortcut.
You have seen them thousands of times without thinking about it. That tiny Google “G” in your browser tab, the blue Facebook “f,” or the bird icon formerly used by Twitter. These are all favicons, and they serve as a visual shorthand that helps users instantly recognize a website.
Originally introduced by Internet Explorer 5 in 1999, the favicon was designed to appear next to bookmarked pages (then called “favorites” in IE). The name stuck, and today every modern browser and platform supports favicons in one way or another.
Why Does Your Website Need a Favicon?
A missing favicon might seem like a minor oversight, but it can have a noticeable impact on how users perceive your website. Here is why favicons matter:
1. Brand Recognition
When a user has 15 tabs open, the favicon is often the only visible identifier of your site. Without one, your tab shows a generic browser icon or a blank space, making it easy to forget or close.
2. User Experience
Favicons help people navigate between open tabs quickly. They reduce cognitive load by providing a visual cue instead of requiring users to read truncated page titles.
3. Professionalism and Trust
A website without a favicon looks unfinished. It signals to visitors that the site owner may not pay attention to details, which can subtly undermine trust.
4. Search Engine Visibility
Google displays favicons next to website names in mobile search results. A well-designed favicon makes your listing stand out and can improve your click-through rate.
5. Mobile and PWA Support
When users add your website to their phone’s home screen, your favicon (or its larger variant, the touch icon) is what appears as the app icon. Without one, users see a generic or screenshot-based placeholder.
Where Do Favicons Appear?
Favicons show up in more places than most people realize:
- Browser tabs next to the page title
- Bookmark bars and bookmark managers
- Browser history lists
- Google search results (especially on mobile)
- Browser address bars
- Mobile home screens when a site is saved as a shortcut
- Progressive Web Apps (PWAs) as the application icon
- Tab overview screens on mobile browsers
- RSS feed readers and social media link previews
Is a Favicon the Same as a Logo?
Not exactly. While many websites use a simplified version of their logo as a favicon, the two serve different purposes. A logo is designed for larger formats like headers, business cards, and signage. A favicon must be recognizable at extremely small sizes, sometimes as small as 16×16 pixels.
This means a detailed logo often does not work well as a favicon. Many brands use just their initials, a single letter, or an abstract symbol from their logo for the favicon. The goal is instant recognition at tiny sizes.
Favicon Sizes: What You Need to Know
The classic favicon size is 16×16 pixels, but modern browsers and devices require multiple sizes for optimal display. Here is a complete breakdown:
| Size (px) | Use Case |
|---|---|
| 16×16 | Browser tabs, address bar |
| 32×32 | Taskbar shortcut (Windows), Retina browser tabs |
| 48×48 | Windows site icons |
| 96×96 | Google TV, some desktop shortcuts |
| 120×120 | iPhone Retina (older models) |
| 152×152 | iPad Retina |
| 180×180 | iPhone (current models) – Apple Touch Icon |
| 192×192 | Android Chrome, PWA icon |
| 512×512 | PWA splash screen, Google search results |
Pro tip: Start with a high-resolution source image (at least 512×512 pixels) and scale down. This gives you the best quality across all sizes.
Favicon File Formats Explained
Not all image formats work equally well for favicons. Here is what you should know about each option:
| Format | Transparency | Browser Support | Best For |
|---|---|---|---|
| .ico | Yes | Universal (including legacy) | Maximum compatibility |
| .png | Yes | All modern browsers | Sharp, clean icons |
| .svg | Yes | Most modern browsers | Scalable, perfect for all sizes |
| .gif | Limited | Most browsers (no animation) | Not recommended |
| .jpg | No | Most browsers | Not recommended |
The Recommended Approach in 2026
The modern best practice is to use a combination:
- An SVG favicon for modern browsers (scales perfectly to any size)
- A 32×32 .ico file as a fallback for older browsers
- A 180×180 PNG for Apple Touch Icon
- 192×192 and 512×512 PNGs referenced in a web app manifest for Android and PWAs
How to Add a Favicon to Your Website
Adding a favicon involves placing your icon files on your server and referencing them in the HTML <head> section of your pages.
Step 1: Create Your Favicon Files
You can create favicons using design tools like Figma, Adobe Illustrator, or Canva. Alternatively, use a free online favicon generator to convert an existing image into the correct sizes and formats.
Step 2: Add the HTML Code
Place the following code inside the <head> tag of your HTML:
<!-- Standard favicon -->
<link rel="icon" href="/favicon.ico" sizes="32x32">
<!-- SVG favicon for modern browsers -->
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<!-- Apple Touch Icon -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<!-- Web App Manifest (for Android and PWAs) -->
<link rel="manifest" href="/site.webmanifest">
Step 3: Create a Web App Manifest
For Android devices and Progressive Web Apps, create a file called site.webmanifest in your root directory:
{
"name": "Your Website Name",
"short_name": "YourSite",
"icons": [
{
"src": "/icon-192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/icon-512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"theme_color": "#ffffff",
"background_color": "#ffffff"
}
Step 4: Upload and Test
Upload all favicon files to your website’s root directory. Then open your site in multiple browsers and check that the icon appears correctly in the tab.
How to Add a Favicon in WordPress
If you are using WordPress, the process is even simpler:
- Go to Appearance > Customize in your WordPress dashboard
- Click on Site Identity
- Find the Site Icon section
- Upload a square image that is at least 512×512 pixels
- Click Publish
WordPress will automatically generate all the necessary sizes for you.
How to Add a Favicon in Popular Website Builders
| Platform | Where to Find It |
|---|---|
| WordPress | Appearance > Customize > Site Identity > Site Icon |
| Wix | Settings > Website Settings > Favicon |
| Squarespace | Design > Browser Icon (Favicon) |
| Shopify | Online Store > Themes > Customize > Theme Settings > Favicon |
| Webflow | Project Settings > General > Favicon |
Favicon Design Best Practices
Creating an effective favicon requires thinking differently than you would for a full-size logo. Here are the key principles:
- Keep it simple. At 16×16 pixels, fine details are invisible. Use bold shapes, single letters, or simple symbols.
- Use high contrast. Your icon needs to stand out against both light and dark browser themes. Test it on both backgrounds.
- Stick to your brand colors. Consistency with your website’s color palette helps with recognition.
- Avoid text (unless it is a single letter). Words are unreadable at favicon sizes.
- Use a transparent background. This ensures the icon looks clean in any context. PNG and SVG both support transparency.
- Test at actual size. Zoom out and view your favicon at 16×16 pixels before finalizing. What looks great at 512px might be a blurry mess when scaled down.
- Consider dark mode. Many users browse with dark mode enabled. An SVG favicon can include a CSS media query to switch colors automatically.
Dark Mode SVG Favicon Example
With an SVG favicon, you can make it adapt to dark mode automatically:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<style>
circle { fill: #333333; }
@media (prefers-color-scheme: dark) {
circle { fill: #ffffff; }
}
</style>
<circle cx="50" cy="50" r="45"/>
</svg>
Common Favicon Mistakes to Avoid
- Not having a favicon at all. This is the biggest mistake. It makes your site look unprofessional and causes a 404 error in your server logs every time a browser requests the missing file.
- Using a full logo with too much detail. The details will turn into an unrecognizable blur at small sizes.
- Only providing one size. Different devices need different sizes. Providing only a 16×16 icon means it will look pixelated on high-resolution screens and mobile devices.
- Using a non-square image. Favicons must be square. A rectangular image will be cropped or distorted.
- Forgetting the Apple Touch Icon. Without it, Apple devices will generate an ugly screenshot thumbnail when users save your site to their home screen.
- Using a JPEG with a white background. The white box around your icon looks amateurish. Always use formats that support transparency.
How Google Uses Favicons in Search Results
Since 2019, Google has displayed favicons alongside website names in mobile search results, and this feature has expanded to desktop results as well. Having an attractive, recognizable favicon can genuinely improve your click-through rate in search.
Google has specific guidelines for favicons in search results:
- The favicon file must be crawlable by Googlebot (not blocked by robots.txt)
- It should visually represent your brand
- It must be a multiple of 48px (for example, 48×48, 96×96, or 144×144)
- Google may choose not to display favicons it considers inappropriate or low quality
- The favicon URL should remain stable and not change frequently
If Google does not find a suitable favicon, it may display a generic globe icon next to your site, which makes your listing blend in with everything else on the page.
Favicon Examples: What Good Favicons Look Like
Some of the most effective favicons on the web follow the same principles:
- Google: A multicolored uppercase “G” on a transparent background
- GitHub: The Octocat silhouette, simplified to work at any size
- Spotify: The green circle with sound waves
- Netflix: A bold red “N”
- Slack: The four-color hashtag symbol
Notice the pattern: bold colors, simple shapes, and zero unnecessary detail. Every one of these is instantly recognizable even at 16 pixels.
Frequently Asked Questions About Favicons
What is a favicon used for?
A favicon is used to visually identify a website in browser tabs, bookmarks, browsing history, and search engine results. It helps users quickly recognize and navigate to your site, especially when multiple tabs are open.
Is a favicon the same as a logo?
Not exactly. A logo is your full brand mark designed for various sizes and contexts. A favicon is a simplified, small-scale version of your visual identity, optimized to be recognizable at sizes as small as 16×16 pixels. Many brands use a simplified version of their logo, a single letter, or a distinct symbol as their favicon.
What is the best size for a favicon?
There is no single best size. You should provide multiple sizes for different contexts. At a minimum, include a 32×32 ICO or PNG for browsers, a 180×180 PNG for Apple devices, and 192×192 plus 512×512 PNGs for Android and PWAs. Starting with a 512×512 source file ensures quality at all sizes.
What is the best file format for a favicon?
For maximum compatibility, use a combination of an SVG file for modern browsers, an ICO file for legacy support, and PNG files for Apple and Android devices. SVG is the most flexible since it scales perfectly to any resolution.
How do I generate a favicon?
You can create a favicon using design tools like Figma, Canva, or Adobe Illustrator. Alternatively, online favicon generators can convert any image into the correct sizes and formats. Simply upload a square image (ideally 512×512 or larger) and download the generated files.
What is a favicon.ico file?
Favicon.ico is the traditional file format for favicons. The ICO format can contain multiple image sizes within a single file, which made it ideal when browsers only looked for one specific file at the root of a website. While still useful for legacy browser support, modern best practices recommend also including PNG and SVG versions.
Can a favicon be animated?
Technically, some browsers have supported animated GIF favicons in the past, but this is not recommended. Most modern browsers either do not support animated favicons or strip the animation. It can also be distracting and unprofessional.
Do favicons affect SEO?
Favicons do not directly impact search engine rankings. However, they do appear in Google search results, and a recognizable favicon can improve your click-through rate. A missing or generic favicon can make your search listing look less trustworthy compared to competitors that have branded favicons.
Final Thoughts
A favicon is one of the smallest design elements on your website, but its impact on brand recognition and user experience is outsized. It takes just a few minutes to create and implement, yet many websites still overlook it.
Whether you are building a new site or improving an existing one, take the time to create a proper favicon in all the recommended sizes and formats. Your visitors, your brand, and even your search engine listings will benefit from it.
Need help designing a favicon or implementing one across your website? The team at CSSMates is here to help you get every detail right.