Does your website have a favicon?
This may not be a question you can answer, as the term favicon isn't one that's heard all that often if you're not a developer. If you haven't heard of it before, the favicon is the little icon that appears next to your website title in your web browser tab. For example, you should be able to see Cosmic's favicon is the little blue square icon in the tab at the top of this page.
As you can see from the screenshot above, favicons are also used in your favourites/bookmarks area.
What do they do?
Favicons don't serve any real purpose in terms of performance on search engines, speed or functionality, they are more for show. The favicon's purpose is to add some branding to your web browser when a user is visiting your website - the little icon gives a little extra insight into what the user is about to see. As you can see from Cosmic's favicon, we use our signature blue colour for the background, with our white logo in the middle. This is consistent across the Cosmic brand - our website, social media and marketing materials all follow the same guidelines.
The favicon also adds some colour and detail to the tabs and bookmarks bar, whereas without this, there would simply be a lot of text. This can help the user quickly pick out the website they are wanting to visit. An example of this is my bookmark bar in the screenshot above - whereas tabs feature the favicon and the page/website title, my bookmarks bar shows only the favicon and no text. I set this up as there are a lot of websites which I need to access daily for work purposes, and having the text showing would mean that I would quickly run out of space on the bar and have no room for the majority of my most frequently visited websites and resources.
All of the favicons in my bookmarks bar are clear and distinctly show what website I am about to visit - Facebook has its signature blue background and white "f", Twitter's blue bird, the YouTube play button, Hootsuite's owl and Dropbox's blue, opened box. These all reflect the brand that they have when you visit their website and other networks - this is a must when incorporating a favicon. Other good examples of websites I regularly visit are ManUtd.com which uses the Manchester United crest, eBay's four-colour shopping bag, PayPal's double "P" and the BBC's simple "BBC" logo.
How can I get one?
It's extremely simple to incorporate a favicon into your website. First, you need to create a 32x32 blank canvas in a tool like Adobe Photoshop. The actual size of the favicon is 16x16, but that is a very small workspace to design on, so 32x32 gives you a little extra room to work with. The favicon needs to be as simple as possible and feature little to no text - the area is so small that it will be almost unreadable. Ensure that your icon follows your brand, and save the image. This can be as a JPEG, PNG or GIF - whichever you prefer.
Once you have completed the design and have your image, you will need to upload it to the public_html folder of your website. You should make sure the file name is "favicon", so when uploading the image to this folder, it will likely take on the filename "favicon.gif" - the extension will vary depending on the file type you saved it as. You will then want to rename the file to "favicon.ico" - this will then let the website know that the image is in fact an icon,not just an image, and it will recognise it as the desired favicon.
Your new icon will soon show and will be accessible in web browser tabs and favourites bars to everyone!
If you have any questions, do get in touch and the Cosmic team will be more than happy to advise!