All About Favicons

What is a favicon?

A favicon (short for “favorite icon”) refers to the small icon that relates to a specific website. They are used to make the process of identifying a website easy.

Favicons show up next to the tabbed website name in your browser, in your browser’s history bar and favorites list, and also if you create a shortcut on your desktop.

Why should I have a favicon?

A favicon is not necessary for the functionality of your website, but there are plenty of reasons why your website should still have one.

Reinforcing company branding – Just like companies have logos, websites have favicons. The favicon shows up with your website, so it acts as an extension of the website, which in turn is an extension of your company’s image and creates a level of professionalism for the company.

Portray a professional image – A favicon is a small touch that will add to the professionalism and trustworthiness of your design, website, and brand.

Make your website stand out – There are many websites that do not use favicons. By having one on your site you will stand out, especially when compared side by side with these websites when listed in people’s bookmarks/favorites.

Make life easier for people who are heavy multi-tab users – If a user has many tabs open the website title may not have room to display. The favicon, however, will always be displayed.

Making/installing a favicon

Favicons are super easy to make and install:

1. Create the original image – Using your favorite image-editing program, create a square image (all four sides must be the same size). The image can be a .gif, .jpg, .png, or a .bmp. Favicons can also be transparent, so if you would like to use this feature be sure so save this file as a transparent .gif or .png.
2. Convert into a favicon (.ico) – There are many favicon generators online. I like to use https://realfavicongenerator.net/. Browse for the file created in step 1, choose optional sizes for your favicon, and then click “create icon”.
3. Add favicon to your website – Using an FTP client, add your freshly created .ico file to the root directory of your website. Then add the following line of code anywhere inbetween theandtags of your website. Be sure the "href" path points to the favicon in your root directory.

Testing your favicon

Sometimes your favicon might not show up right away, even when it is installed correctly. If you think you have it installed right and it is not showing up, try clearing your browser cache/history, restart or use a different computer, or try your site in a different browser. I would recommend just waiting and checking your favicon in a few hours and by then your favicon should stay if everything is set up correctly.

An additional note on favicon sizes

A favicon is 16x16 pixels When you make your favicon, you will have the option to include a 32x32 desktop icon. This is used for when users create a desktop shortcut to your website.

Conclusion

Favicons are really easy to make/use and they add a lot of value to your site. They are a simple way to make your site stand out and look more professional!