Add favicon to your website
Favicon is very common and very popular now days. It is also a very important for your branding. In case if you don’t know yet what is favicon, well it is the small image that you see on top left of your tab when you are browsing a website. So, today I will show you how to add favicon to your website in a single line of code.
Why favicon
It doesn’t matter what type of website you have, there must be an identical image for it. Let’s say you have your company website, so it’s obvious you have a logo of it. That goes straight as favicon. It also increases the beauty of a website. For personal website or blog, there must be some sort of image, it might be the profile picture on social media like twitter, facebook etc.
How to add favicon
Adding favicon to a website is very easy. So hopefully by now, you know what is a favicon. If you don’t know how to add favicon, it’s fine. It requires an ico formatted image and a single line of code. I will demonstrate the process in a very simple and plain html.
Process of adding a favicon
Just open a html file and if you haven’t added favicon already then you will see nothing at the top left of your browser when you open it. Now, to add favicon, write this following code in the head section of your website:
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
Now, reload you page and you will see the favicon there. So yeah, that’s how to add favicon in one line of code. This is the easiest way. If you use wordpress or some other cms, you might find many different ways of adding favicon but this is the recommended way.
Why not plugins
There must be many plugins for adding favicons, but there’s no need to add favicon using plugin. As you see, plugins are just some lines of code that is extracted in your website. If you add favicon through plugin and inspect element you will see the same line of code on your head. So, why load a plugin for just a simple line of code, right? If you use wordpress, just add the code in header.php file. If you work with wordpress then you know, to add favicon to your website, you will need to create dynamic link, so that html link won’t work unless you put get template directory uri function like this following line:
<link rel="shortcut icon" href="<?php echo get_template_directory_uri(); ?>/img/favicon.ico" type="image/x-icon" />
Here you can see I have added the favicon file to a folder named ‘img’. So, that’s how to add favicon to your website.
Like always, I have captured the whole process in a 5.29min youtube video. If you are unclear at some point take a look at here:
https://www.youtube.com/watch?v=eKljU13A1tA&feature=youtu.be
So, I hope the process was easy, if you think it was helpful, like this post and share on facebook and other social media.
