Links to this post

Where oh where has my 'Favicon' gone ?



There are many of you out there , Bloggers & non Bloggers alike who have been experiencing the dreaded Favicon issue . Worry not , for you are not alone Bloggers of the Universe ! During one of my many www.quests , I discovered that there are a great multitude of users out there who are fervently trying to add / link their own little logo / favicon on the toolbar / user bar of their pages . Many have tried , & few have succeeded from what I have gathered .





There seems to be a good enough reason for your favicon not appearing . Or , it may have appeared for a day and then it just vanished into thin air again the next time you logged on . First of all , what most users have to realize is that : Blogger is not a Domain Host , where one can upload their favicon and be done with it as you may have seen on many independently hosted sites . Blogger is a Platform for Blogging , just as WordPress , Drupal & Joomla are . You cannot have a favicon on these sites , or at least I have not seen any ( and I may be wrong so feel free to correct me if I am ) . However , you can have a favicon on Blogger . Although I have read quite a number of Bloggers who claim they cannot get their favicon to show up . The problem with your favicon not showing up is very simple : Blogger , just like several other social Blogging Platforms such as the ones mentioned above & ( aside from not being a Private Domain server or Host ) has its own Logo / or favicon which it displays at the address bar & the tab of your browser page as you can clearly asses by now .



This little Blogger favicon appears due to a certain code which is generated at the HEAD of your Template Document upon upload , and that code is :<link href='http://www.blogger.com/favicon.ico' rel='icon' type='image/vnd.microsoft.icon'/>




Now what this code does in essence is : it does not only generate the Blogger favicon itself , but it also overrides your own little personal favicon / image as well .

There are many favicon generating sites out there , and yes they do work in generating an image of your choice -( and I will not mention them at this junction , because you can achieve what you want without generating anything for this procedure here ) and the question is : what happens after you have your image and you place the code of the generated image into the top of your HEAD tags ? You click save and when you view your Blog/ Page , you dont see that little favicon ! Quite frustrating I know ...



However , I believe I have just explained as to why this happens above . Now lets see what we can do from here on end in remedying the situation at hand .
First of all , I will tell you at this early point in time -that you do not have to go to a favicon generating site , you dont have to download or upload anything, you dont have to stress yourself over anything - because this will be as simple as putting your signature onto a piece of paper , so lets begin :



Go to your dashboard > Layout > Edit HTML ; look into your Template page , and scroll down until you encounter / find the following tag /code : /HEAD Once you find that /HEAD tag or piece of code , please do the following : have the image of your choice ready . It doesnt matter whether your image is .png , .gif , .jpg format - therefore you can have any image you want at your disposal . You can have an image hosted at any image hosting service such as : Photobucket , Imageshack , xs.to or any other image upload host where you can host an image or find an image for that matter. Ok , so we have the image ready now , so we will take our image and head over to out page source or Template and as I mentioned : Look for the tag </HEAD> . Once you find / locate that tag , please take this code right here :




<link href='http://your-icon-url.png' rel='shortcut icon'/>

<link href='http://your-icon-url.png' rel='icon'/>

and paste it exactly right above the </HEAD> tag.





Once you have pasted the above code right above your tag </HEAD> , take your image and paste it right into the PINK highlighted area where it says 'YOUR -ICON-URL.PNG' and please do this in both places ok ? Now once you've done this , click Save Template and view your page . Your favicon should be displayed on the address bar and on your tab just as it is displayed on my page and on the address bar above .

I didnt have to use a favicon generator , nor did I have to download anything . The entire point is to place the code for the favicon right above</HEAD> the tag - that's it. Now I dont know if this mode will work for other platforms such as Wordpress or Joomla & Drupal , however , it works for the Blogger platform and that's where we find ourselves at this moment . Therefore , enjoy your new favicon , feel free to change the icon if you get tired of it or just want to switch it around at some point - always keeping in mind to keep the code where it is presently even if you decide to change templates . Enjoy & remember to smile , Mootools & JQuery do love you ! :)