Posted By Max On Monday, July 20th, 2009 In Blogger Tricks and Hacks
|
|
| Share |
How To add fav icon to your blogger
- Codes Fixed and 100% works
- 18,000+ Animated Favicons Source Added
favicon is very important now it’s a nice way to put your logo, or what ever you want. on the browser address bar.
if you don’t know what is the favicon.ico just look at the address bar at your browser now.
and you’ll see our logo added to it on the left. you can check the above image to know what are we talking about.
to do this you need to follow the next simple 4 steps. it’s too easy. so lets go.
 |
- Before We Start: - You need to be careful while changing your template. - Before you make any changes, Back up your template and save it at safe place. |
step 1: creat of choose your own icon.
step 2: Make your favicon.
step 3: Upload it.
step 4: Add a code to your blogger xml layout.
step 5: Enjoy.
first of all. you need to have an icon to display it as your blog favicon.
if you already have a logo. you ‘ll use it.
or you’ll need to find nice logo and suitable to your blog.
it may be a letter. or simple expressive picture. you can browse deviantart.com icons category to get inspired.
and here is sample icons may help you to Crate yours.
once you are done and picked you icon. you’ll need to move to the next step.
- 18,000+ Animated Favicons Source Added
That’s great and new source for free and animated icons, you won’t need to design your own icon and loos any time any more, thanks for iconj.com Go there and browse.
now you have to make your icon 16×16 pixels. I usually use photoshop to do it and save it as any image format. like [ jpg, gif, png, .....].
call it favicon.jpg , favicon.gif or favicon.png. just choose one format, not all of 3 types.
and we’ll use program called “imagicon” you can search Google to download.its free and only 950 KB.
setup the program and find the icon image that you made it and saved it by photoshop, favicon.xxx
load the image and choose 16×16 win32 icon. save it as .ico.
so it’ll be favicon.ico.
Recommended : it’s recommended to name your icon file – favicon.ico -
Use you favorite image upload or file service to upload you favicon.ico file.
and keep the url at save place cause we going to use it in step 4.
the url should be something like.
http://www.fileiconhost.com/i3jh/youricon.ico
log in to your blogger account. Now find the blog you want to edit if you own more than one blog. And click “layout” table. then choose “Edit html”
Search for :
and just after it. past the next code
and instate of ‘URL of your uploaded icon file’ add the url that you uploaded your ico file to.
the code should be something like the next
Click save template button.
Now go to check your new blogspot browser address bar.
if you can’t see it please wait for awhile. some times it takes 2 days to appear. but not always.
if you have any problems please leave acomment.
No related posts found
Views : 17,930 views 
Rating : 
Loading ...
Installation Error : Copy url &
Click here
Broken Link : Copy url & Click
here
- Hosted Exchange
- 1AutomationWiz Shopping Cart Software
- www.mastersitemanager.com
- LG Rumor Touch Accessories
- online booklet printing
- Download printer repair manual easily
- Need cash? Payday Loans Cash Tomorrow!
- AdvanceLoan
- wordpress themes by wpnow
- German Golf Shop worldwide shipment
- ecommerce solutions
- Chicago Yellow Pages
- Houston Yellow Pages
thanks for the info..now i have favicon in my blog..^^ :s.9.s:
I cant seem to find either codes in my template :s.7.s:
- s!
see my moving animated favicon at http://www.nokiafever.blogspot.com
hi anurag
your animated icon looks awesome
thanks for your comment, and you are welcome here always to read the latest tricks.
I followed your instructions, but I got errors. I changed the ‘ to ” as the error told me. then I added /> after link and the template saved without error. But no favicon. I’ve tried many times, can you help?
hi Joe
please wait some time before making any changes, it takes some time to appear .
thanks, and please if you have any problem, please tell us.
Please help me i took an template from you and first time it didn’t work after that it worked, Now i tried to put a favicon a error massage
“Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: The entity name must immediately follow the ‘&’ in the entity reference.”
Please help me !!! :s.6.s:
hi Dushanthan
this is one of the easiest tricks ever.
the code is very short , and even not complicated.
so please install your template again, and just follow the instructions very careful.
and tell us your news.
Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: Open quote is expected for attribute “{1}” associated with an element type “href”.
how do i remedy this?
I get the same error message as Edward/Azul. What Can I do to make it work?
hi Edward/Azul
hi Tiznau
we will fix this soon. please visit us later.
thanks for waiting.
i had a problem with this…
is there any mistake that i do????
Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: Open quote is expected for attribute “{1}” associated with an element type “href”.
hi asam
thanks for your comment, we’ll re POST this tutorial again soon.
YES! You can really use a png or whatever else image as a ‘favicon’.Just insert:
above the
(where # is the URL to your image)
I finally got the code, easy peasy, when I used http://www.iconj.com as my host for my tiny jpeg file. This website will convert for you and you don’t have to download that program. My image hoster wouldn’t allow the .ico file type.
This website gave me the full code to paste in right where you told us to.
can you list the website that can upload image .ico..??
because i use photobucket and imageshark,there`s some problem that can`t upload image .ico
forget ico – upload png or jpg – they also work as a favicon.
Hey. I know how to fix it. So just wanted to tell you guys that the codes:
change to:
(means this ‘ to this “)
i got d same problem with Edward/Azul, Tiznau n asam.
Nice post.
dude correct the spelling of enjoy and paste. you know it gives bad impression.
Check out my blog
technofreak-cooldude.blogspot.com
hi puneet
thanks dude for your comment and we corrected every thing.
your comments are always welcome here
hey it is not working
abhishek, we’ll add new tutorials soon to fix all bugs.
thanks !! very helpful post!
Hi Shannon.
If you can’t find any of the codes
above. Just click CTRL+F then,
paste the code you’re looking for
in the space given. Click “Find Next” then the code you’re looking
for will be highlighted
Liam.
hi Liam
thanks for your help.
I got the same problem as Edward, Zul, Asam, Tiznau & Penyu. Have u fix it Max?
hi izan
I’ll add new fix it soon izan
I have a problem when I had tried to embed a webpage in my blog in blogger. when I added the code to it and save template the error shown that “open quote is expected for attribute “{1}” associated with an element type “data”". HOw to over come this problem? please help me!!!
It didnt worked for me
plz help me :’(
~Ehtesham~
ok. The error happen is because you didn’t put / at the end on the code.
for example:
Above code will have error.
see i add / after image/gif’
This work
Sweat.. this website delete the website url. It is ok. I try to write in different way.
images/favicon.ico’ rel=’shortcut icon’>
Above code will have error.
images/favicon.ico’ rel=’shortcut icon’/>
above code is corrected, no more error.
I read the previous comment here, he said he can have animated favicon on his website and his website is http://nokiafever.blogspot.com/. But I cannot see the animated favicon there, firstly I guess it is my mozila version issue, but since my mozila can show the animated favicon on http://www.2aek.com, so I know it is bot mozila issue, is that blogspot not allow to display gif image? Anyway to solve it? Thanks.
http://nokiafever.blogspot.com/
anyone can tell me that how can he make so many links (each link can go to his other post) and how to make his top menu? is it the top menu is made by Adobe Flash?
when I hover the link, it shows “search post by date=8/june/2009 time=03pm”, meaning he just post a new topic, then href the link to the new topic with searching date and time of the post. Anyone can tell me how to make the blogspot page display only 1 post? Because my blogspot display all the posts together on 1 page. How to make the page display only 1 post?
hi, all, hi ZAc
thanks all for your comments, and special thanking to zac, btw zac, i was sooo busy view weeks ago, and i usually don’t remove any links, ( but i remove spam ) and i didn’t remove the links that you provided as example, it’s the site spam comments fitter,
i just saw your comments today and i added it here with the links,
and about the menu, and the hacks that you mentioned. It’s all easy and we’ll add it all and more in our blogger tricks section soon, i’m sorry for any misunderstanding,
And finally, about this hack, favicon, I’ll fix it all today at late night, and i’ll try to add how to make animated favicon too.
thanks for all.
شكرآ يآ مبدع ..
طبقت الدرس على مدونتي ..
hi kyoko, i translated your comment, thanks for your nice words.
huheheheheheh…good good…but i have do it before…thank’s for ur share by email
I guess blogspot doesn’t block the gif file. It just need about 2 hours to display my animated favicon. Wow, my blogspot has animated favicon now. Cool.
I know how to make horizontal top menu already, and each menu link to different blog that i created. so I have to create 5 different blogs – 1)2aek_homepage.blogspot.com 2)2aek_product.blogspot.com 3)2aek_contact_us.blogspot.com 4)….
I saw the nokiafever blogspot, he don’t need to create so many blogs, he just create 1 blog and upload many posts onto the blog. All his post can be separated by page, 1 page 1 post. and his top menu can link to each post. How he do that?
My blog shows all the posts in 1 page. How to separate the posts into different page?
hi zac
you can control the posts number that appear in each page at your blogger account dashboard.
or you can do it in another way that’s a little bit complicated. you give each post a unique label and then link to this label at your navigation bar, i’ll absolutely add a tutorial about it soon.
i hope that can help you.
you are welcome beben.
Hei, Max. I use the control number of post method that you teach me. Wow, I did it. It works. Cool man. Thank you so much.
hi zac
i’m glad for you, and remember, i’m always here for help.
nice post. I applied your tip and you can see it here. Windows Technology Blog
thanks palla
I LOVE THE NEW TEMPLATE “ALL BLOGG TOOLS.COM” WEB PAGE HAVE!!!
hi Jonatan Karlsson,
thanks very much for your awesome words, this is the best words i heard today.
i really appreciate your opinion.
It still didn’t worked for me
please help me! I did everyone thing right as you told! check http://pandandacheatsinfo.blogspot.com and see only bloggers icon is there, mine isn’t appearing 
~Ehtesham~
hi, Ehtesham
favicon takes from 2 hours to few days to see its effect.
Hi very nice trick. worked for me, but the icon only appears on the homepage?when i click on the posts.the default blogger icon shows up again. anybody here help me pls thanks
hi louise.
this is very wired, it’s usually a template problem. or just wait for some time.
i had the same error..
then i just change ‘ to ” in the same code.. like QiuYu said before..
i waited only two minuts, and my new icon appair…
thanks every one
thanks man……u r rocking…….i hav bcome ur fan dude..check out y…..http://hack-krishna.blogspot.com
hi hac-k-rishna
thanks for your awesome comment, you are always welcome.
hy , nice post .
but i got a problem .
i can’t find the website where i can upload the icon .
so , can u tell me ??
hi ziia
you can use this site : picpanda.com
thx
Thanks
thx a lot. very goooood!!!
After I put the two lines as you said, I lost the template of my blog…
( *
Nice trick . working fine .
@ ziia, NAD, stelaras95, sulltan, thanks dear visitors for your kind comments,
@ Laeeq, you must did some thing wrong. and as i said at the beginning, backup your template before making any changes.
hye..thanks,nice triks but i try.hm,can i know where to upload the image of my favicon?its at new posting on blogger?
@ zara, it’s very easy , just google about it. and you’ll find hundreds of free sites
This doesn’t work in IE.
@ Ehtesham , what version of IE do you use.
Awesome dude !
I CANT FIND THE HTML CODE
@ mrjack, thanks dude,
@ Jared, you must be using a custom template, please try to find similar code.
I’ve been looking for this guide over the internet. Thank you for this very informative guide. I just can’t wait for your next updates.
thanks so much for the tips..anyway I used photobucket to get the url of my favicon. i follow everything on the instruction but the favicon just won’t show up.. please help (:
The favicon doesn’t work on IE7 or 8, but if i go to some other page on my site then it works =/
~Ehtesham~
@ Last Days Callthanks , i’m very glad that it’s worked in your blog.
@ Jill, Ehtesham Please clear your browser cookies and check it again.
Thanks Man It’s easy
goooood
Hey, having the same problem as louise. Only for the homepage it is displaying. Help.
Worked for me
First favicon tutorial that Ive got to work…
I hosted through http://www.iconj.com/
Thanks
thanks sammykat, you are welcome.
I have a strange problem.
I can see the favicon in IE 8 but I can’t see it in firefox and chorme. I tried clearing the cooiies and all possible efforts.
In fact I reinstalled it 3 times.
Plz help.
hi jaydeep,
pelase note that the favicon may take a long time to appear in some browsers,
so please wait till it’ll work correctly for you, it’s history and cookies issues.
this will work for all types of images or not.please reply .thanks in advance
hi kumar, the .ico type is recommended. so you have to convert your icon image to this type.
i’ve followed everything as told i can my favico in firefox but not in ie8. Help pls.
Tq
please note that it might take some time to appear in your browser.
thanks for the info..now i have favicon in my blog
i changed my favicon but its only worling in firefox… chrome and IE show orginal….
great…i hope u will visit my blog
CPM AND CPC AD NETWORK
WEBSITE OWNERS EARN MONEY
http://WWW.ADSWORLD.TK
* Go from signup to embed code in seconds.
* Generate revenue from website or app ads, and get paid for every clickand more supported.
* Text and image ads in standard sizes.
* Live statistics on clicks, impressions, CTR and more.
* Join over 17,500 satisfied websites.
INSTANT PAYMENT WOULD BE MADE BY PAYPAL