Welcome to this weeks video blog by Mash Web Design on how to add a favicon to your website, so what exactly is a favicon. A favicon is an icon associated with a particular website and it is typically displayed in the tab next to your title.
Creating the Favicon
So how do your create a favicon, here is a basic test website that I have set up and as you can see the favicon doesn’t display, so to personalise your own icon I would suggest you use a program like Adobe Photoshop to create your icon. So if we head over to Photoshop → Select File → New and select the width as 32px, the height as 32px and the resolution to 72 dpi with is ready for the web.
So now we have the canvas in place we want to create a nice favicon for our site. Often this can be part of the logo like the Twitter bird, or you can use something more generic. So for our website which is called “Books”, lets head over to the website Font Awesome. Font Awesome have a vast array of different icons available to you for this type of task. If you go through to the cheatsheet found on the website and search for “book” you should be able to see a specific book icon. Simply copy this icon, and paste it into our Photoshop document.
Resize the icon and change the colour to your preference and you should have a favicon ready to add to your site. The next thing to do is to save the icon as a .jpg to the desktop. It is recommend that you use a .ico file for your favicon so we will need to convert our file.
To do this we can use a Favicon generator, simply search for “Favicon Generator” in Google and navigate to the favicon.co.uk website. Simply click choose file, select your icon, ensure 32px by 32px is selected and click generate icon. Next download the icon and add it into your website directory.
So the icon is now on the website, so how do we load it onto our website. We have to link to the icon via our HTML, to do this inside your websites head you need to go ahead and add the following HTML.
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
The code takes three attributes, the only one you need to worry about editing is the href attribute. Simply ensure that this contains the correct path to your icon.
Now lets head over to our browser and you should be able to see that the icon is now visible. Congratulation you have added your own favicon. Next week I will be covering how to add a Apply Touch icon to your website followed by a tutorial on how to add both of these icons to a WordPress site.