You have read Kang Rohman tutorial about “Add Favicon to Your Blog URL Address”, haven’t you? However, many readers who get confused because the favicon of ten disappear and only blogger logo appears. Is there a solution to handle this matter? Well, to handle disappeared favicon, you can use some tips below;
- Make sure that the extension of your favicon image is .ico, not the others
Perhaps, you have ever tried to make favicon image with the other extension, except .ico, for example .gif. .jpg. Or else. Actually, after you uploaded it, the favicon will appear but sometimes it disappears. That’s why; you have to change it with .ico. Please read the my previous tutor to change the favicon image.
Add your favicon code under blogger favicon code
I believe you are confused where the location of blogger favicon code. If you pay attention to the code in your template, you will not find favicon code unless you add it by yourself. However, actually blogger inserts its favicon code in the template. The code is as follow;
<b:include data='blog' name='all-head-content'/>
Do you believe in me? Ok, please visit your blog address. Click View menu at the menu bar on the top of your browser, then click “Source” for internet explorer or “Page Source” for firefox. You will see all code of your template. Pay attention to the code in the head, you will not see Kang Rohman code, but will see the following code:
<head> <meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/> <meta content='true' name='MSSmartTagsPreventParsing'/> <meta content='blogger' name='generator'/> <link href='http://www.blogger.com/favicon.ico' rel='icon' type='image/vnd.microsoft.icon'/> <link rel="alternate" type="application/atom+xml" title="Kolom Tutorial - Atom" href="http://kolom-tutorial.blogspot.com/feeds/posts/default" /> <link rel="alternate" type="application/rss+xml" title="Kolom Tutorial - RSS" href="http://kolom-tutorial.blogspot.com/feeds/posts/default?alt=rss" /> <link rel="service.post" type="application/atom+xml" title="Kolom Tutorial - Atom" href="http://www.blogger.com/feeds/4569368524623882898/posts/default" /> <link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://www.blogger.com/rsd.g?blogID=4569368524623882898" /> <link rel="alternate" type="application/atom+xml" title="Kolom Tutorial - Atom" href="http://kolom-tutorial.blogspot.com/feeds/147113262052297401/comments/default" />
The red code is the code of blogger favicon. In order your favicon not to be blocked by blogger favicon; you have to add your favicon code under the favicon code.
For example, your favicon code is a follow;
<link href='http://www.example.com/favicon.ico' rel='shortcut icon' type='image/x-icon'/>
Please save it like this:
<b:include data='blog' name='all-head-content'/>
<link href='http://www.example.com/favicon.ico' rel='shortcut icon' type='image/x-icon'/>
Or, if it doesn’t work yet, try to save it right above <b: skin>:
<link href='http://www.example.com/favicon.ico' rel='shortcut icon' type='image/x-icon'/>
<b:skin>
Don’t forget to SAVE THE TEMPLATE
Follow the structure of Blogger Favicon Code
If both ways above don’t work either, then try to change your favicon code like blogger’s, for example your previous favicon code is as follow:
<link href='http://www.example.com/favicon.ico' rel='shortcut icon' type='image/x-icon'/>
Change it into like this:
<link href='http://www.example.com/favicon.ico' rel='icon' type='image/vnd.microsoft.icon'/>
Add that code right above </head>:
<link href='http://www.servergambar.com/favicon.ico' rel='icon' type='image/vnd.microsoft.icon'/>
</head>
Don’t forget to SAVE THE TEMPLATE
If the steps above are correct, the favicon code should be normal again like before.
Kang! I am still confused, please give me more ways! Ok, if you are still confused. I will give more. However, if you still confused on how to make favicon, just read here.
Below are the steps to insert favicon code into your template:
- Please Log in into blogger with your ID
- Click layout.
- Click Edit HTML tab
- find this code <b:skin> or it is usually like this; <b:skin><
Hopefully that your favicon image will not disappear again after following the steps above.
wah...langsung coba kang....
thanks ?!
My favicon was working in Firefox, but then I loaded IE to see what my blog looked like there. As you probably know, no favicon showed. I went back to Firefox, and ever since can't get it to display. I've got through your original tutorial, and this one. Help!
This was really helpful. I did pasted the fevicon before all-head-content. Thanks a lot!
:)
The oldest browser always get the favicon from the favicon.ico of your root folder, so you have to try to delete the blogger icon to show yours in them.
There is a web site where you can check how many favicons a browser can find
http://www.getfavicon.org
For example, with this blog i can see 3 differents favicons, in firefox i see the good one in the bar and tags, but if i save the page to the bookmarks, there i see the blogger favicon.
So try to delete!
Bagus kang.. akang emank pintelll ;)
THANK YOU
-Sony
It work! its freaking great have been frustrated for while now, that my Favicon has disaapeared and can't seems to fix it, now it work again thanks thanks many thanks.
Hello friend..comment here..i read some article and its powerful article
By this trick favicon is showning only on Firefox ! How to show favicon on IE, Safari or Opera !!!! Help.
Visit:- www.smsrush.co.nr sms your friend, lover and make them smile.