How to “Change Blogger Favicon” to a Personalized Image (Blogger Blogs)

By
Editorial Staff
-

 

How to "Change Blogger Favicon" to a Personalized Image (Blogger Blogs)
Change Blogger Favicon” to a Personalized Image

In this short tutorial, you will  learn precisely how to replace the traditional blogger default favicon with a custom image. I presume you already know what Favicon is, A Favicon is the image that shows up just before a website address on your address bar. Recently i shared a similar tutorial on how to Easily embed PDF, DOC, or XLS files into blogger.

 The blogger platform has a unique default favicon and it serves as a typical example (the white big B image with an orange background). For instance, the case shown below are the favicon for both blogger and word press.

How to "Change Blogger Favicon" to a Personalized Image (Blogger Blogs)

If you are certainly not sure yet what a favicon is, then I’ll recommend you read it up on wikipedia

How it works.

The process requires little skill and techniques, as it is very simple and quite  easy, Its all about pasting an HTML code to your template.
1. Get an image that is 16 X 16 pixels, that is 16 pixels high and 16 pixels wide.
2. Upload the image to any website accepting images and that are reliable. e.g Google Docs, Picassa etc.
3. Get code from here and paste to your Template. 
I guess you’ve gotten the big picture on how this works. Now let’s go. Wait a minute, one thing that gives bloggers problems while setting up their Favicon is the Favicon size. But not to worry there are free online tools that are very cool in editing images,  see tools below

 

Tools for editing images.
Cutmypic.com: For cropping images, get the better quality of an image and more…
Picresize.com: For resizing image and more…

Read also : How do i use a custom domain name for my blog?


This tools are what i used for editing Jaysciencetech world’ Logo and Favicon. I used Cutmypic.com for cropping and taking away the edges of the logo, giving it more quality and curved edges. And I used Picresize.com for resizing this site’s favicon image to 16 X 16 pixels.

How to Change Blogger Default Favicon.


With your image already hosted (uploaded) on the Internet (Google Docs, Picassa etc)
1.   Login to your Blogger Account
2.   from Blogger Dashboard
3.   go to Template (Back up your template before proceeding)
4.   click on Edit HTML and Proceed
5.   click on the “Expand Widget” box (very important)
6.   Look for </head> (Ctrl + F)
7.   Paste the code below right under</head>

<link href=’http://bsaves.com/HowHero/Blogger%20Templates/moonspot/images/favicon.ico’ rel=’shortcut icon’ type=’image/vnd.microsoft.icon’/> <link href=’http://sphotos-h.ak.fbcdn.net/hphotos-ak-ash4/486702_350766161673682_456766361_n.jpg’ rel=’icon’/>

 Important Changes to Make

Change the URL in red, that’s our own favicon image URL and if not changed will display our favicon image on your site. 

Go to where you uploaded Favicon image  Right-click on image and
Click on “Copy Image Location” or “Copy Image URL”
Replace the URL in red above with your Favicon image URL

Having done that, Click Save, Go back to reload you page and see how it looks.


I hope this short tutorial helps and if you have any problems implementing this, do not hesitate to use the comment form below. Kindly like our page and follow us on twitter. Alternatively, you can subscribe to our email list.

RELATED ARTICLESMORE FROM AUTHOR