Table of Contents
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.
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.
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.
- User Experience: Site visitors use favicons for navigation.
- 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×16 | Browser tabs and bookmarks |
| 32×32 | Tabs (sometimes) and other high-resolution displays |
| 48×48 | Desktop icons on Windows computers |
| 64×64 | iOS and other platforms |
| 128×128 | Chrome 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.
