How to Generate and Include a Favicon in HTML?

Favicon is a regular graphic image (picture) associated with a particular web page or web site. It is also known as a  bookmark icon, shortcut, or a website icon. Browsers that support adding a favicon usually display it in the address bar and in the tabs next to the page name, some browsers use it as an icon for a shortcut stored on the desktop. 

Favicon Creation

The important thing about favicons’ making is that they should be of the particular size which is 16x16, 32x32 or 64x64 pixels respectively. Also, don’t forget to apply 8-bit or 24-bit color. The most common formate for favicons is ICO but GIF and PNG are also possible.

When generating a Favicon image, you should pay attention to the following tips:

  • Favicon should be made in the same style as the site, as it is a kind of calling card of your project.
  • The image that you want to use as a favicon should be extremely simple to understand, better use only a few elements.
  • Make sure that the favicon maximally conveys the essence of your site, business, and project.
  • It is better to create a picture so that it would cause an association to the visitors of your site. For example, a phone icon, for a mobile phone salon.

Normally, make an icon, you just need a regular image in the format * .jpg, or * .bmp, which can be made in any graphics editor, even in the same Paint. Load the image into the program for creating favicons, then select the size, color depth and press the start button. Everything is ready.

How to Add Favicon in HTML?

Now it's time to add Favicon to your site so that it appears for all its pages. To do this, place the icon in the root folder of your site. If your site is already hosted, then this folder is usually called "public_html". Then, on each page of your site, before the closing tag, add the following lines:

<link rel = "icon" href = "/ favicon.ico" type = "image / x-icon">
<link rel = "shortcut icon" href = "/ favicon.ico" type = "image / x-icon">

You need to add these lines to each page if you have an HTML website. Since, most likely, your site is created on the basis of some kind of CMS, then it will be enough for you to add these lines to the main file of your theme that you use for the site.

On the tabs of the pages and in the address bar of the browser, your icon will be displayed immediately.

 

favicon guru screenshots 1

Favicon.Guru is the reliable and easy to use service which helps convert PNG files to ICO. We guarantee our client the simpleness, convenience, and always satisfying results! With the help of our platform, you’ll get the best and unique favicon for your web site.

favicon guru screenshots