How to add a favicon to your site
A favicon is the little icon that shows in the tab of a webpage.
Before you add a favicon to your site, you need find a suitable image. After you find an image you want to use, you need to crop the image into a square because most favicons are 16 by 16 or 32 by 32 pixels large. There are many programs you can use to crop your image but you can use MS Paint for Windows or the preview editor for Mac will do just fine. To make a square selection, simply hold down the shift key while selecting the area of the image to crop.
After you’ve cropped your image, you can either resize it manually or use a service such as favicon generator to resize your image. I use favicon generator because it lets you upload an image and it generates versions of common favicon sizes for you to download. After you have resized or downloaded your image, place the image into your web folder.
Insert the following code into the <head> section of your html document.
<link href=”media/favicon.png” rel=”icon” type=”image/x-icon” />
The link href should refer to the relative file path and name of your icon. In this case, my icon is in a folder named “media” in my web folder and my icon is named “favicon” with the .png file extension. After you specify the location of your icon in the tag, your site should display an icon in the tab of your browser!
~ by stanleyzuo95 on February 6, 2017.