Quickly add a favicon to your website

Make your website memorable with a dedicated icon.

Favicons... in my opinion, it is something that often gets overlooked but is an easy and quick way to make your website stand out and be more memorable.

What are they ? It is the icon that represents your website. It shows up in your browser's tab bar, helping users to quickly locate the tab you want to get to.

   They can also show on iphone bookmark shortcuts on your users home screen.

Here are 2 ways to set an icon for your website.

1 - Favicon.ico

That's probably the easiest way, assuming you have a .ico file available. By default, browsers will try to access a file at the root of your domain named favicon.ico. If it exists, that will be your icon.

2- Page tags

That's where my preference is. Using tags allow for more flexibility in terms of files and options.

To achieve that, my preference is to use the website https://favicon.io/, a favicon generator. You first select the file that you want to use. It also offer generating the icon from an emoticon (as below). From that file, it is going to generate an archive file that contains your file in various sizes and format to add to your website.

The second step is to add the code in the header of your page or template.

The Smooth Commute icon

You can also play with favicons, changing it based on events happening on your website. A notification, message to your user could trigger updating to alert the user of an update.