How to add Site icon in Blogger for Browser's Speed Dial

How to add site icon (favicon) in blogger for browser speed dial
Hello friends, In this article I am going to tell you how you can add big size custom icon for Browser's Speed Dial in Blogger. This icon would be visible in various browser's speed dial and bookmark. This looks professional.

You can see an example image of Opera Browser Speed Dial. You get this thing by default in WordPress but Blogger does not support this feature. So you have to do add this icon mannually. So let's see how we can add big favicon or Site Icon for Browsers Speed Dial in Blogger.

Site icon in browser speed dial

What is speed dial site icon?

I don't know what people calls this icon. Once I had seen that my blog's icon does not displayed in Opera Browser Speed Dial. I checked everyone and everything is fine. Then I started researching on Google about this. I find out that there is no article about this.

So could not know what people calls this. That's why I'm saying this 'Big Favicon' or 'Site icon'. If you know the name please comment below. After that I am copied some code from a WordPress website and used that in my blog and that worked. I will show you the ecxact technique what I used.

How to add Site Icon in Blogger for Browsers Speed Dial?

First of all create your site icon. Your site icon should be 192*192 and in PNG format.

After creating site icon create a new post in blogger and upload this image on blog in full size. And publish this post.

Open this post in new tab and copy image's URL. You can open image in new tab and copy image url or you can directly copy image url.

Write this url in notepad and delete this post. Because now you don't need that post. Do not worry your image will not be deleted. Once an image uploaded on Blogger that could not be deleted. You can check this. 

Now copy this code given below and paste on notepad. And replace Image Url here with your own Image(Site icon) Url which you already wrote in notepad. You have to put code in all 4 href atrribute.

Now copy this code and paste it in your Blogger theme head section. Paster this code just after head tag. And you are done.


<link rel="icon" href="YOUR ICON URL HERE" sizes="32x32" />

<link rel="icon" href="YOUR ICON URL HERE" sizes="192x192" />

<link rel="apple-touch-icon" href="YOUR ICON URL HERE" />

<meta name="msapplication-TileImage" content="YOUR ICON URL HERE" /> {codeBox}

Your site icon has been changed for browsers speed dial. Now add your site in Browsers Speed Dial. And you can see your site icon in Speed Dial. It is again missing don't worry. Clear your browser cache. If you don't done any mistake and still it is not showing. The reason of not showing is not an error. It would be problem of cache and cookies. So wait and see after a few time.

If it worked in first time like me, Congratulations!

Hope you guys like this article. Please share your opinion about this article and share this with social media or pin this article on Pinterest.
Post a Comment (0)
Previous Post Next Post