One-Line HTML Code to Add Favicon for Your Website

One-Line HTML Code to Add Favicon for Your Website

Setting a favicon for your website is not only good for the user experience but also for SEO optimization. And it does not require much effort. A simple one-line HTML tag can help you to set a favicon.

HTML code to add favicon

How to set the favicon for your website?

You can use the link HTML tag to set the Favicon title icon. This is one of the basic HTML tags.

Set the following param in the HTML tag.

  • rel should be “icon”
  • href should be set to the URL path of the icon.
  • Use the sizes param to set the ize of the faviocon image.

Syntax:

<link rel="icon" href="<image_url>" sizes="32x32" />

For example, the favicon we set for the CSEstack website is

<link rel="icon" href="https://www.csestack.org/cropped-site_icon-32x32.png" sizes="32x32" />

This single line of code adds the favicon for all the standard browsers.

Standard Practice for Favicon

Here are some of the points you should consider as standard practice while adding a favicon icon.

  • Usually, the favicon icon is the site logo.
  • You can set the same favicon (site logo) for all the pages of your website.
  • In case if you want to set a different favicon for each page of your website, you can do that as well.
  • The favicon icon size should be 32×32. If you have larger size icon, crop it to 32×32. You can also use favicon generator online.
What is the standard size of the favicon?

The standard size of the image logo which you are using as a favicon icon should be 32×32. Even if your favicon size is larger than 32×32, it will be shown as 32×32. This is the standard size supported by almost all the standard browsers like Google Chrome, Mozilla Firefox, Microsoft Edge, Safari, etc.

How to set the favicon for CMS like WordPress, Blogger, etc?

If you are using any CMS like WordPress, Blogger, etc…, your job is even easier. You don’t need any HTML coding knowledge. You can set the favicon through the settings option.

Leave a Reply

Your email address will not be published. Required fields are marked *