Create A Favicon For Your Website
Fastest, Easiest and The Best Method Available On Internet
(You may even directly use an animated *.gif image as a favicon)Fastest, Easiest and The Best Method Available On Internet
This is the easiest way to create a Favicon (the small icon of a website visible at the along the url in the address bar) for your website !
There are many favicon generator websites, where you have to first upload a picture, edit/crop it and finally you get a *.ico that you can not even easily open to see, before you use it. Moreover if you want an animated *.gif image, then it makes the process even more difficult.
So finally here's the most simple code, edit & add it in the "head" region of your blog/website.... thats it!
You will see a new favicon the next time you open your website.
Log in to Blogger -> Layout -> Edit HTML
Find this in your template
</head>
And immediately ABOVE?BEFORE it, paste this code:
<link href="http://YOUR_IMAGE_ADDRESS_HERE.gif" rel="shortcut icon" type="image/vnd.microsoft.icon"></link>
Replace the link in RED, with the DIRECT LINK to your favicon-image.
To get the direct link, upload the desired image here first - Tinypic
49 comments:
How do I make animated favicon then?
If you use an animated image [animated gif image], then it will be displayed along with its animation, it's better if you use an image of 60x60 or 80x80 dimensions !
Thanks!
But on one of my blogs, the favicon is not working even though the code is the same as the blog that is working. What should I do?
hi snam
Find this code in your template:
</head>
them IMMEDIATELY ABOVE IT, add that favicon code, that's it !
I just added the code in the correct and it is not working. Does blogger not allow this? I am REALLY new to editing HTML but have been pretty successful so far. Any suggestions?
Hello "The Root's"
I have checked the source code of your blog, you have placed the code above <head>
but you have to place it above </head>
So correct this placing, and it will start working !
Regards
Sai
Sai,
Thanks so much for the response. I corrected the placement issue and it's working great in Firefox but not IE. I will have to work on that issue.
I have to say I have been having a lot of fun creating this blog for my sisters family - The Root's. They had one through their adoption agency that was not the best and rather boring.
There are still a few things I need to work on and add. I do not like the fact that on tab in Firefox the entire Blog name is not listed. I have tried to fix it without luck. I know it's because of how the header on the page reads. I need to read some books so I understand the html code better.
Thanks again for all of your help :-)
Laura
Hello Laura
1. The favicon you are using is an animated image(.gif), which will therefore doesn't appear in IE, you can use a normal .jpg image, if you want it to be displayed in IE.
2. You are always welcome on this blog....make the best blog for your sis - good luck for that.
3. To Display the complete title in your Internet browser's tab;
You'll see this code in your blog (5th or 6th code line in your template):
<title>Waiting For</title>
So replace "Waiting For" with "Waiting For Maisy"
Thats it !
Regards
Sai
And Laura, recently when i checked your blog, the favicon wasn't being displayed, that is not because of any code error, but the image address (http://sig.graphicsfactory.com/Diamonds/m.gif) itself wasn't working.
So i suggest you to change the image host.
Download that image or any (small)image and upload it to gigaimage.com, copy the direct link and paste it in the template.
THANKS so much Sai! It all works now.
I am sure I will be back for additional advice in the near future :-)
Laura
Well Sai,
I spoke too soon. I just opened the blog in IE and my favicon does not appear. It is still using the Blogspot one. Looks great in Firefox :-)
Make sure that this code is DIRECTLY above the
</head> line, and nothing is in between them.....tell me if it works or not !
Good luck !
So How about for www.sitename.co.cc! How to change the icon of !
Sai,
Well, it is directly above head and works great in Firefox, just not IE. I rarely use IE, but would still like it to work both places. Any other suggestions? I am such a newby that I cannot figure out where the error is.
Thanks again for all of your help :-)
Laura
Hi Laura
Well there are some issues with IE, you first try to bookmark your blog in IE (then restart IE) and see if it works.
-*-*-*-*-*-*
Otherwise replace the previous code with these two lines:
<link rel="Shortcut Icon" href="favicon.ico">
<link rel="icon" href="favicon.ico" type="image/x-icon">
replace bolded regions from both the lines, with the address of the ico file
now you CANNOT use any jpg or gif image, rather you have to use a .ico (an icon image)
You can use this web site to convert an image into a .ico file:
www.degraeve.com/favicon/
then upload it to hotlinkfiles.com to get a direct link and paste it in the code.
@ GNJ
as you are not on Blogger platform, so if you have the access to your template then follow the above described method, in case of doubts, you can ask here
Regards
Sai
Thanks for all of your help sir!
For this site http://shanworld.co.cc/index.html/ he can change the icon! i don't how he did!
I will try as you said!
co.cc only provides you with a domain name, so you can of course change anything you want:
For ex, take hosting from
110mb.com , or
freehostia.com
And take a domain name from co.cc,
now redirect this domain to your hosting account,
and upload any index.html file to your hosting (with any favicon etc.),
that's it !
Now you'll have a domain name from co.cc while you'll be having all the control over the website !
If you want to combine Blogger and co.cc or Blogger and 1and1.com, read here:
Domain And unlimited Hosting From Blogger
Hi I get this error when I try to past it:
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 reference to entity "feat" must end with the ';' delimiter.
This is what I'm trying to paste: <link href='http://picasaweb.google.com/lh/photo/eR6GdI8nraLupCUjAg5WOw?authkey=Gv1sRgCM2IssadtcTCgQE&feat=directlink' rel='shortcut icon' type='image/vnd.microsoft.icon'/>
Can you tell me what I'm doing wrong>?
Hi Shesten,
There's no entity as "feat" in this code, so that error is due to some other widget/hack in your template ...
Interesting! Thank you!
Hi Divya. is changing Favicon for blogger/Blogspot are allowable?
Yup as far as I know there's no problem in using a customized favicon...
Thanks
Hi,
I'm trying to get mine to work in both IE and Firefox. My blog is: www.SensoryEscapeImages.Blogspot.com
When I try it one way, IE works but FF does not.
When I switch it, then FF works and IE does not. Any thoughts?
Thank you,
Nathan
actually...today it's working great on both. Please disregard my previous inquiry and thank you for your tutorial!
i have many javascript scripts of which some are like falling animation leaves, hearts scripts and some are text following mouse, clock following mouse and other good scripts, actually the main problem is that i dont get ouput for any of this scripts put on my blog .
sometimes i get an error and if no error then the effects are also not seen, why is that problem comes,can\'t we have output of any javascript scripts on our blog www.webprogrammingscripts.blogspot.com or if we can have it then what is the procedure for this.
please reply soon i would like to know the real reason for this.
thanking you
Well you can certainly have scripts working on your blog...but tell me exactly which one are you trying to add?
Hi Sai,
Thank you so much for this! :)) It works well in my blog.
thank you!!!
I want to have a simple icon, like yours ruther than blogger. I think its the default icon. Can u please provide a link or code for it, please......
Hey John, use the exact code from the tutorial explained above, replace the line highlighted in red with any image/icon you want to use as your favicon. you want the exact revolving "s" symbol or any icon similar to it?
I wanted the default icon which shows IE-page in internet explorer and revolving "S" you mentioned in mozilla. I think i have to delete the favicon so something. Can u please provide a link,code or some instrructions for this.
Tutorial is the same as explained above, just replace the link in RED with this one:
http://i49.tinypic.com/2zimxpk.gif
Hi Divya,
thks for sharing this tricks, i really like your favicon, it spinning. I want make it to but how, please tell me how to do it?
Thanks
You can display animated images too, as I have explained in the post, use small-animated images...
Hi Divya
I now how to add favicon on my blog. But i mean how to make a favicon spinning like yours. I want to make it please tell me
Thanks
Hi Divya
I now how to add favicon on my blog. But i mean how to make a favicon spinning like yours. I want to make it please tell me
Thanks
I am using the rotating letter "S", cause my name starts with it. You can also search for any other image/icon with animation, and link it in the code above.
Here search like this:
G-Image search
and use any of the freely available animated image.
@Aldy
Don't copy my site's design/format ...it looks like a phishing site!
thx divya sai..:)
btw, i need u help!!!
Can u make me a favicon as u have the symbol H, pleaze..:)
ya friend i tried this in more site
but onb last attempt your code is look coorect
thank u and great
Hi,
I followed your directions above, but I do not see my new favicon showing (I am using IE 8.) Any suggestions?
Thanks,
www.frufab.blogspot.com
The image you are using is too big, so it is taking time to load. First resize it to around 50 pixels width. Then re-upload and link it in the code.
Hi, thanks for the quick response! I did what you suggested and still do not see it.
Thanks,
www.frufab.blogspot.com
Okay I've made the appropriate changes and my frog icon will show up briefly and then it returns to the B symbol again. Do I need to remove some coding to prevent the blogger symbol from taking over?
http://darwinsfrg.blogspot.com
Oh, and on my other question, about the Navbar...I figured out the answer :-)
Ah geez. Never mind. I figured it out. I need to pay attention. Like a previous commenter I had the code in the wrong place.
Thanks a ton!
Not working. Icon appears only for a few seconds and disappears. Had to resort to the old technique that I was using. But the problem with that was that, it disappears after a few hours or so.
And also appears only for the homepage. Can you tell me how to make it appear in all the pages.
http://chelseafcchampions.blogspot.com/
it works great on firefox thansk for posting I have been looking along time for it
Allowed HTML tags: <b>, <i> and <a>
Join and share your views with other bloggers at BloggerStop Community
Comment Like This! and Optimize your blog...
SPAMMER OF THE MONTH: www[.]TopRankLinks[.]com