HTML Tutorial – Adding a Favicon to Your Site
Nowadays, when one visits a website, they would see an icon next to the url or perhaps the web page title on a tab. This icon is at times referred to a favicon. In this tutorial, you will learn how to add a favicon to your site.
Setup
If you have not already done so, open Visual Studio and create a new web project. If you rather use your own developing environment or text editor such as notepad, you may set those up at this time.
We chose Server Intellect for its cloud hosting, for our web hosting. They have managed to handle virtually everything for us, from start to finish. And their customer service is stellar.
Step one.
First step we will take is creating the HTML document. We provide you with the necessary tags in the code box below:
<html> <head> <title>TITLE GOES HERE</title> </head> <body> PAGE CONTENT GOES HERE </body> </html>
Step two.
A favicon is a particularly small graphic image, or icon that is associated with a site or company (not always). Essentially, when one looks at the tabs or URLs of a site, it is a form of identity. By small, we mean either 32 by 32 pixels or 16 by 16 pixels. This image must use 8-bit or 24-bit colors. According to the W3C, the icon is to be a PNG graphic, however people use GIF or ICO extensions to their images at times.
For this example, locate any image that can be transformed into the image definition above. Once it is saved under favicon or favicon_name.extensionType, where extension type is any of the three image file extensions provided to you above, simply place the relative path to the image with the “href” attribute in the link tag below:
<link rel="icon" type="image/png" href="favicon_name.fileExtention" />
Save and run your code. Automatically, you should see the image (so long as it follows the guidelines) in the tab where your page is opened as well as the URL, regardless if it is running on a local host. Our favicon is a star next to the words, “Home Page”, as follows:
A Few Last Words…
Favicons assist in representing the branding of sites or businesses themselves. Most businesses and branded sites such as Server Intellect or Google, have favicons representing their logo in a different manner. There can be many applications to today’s lesson. Thank you for being a valued reader and join us next time for additional HTML tutorials.
Source: htmlatoms.com
you may also like:
Leave a Reply
