What is a Favicon?

4 min to read

Favicon stands for “favorite icon,” and it’s a small square image used by websites and brands.

Normally, favicons are 16×16 or 32×32 pixels. You’ll see favicons in different places online, such as:

• Search engine results pages (SERPs)

• (Occasionally) mobile app icons

• Browser tabs and address bars

• Bookmark lists

Pro Tip:
While favicons are small, users will notice if your site doesn't have them. Use favicons for brand recognition and user experience; if you’re in doubt, start with your logo if you don’t know what to create.
Key Takeaways:
  • Favicons are small images that appear at the top of a website tab in your browser.
  • Companies use Favicons for brand recognition and, indirectly, SEO.
  • Favicons can be a custom image or logo, and they should use your brand colors.
Hocoos small logo Answers Website Design

Exploring favicon details 

Key favicon features are: 

  • Small square image: Usually 16×16 or 32×32 pixels, but sometimes, they’ll be different. Favicons are always square, and they should fit wherever you put them. 

  • Imagery: Favicons are typically initials, a company logo, or an image that the audience can recognize is associated with the brand. 

  • Identification: Favicons are designed for users to identify a website, particularly if they have several tabs or bookmarks open. 

  • Identity: Use favicons for brand identity. 

Real-life applications include: 

  • Corporations and organizations: The apple icon associated with Apple, colorful G for Google, and blue “in” square for LinkedIn are examples of favicons. 

  • eCommerce: Online stores will normally use their logo as a favicon. 

What is a favicon used for?

Brands use favicons for branding and user experience. 

  • Brand recognition: As seen in the real-life examples earlier, favicons are a visual cue for users to identify your website. 

  • Usability: Favicons are particularly visible when a user has multiple tabs open, and they can navigate back to your site.

  • Professionalism: Users will notice if you have a default icon; add a favicon for a quick professional touch. 

Where do favicons appear?

You will see favicons in these places online: 

  • Browser tabs: Favicons in browser tabs are designed so that users can click back on your website when they are surfing with several tabs and sites open. 

  • Bookmarks bar: Favicons appear when users bookmark a website; they’ll see the icon in their list. 

  • History: When users check their search history, favicons normally appear. 

  • Search results: Some search engines, like Google, show favicons next to site and article titles. 
Pro Tip:
When making a favicon, test it across different devices and browsers. Make sizing adjustments as needed.

Practical guidance on favicons

Consider the following when designing and using favicons: 

  • Keep it simple: Avoid complex designs because the icons will be small; simplicity will improve brand recognition.

  • Choose recognizable elements: Pick a logo, your initials, or an image associated with your brand.

  • Use high contrast: Test to see if the favicon is visible on Light Mode, Dark Mode, and in other scenarios. 

  • Create multiple sizes: Change sizes and resolutions for different platforms. 

  • Use the .ico format: This is the most common favicon format. 

What are common favicon file formats?

ICO is the main favicon file format, but you can use others if you wish. 

  • PNG: Used with modern browsers as an alternative to ICO. 

  • SVG: Initials for Scalable Vector Graphics. SVGs are used in different sizes. 

  • GIF: Used for animated favicons; some browsers support them. However, they appear as still images in others.
Pro Tip:
Use online favicon generators to convert your image for browsers and devices. Genfavicon and Favicon Generator are some examples.

Why are favicons important?

Consider using favicons for the following reasons: 

  • Branding: Favicons can reinforce brand identity; it’s easy for users to forget your website if you have a default CMS logo. 

  • Professionalism: Having a favicon suggests attention to detail and that you care about the small things, whereas ignoring this may lower credibility. 

Are favicons important for SEO?

Favicons don’t directly impact SEO, but that doesn’t mean you should ignore them altogether. Users may click on your website if they notice a favicon in search results, which can lead to higher search engine rankings; it’s easy to skip past or forget a website without a favicon.

Can a favicon be animated?

Favicons can sometimes be animated via GIF. Some browsers support GIF favicons and others don’t, so it’s worth checking the rules with each one that you use. 

What sizes are needed for a favicon on each browser?

Below is a table with favicon sizes based on the platform that they’re used. 

Size (Pixels)Use Case(s)
16×16Browser tabs and bookmarks 
32×32Tabs (sometimes) and other high-resolution displays 
48×48Desktop icons on Windows computers
64×64iOS and other platforms 
128×128Chrome Web Store and other online stores

Conclusion

Favicons can help brand identity and professionalism, but you should optimize their sizes for the best results. Browsers typically use 32×32, but bigger sizes are required for online stores and other mediums. When creating a favicon, keep it simple and choose colors that are associated with your brand. Think about whether you want to use logos, images, or icons.

READY TO KICK-START YOUR SMALL BUSINESS JOURNEY?

Important Consideration: The information provided by our expert team is designed to give you a general understanding of the website creation process and the features available to you. It's important to note that this information is not a substitute for professional advice tailored to your specific needs and goals.
Read our editorial standards for Answers content.
Our goal is to empower you to create an amazing website. If you have questions or need guidance during the building process, don’t hesitate to Contact us. We're happy to provide assistance and point you in the right direction.