Have you ever noticed those tiny images on your browser tabs or bookmark bar? They actually serve a purpose that is pretty helpful. Favicons make it easy to recognize and locate websites based on branding recognition.
What is a Favicon?
A favicon is a tiny bit of branding that lives on the web browser tab or bookmark list. These 16×16 pixel images allow users to quickly identify which tab belongs to different websites. At the same time, some brands will use their logo—or a version of it. A favicon is not necessarily the same thing. Favicons are small, low-resolution images that require a simplistic design.
When did Favicons Become a Thing?
If we go all the way back in technology time to 1999, Internet Explorer wanted to provide a way for users to recognize individual web pages among a list of bookmarked pages. They knew that visual imagery was more powerful than text, and they used that to create what is known today as the favicon. It did not take long for companies to notice a good idea and recognize the potential branding power. Today, nearly every major brand has designated a unique favicon to represent their brand, with few websites still using the generic web page symbol.
Related: Top 20 Marketing Analytics Books of 2020
Where Do You See Favicons?
Favicon images are displayed in the top left corner of web page tabs or immediately left of any bookmarked pages on the bookmarks bar in the browser. These images also appear in lists of bookmarks or browsing history, also to the immediate left of the web page name or address.
Why Are Favicons Important?
Favicons are important for the user experience. These little images act as an extension of your branding to help users identify your website. And since most websites utilize them, favicons are an indicator of a legitimate website.
Favicons and SEO
Having a favicon (or not) is not going to directly hurt or improve your search engine rankings. But these little images do indirectly impact search engine ranking by adding to the overall usability and branding on your website.
User-friendly Websites
Having a well-designed favicon helps users save time when looking for your website in their open tabs, bookmarks, and search history. Any element of web design that improves the user experience contributes to positive SEO effects, and therefore, although seemingly insignificant, having a favicon can indirectly improve SEO.
Branding and Visibility
Making your brand visible by any means necessary is the foundation of marketing. Favicon images are a well-integrated opportunity that is now used across many browsers and recognized by nearly all users. Skipping this opportunity to put your logo (or a version of it) in plain sight is like leaving money on the table.
Bookmarks
While lesser-known, it is believed that Google’s Chrome browser may filter out bookmarks that don’t use favicons. Considering it is a minimal investment, why take the chance of missing out on search engine traffic over something silly like a favicon.
Related: The Essential Guide to Marketing Your Small Business
How to Create a Favicon Image
Have we mentioned that favicon images are teeny tiny? They are really, really small, so detailed images aren’t going to translate well. Creating a good favicon image is about striking a balance between something simple and something branded.
Simplicity in Design
There is a good reason that most favicons are a single color and feature simple shapes like squares, rectangles, and triangles. A clean, simple design is recognizable on a small scale. And that is the point—to find something recognizable.
Use Space Wisely
Many brands will use their logo because it is the simplest way to transfer branding. However, the dimensions of every logo don’t fit nicely into a 16×16 pixel image. When this happens, it may be better to use a secondary branding image as the favicon so that you don’t lose real estate or visual recognition with awkwardly cropped logos.
Related: Things to Consider When Designing a Website
Match Branding
Again, the point of the favicon is to make your brand recognizable. Therefore it is imperative that your favicon image matches your branding style. That does not mean that it needs to be a tiny rendering of your logo. Suppose you can make that work—great. Otherwise, choose something symbolic and simple that matches your brand colors.
Use Abbreviations
If an image isn’t going to work, consider using a very simple text abbreviation. Ideally, you can get the message across in a single letter. But in reality, your favicon should include no more than three letters. Take, for example, the BBC. Their logo happens to be three letters, and that works well for all branding purposes, including their favicon.
Best Format for Favicons
There are a number of formats available for favicons, but not all are widely recognized. Windows ICO and PNG are the two most common. We like the PNG file because it doesn’t require any special tools to create an image in this format.
GIF and APNGs are animated graphics that are not widely supported. You may be able to use these in some browsers, but we recommend sticking with something more universal to ensure all users have a similar experience. SVG is limited to Opera browsers. And JPEG doesn’t really offer any particular benefits given the small size of favicons.
Favicon Sizes for Different Browsers
The best size for a favicon is 16px because it will work universally across all browsers. However, if you want to create individual favicons for each browser, they do actually have different size requirements.
24px – Internet Explorer 9
32px – IE Taskbar, Windows 7+, and Safari
57px – iOS
72px – Apple iPad home screen
96px – Google TV
114px – iPhone 4+ home screen
128px – Chrome Web Store
195px – Opera Speed Dial
Why You Can’t Do Without a Favicon
A favicon is an essential piece of online branding that improves recognition and usability. With the online world mimicking a needle in a haystack scenario, brands can’t afford to go missing. The best way to keep your website in front of interested eyes is to utilize simple features like favicons.
Mailing Address