How to Add a Favicon to Your WebSite and Why You Should

Grant Lucas Architect Favicon

Adding a Favicon to Your Website

What is a Favicon?  You may well ask…. I did only a few days ago.  Simply put, it is a small icon or image that can improve brand recognition and makes access to your website easier.

I didn’t even know that I needed one of these little fella’s on my Residential Architectural website until my Serpstat site audit picked it up and categorised it as a problem. A bit of research quickly revealed that I really did need one.  I had been seeing these things for years, but not really picked up on what they were. Once you realise what they are you start seeing them all over the place…. Address bar, Bookmarking list, Link bar, Browser tabs and Shortcut links.

Brand recognition and Favicons

Favicons are great for finding and keeping track of things on your screen more easily, but what is even more important is Brand awareness. Think of Google or Firefox.  Everyone knows the big G or the world with the red fox wrapped around it. Instant recognition is good for business.  A favicon based on your Business graphic will reinforce your Brand and ultimately your bottom line.

How to add a favicon to your website

Deciding that I needed a Favicon was easy.  Actually putting one into my website was a little trickier. There is so much available information about Favicons that it was very confusing deciding on what file  format and size the favicon should be in and how I could install one on my site.  Did I need one 16×16 pixel icon or did I need multiple ones of various sizes?  Should my Favicon be in a .png or .ico format?  I struggled for around a day learning lots but not really finding an answer.  Finally I found a great Website called Real Favicon Generator that was dedicated to creating a selection of suitably sized icons that could be used across most platforms and devices.  All that was needed was to upload a 260×260 pixel image to this website and then the prompts quickly and easily resulted in enabling me to edit this into a package of differently sized (and shaped) Icons all based on the same theme.  A few lines of code was generated as part of the process and this was then all installed into the head section of my site.  I then needed to dump these icons into my websites public html (root) folder (along with a couple of other files that were provided) and once I had re-published my website the favicons appeared without a problem. Simple? No not quite….

Content Management Systems, & Installing Code into The Head Section of a Website

My Residential Architectural website was published using the CMS RVSitebuilder on an Apache server. This slowed down what should have been a very quick process. Real Favicon Genertor claims that it is a 5 minute process to create and install favicons on your site. It would have been true, but unfortunately  RVSitebuilder as a CMS is a little clumsy.  I actually don’t mind RVSitebuilder as it is quite a powerful website building tool. The big problem lies in a lack in documentation.  After a bit of research I found that in order to edit the head section of my code I needed to do it through my CMS. This is done in a way that isn’t obvious or intuitive…. it is however quick and easy once you know how.

In RVSitebuilder  access to the header  is in Step 2.  Go to “Site Properties”. (This lets you edit your template). It is at the bottom of the left menu so you may need to scroll down to see it. Next Click on “Edit head tag” then click into the “other embedded” edit box. Paste the code in to this box. Press the “update” button then “save” then re-publish your site

What else do you need to know about installing a Favicon on your website?

What most instructions on the subject of installing Favicons on your website ignore is how to make your original Brand image. It is assumed that you already have an existing image or logo that you can use. Gimp is a free editing program that will allow you to make your image if you don’t have Photoshop. This is a good choice, but it does require a bit of knowledge (that I didn’t have) in order to use it.  Rather than learn something new and because I use Autocad in my Architectural Practice I  made my image in Autocad. I then exported it as a PDF which I opened in PDF-Viewer to export this as a jpeg.  I then used Irfanview to re-size it to the required 260×260 pixels that Real Favicon Generator suggested as being optimal. This was quick and easy for me because I use these programs all the time. I assume that for anyone else this would be a complete pain and that learning Gimp would be their best option.

Leave a Reply

Your email address will not be published.