A year or so ago, around when I started putting together a web site, I noticed that most of the more professional web sites had a little picture before the page title in the browser tab, before the url in the address bar, and if I bookmarked the page, before the bookmark. However, then there were enough sites that didn’t have this little icon, or favicon as they are called, that I did not care if my web site didn’t have one.
Now, not even a year later, favicons are so common that if you have a few tabs open or look at your bookmark list and a site does not have a favicon displayed it looks unusual. It also does not help that some browsers started placing square perforated boxes in place of where a favicon should go if one was provided.
It turns out that it is very easy to add a favicon to a web site. In fact, all you may have to do is upload a file containing the image, an .ico file, to the root directory of your web site. If your web site is on a subdomain, as many are on free hosting platforms, there is a line of html that must be included in the head section of the web page file. That line of code is:
<link rel=”shortcut icon” href=”http://your_subdomain.hostname.tld/your_image.ico”>
Since my subdomain is “chkoep”, the web host I’m using is Atspace, my tld is “.cc”, and my image file is “pyramid.ico”, the line of code needed for my web site is:
<link rel=”shortcut icon” href=”http://chkoep.atspace.cc/pyramid.ico”>
One thing I feel I need to point out is that when you add a favicon to your web site, you may be tempted to try one of the online image file to icon file converters that you find are available when you search for converters. Be careful, I got a virus from one of them. A very good tool that I found for conversions is SimplyIcon. With its ease of use that no online tool could match due to the necessity to upload and download, SimplyIcon is an excellent choice for a tool to create .ico files from images. You can find SimplyIcon here.
I also created a video tutorial below on how to add a favicon and using SimplyIcon: