Favicon is short for “favorite icon” and it’s a tiny little image displayed next to your site’s title in the browser tab, bookmark list, address bar and search engine results pages. It helps users to identify your site quickly based not just on your name. Favicons have been in common use since the 1990’s and can often be repurposed as shortcut icons as well.
The benefits of a well-design favicon:
Brand Awareness
When searching for a website, your favicon is one of the first media assets your potential users will see. It’s important to consider your brand image and how that will influence what you choose to display for your favicon.
SEO
Having a professional favicon will boost click-through-rate and invite users to spend more time on your site, which can be beneficial for SEO.
User Experience
It will make it easier for users to find your site if they can identify it quickly when they have multiple tabs open. It may increase the likelihood that users will bookmark your page as well. This is one way to improve the customer experience and ultimately increase eCommerce sales.
Now that we’ve discussed the benefits of a professional favicon, let’s talk about how to design a professional favicon:
Size
The file types supported are ICO and PNG, ICO is supported by all browsers but PNG is not supported by Internet Explorer. You can download your image in both formats, however. The most common sizes for image size are as follows: 16×16: The size of browser favicons. 32×32: The size of taskbar shortcut icons. 96×96: The size of desktop shortcut icons. 180×180: The size of Apple touch icons. 300×300: The size required by Squarespace. 512×512: The size required by WordPress. Ideally you should have multiple versions of different sizes based on where they will be displayed.
Generators
If you’re looking to design a favicon quickly you can always use a favicon generator, there are many free options that will make the process smoother and stress free. Favicon.io, RealFaviconGenerator, Favicon.ico & App Icon Generator, and Favikon are all great options to help you design your favicon with ease.
Adding your Favicon to HTML
If you have created multiple size versions of your favicon, use the following lines of code based on the sizes you chose.
Final Considerations
You may not have considered how important this tiny little image could be for your brand awareness and the customer experience. Now that you understand how imperative a good favicon really is, and how easy it is to create one, all you have to do is watch your web traffic skyrocket. Hopefully your eCommerce platform can take the heat. Though it may not make as much of a difference in web traffic as I’m making it seem, it’s still an important aspect of your brand identity and is worth consideration. If you need help with creating a favicon or implementing any complex eCommerce technology, Virid can help. Our eCommerce platform marketAgility 7.0 is up to the challenge. Schedule your consultation today to increase eCommerce sales and grow!
Connect with us on LinkedIn, Facebook, X, and Instagram to keep in touch.
