16
Follow these easy steps to add favicons to your static webpages
Favicons pronounced as (fave-icons) are small 16x16 pixel icon that serve as branding for your website. It's main purpose is to help visitors locate your page easier mostly when they have may tabs open. A favicon gives you an advantage over websites that don't use one.
Well designed favicons are styled to match the logo or them of your website, that way users have a quick and easy way to recognize your website at a glance.
You might be wondering what type of image is a favicon, well most browsers recognize PNG ,GIF and JPG formats for favicons, internet explorer currently doesn't. It is recommended to use the Microsoft ICO format which works on all browsers. The ICO format contain multipke favicons of different sizes in one ICO file. It is best to have, at minimum, a 16x16 pixel version of which I recommend.
Below: 16x16, 32x32, and 48x48 versions of a site favicon. Each image is embedded in one favicon.ico file.
The most common sizes for favicons are:
16x16
32x32
48x48
64x64
128x128
There are many ways to create favicons, you can use an online tool to create one. We happen to have favicon.io which is an online favicon generator that quickly generate your favicon from an image by uploading your image, this could be a company logo too. favicons can be generated from texts and even emojis which ever one suits your taste.
Now that you've created a nice little favicon, you need to tell web browsers and other applications where to find it. First place the downloaded favicon file in the root directory of your website and then add this line to the
<head> section of your HTML
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
As long as the href attribute is accurate then you've got your favicon right up on your webpage.
Thats all you need to have your favicon up. Pretty Simple.
click the like button if you find this post interesting.