Favicon Meta Tag For Blogger or Any HTML Website with 16x16, 32x32, and 64x64 Sizes



Hey Techno Geeks! This is a much-needed tutorial of the moment as Blogger has updated its method to upload the Favicon for blogs. This is one of the widely used methods to show Favicon in all the platform including Blogger. This tutorial provides a favicon with various sizes of 16x16, 32x32, and 64x64 for wide acceptability in all browsers, applications, and devices.

In this method, we need to follow two steps which include uploading of Favicon file to any host or Blogger/Google images (in case of Blogger) and editing HTML of Blog to insert Favicon to it.

NON-BLOGGER users need to skip steps 1, 2, and 3 but need to upload Favicon file to their host and copy the URL of that image and can directly follow Step 5.

BLOGGER users need to follow all the steps given below in the pictorial format.

1. Sign in to your blogger dashboard then click on Pages and then click on + sign in the lower right side.


2. A new window will open where you need to upload your Favicon image file so that it gets stored on your Blogger database. 


3. Now after uploading the Favicon picture in the Blogger click on < > which will open HTML view of the post. Now you need to copy the Image URL which you have uploaded. It's your wish to publish that page for future purposes which will have no harm.


4. Now again click on Theme and then click on three Dots as shown in the below picture and then click on EDIT HTML.

Non-Blogger users need to go to their template file and edit it with the following steps given in step 5.


5. Now copy the metatags given below and past it above the <b:skin>

<link href='YOURIMAGEURL' sizes="16x16" rel='icon'/>
<link href='YOURIMAGEURL' sizes="16x16" rel='shortcut icon' type='image/x-icon'/>

Just change YOURIMAGEURL with your Favicon URL. Replace 16x16 with other respective needed sizes such as 32x32 and 64x64 according to your need.

NOTE: For any size Favicon the respective size favicon image link should be provided in the meta tag. For example, you are using a tag of 32x32 then your image file uploaded in host should also be 32x32 pixels.


6.  After pasting the metatags from the previous step now change YOURIMAGEURL with your Favicon image URL which got while uploading it to the Pages section. After replacing YOURIMAGEURL with your Favicon image URL just click on the Save button given on the right downward side of the window.


That's it for this topic. I shared this meta tag HTML method to change or upload FAVICON for your Blogger blog which is much needed after Blogger's 2020 update in cross-platform regarding the Favicon acceptability. Note: This may take some time after completion to come into effect.

Post a Comment

0 Comments