Have you wondered how these little icons appear next to the web addresses, like the one you see above? When you visit the sites or bookmark them, these icons will make these URLs stand out. These are “Favicons” or “Favorite Icons”.
You would first need to have an icon which you would like to use, bearing the extension .ico format. If you search your hard disk, you might find some icons which are generic. I would suggest that you create one to represent your own unique identity. There are quite a number of free icon editor software which you can download from the net.
As for myself, I went to Download.com site and downloaded a very small program called Imagicon which can transform images into .ico format. I created an image using Photoshop. You can use any image or pictures if you do not wish to create one. Next, run the program. It is rather simple to use. While you can create icons in 2 sizes – 16x16 and 32x32 – I would think a 16x16 icon is preferable since it is readable in most older browsers.
If you do not wish to download any software, you may also try creating an icon online. Just enter the keywords “online icon generator” into your Google search bar, and you should be able to find several programs that you can try.
Once you have created an icon, save it into your hard disk. The next step of attaching the icon is a little tricky. Ideally, all you need to do is to save it in the root directory of your blog site. Nevertheless, there is no way this can be done. For one, if you try to upload an icon image, Blogger will reject it. Two, any file that is uploaded will not go into the Blogger root directory.
The only method to use will be to upload the icon into some web folder, and create a link. You can read about using free hosts like Google Page Creator and Google Groups. We have also a rather comprehensive list of free Image Hosts and File Hosting Services in our article on Manage Blogger Image Storage Space. Check out those sites and choose one that is fast, reliable and allows uploading of .ico files.
Once you have done that, take note of the URL of your icon. If you are using Google Page Creator, hovering your mouse over the link, you will see that the file is stored under a directory which looks like this http://yourname.googlepages.com/iconname.ico
where “yourname” is your Gmail account name, and “iconname” is the file name. Copy this URL.
Go back to your Blogger dashboard and under the Template tab, go to “Edit HTML”. Near the top you will see a line like this:-
<title><data:blog.pageTitle/></title> |
|---|
Update:
Copy and insert the following code below the line:-
<link href='URL of your icon file' rel='shortcut icon' type='image/vnd.microsoft.icon'/> |
|---|
Inserting this will also work but the former is preferred:-
<link href='URL of your icon file' rel='shortcut icon' type='image/x-icon'/> |
|---|
Remember to type in the “URL of your icon file”.
Save the template. When you refresh your blog site, you should see your nice little Favicon next to the blog address.
Other image types
The .ico image format has been used by many but you can also create an image under the .png or .gif format. Ensure that the size of the image is either 16x16 pixels or 32x32 pixels.
If you have a PNG format image, the link to insert is:-
<link href='URL of your icon file' rel='shortcut icon' type='image/png'/> |
|---|
If it is a GIF format image, the link is:-
<link href='URL of your icon file' rel='shortcut icon' type='image/gif'/> |
|---|
External Domain
For those who have hosted sites in external domains, insert the link in the root directory as well. Otherwise, you can upload the file into the root directory and name it favicon.ico
As an example, if your domain name is www.domain.com, the URL of the favicon will be www.domain.com/favicon.ico
This method is not preferred but a number of browser versions are able to process the icon. Since we do not have external domains to try out this alternative, you may want to see if it works for you.
Compatibility
While you can see the Favicon in Mozilla Firefox, many have problems seeing the Favicon in Internet Explorer. This is a known problem and has been a sore point with many IE users. In some versions of IE, bookmarking the site will display the Favicon. This is not necessarily so in IE7 that we are using. In fact, when we bookmarked the highly popular search engine sites, their Favicons don't show in our IE bookmarks too although they show well in Firefox. Perhaps this is one more reason to download Mozilla Firefox if you have not already done so.
© Tips for New Bloggers
74 comments:
Just stumbled on your site after doing a search for how to change the Fav Icon when using Blogger. Worked like a charm! Gonna read through you other posts now and see what else I can learn to geek-out my daughters blog; www.deannafemoore.com
Cheers,
James
this post is awesome!! Thanks for the tip!!
great explanation!! greets, Mark
My Blog.. I guess
Totally helpful. Thank you so much.
Oh, don't go to the site. It's smutty. But this worked!
Very nice post!! Thanks for the tips.
really rockz!
Wao this work perfect...
I love it. I thought it would be really complicated, but it worked the very first time. Thanks so much.
Worked like a charm. However I had an issue with Google Page Creator, it displayed the Google Page Creator logo instead of my icon. I had to resort to 'geocities' *shudder*. Works great, although it first loads with the Blogger logo then after a few seconds changes to mine...
http://life4two.blogspot.com/
While leveraging Google to host the images and apply that to Blogger is ingenious. Nice work.
One thing I should point out however ... this method will only work in Firefox, not IE.
IE grabs the icon from the root domain, in this case blogspot.com. If you save your blog as a Favorite in IE, then it will show the orange Blogger B
Hello there. Thanks a lot. For me, it works perfect on both IE and Firefox.
I am using IE7 and Firefox2, running on WinXP Pro and the other on WinXP Home. I bookmarked your site in both browsers and the icon shows!
nice work.. it work perfectly with my page.. thanks a lot bro..
It worked great for a day and now when it I look at the template it will not keep it in the same code. It changes the " to ' and changes the order of the code. Any suggestions???
Hi About Us
Don't worry about it. When you save the template, Blogger automatically standardizes the code and rearranges some of the elements. The substance is the same.
We sometimes explain codes in a way that is easily understood by most of us. What matters is that the Favicon code works, which in your case it does. I see your favicon in my browser. And you have a nice template too.
I was looking at a way to upload files into blogger root directory when I came across your blog and it is very helpful in making me realise there is no way to change the root directory of blogger.com itself.
I was trying to add my favicon based on some other guide in the net and it didn't say if it workds for third party blog sites.
Thanks a lot mate, I'll try this when I get home.
You can host an icon here http://www.imagedip.com/
This is where I have my "favicon" hosted.
I'm sure I'm doing something wrong although I'm following your instructions to the letter (which has worked for me on a number of other topics here), but google page creator uploads the file but doesn't give it a link so that all I can do is download it if I try to open it. I'm thinking perhaps the file is too small or something? (3kb) I truly have no idea, I can't figure out what I did wrong.
Hi Hilda
You probably did everything right. You can't click to open .ico files. What we want to do is to obtain the image URL which goes something like this http://yourname.googlepages.com/iconname.ico
And when you have that URL, you can insert it into the template. The browser will pull this icon and display it in the browser window.
the problem apparently occurs when I upload the ico file to google page creator, it uploads the file but says that most browsers do not support this type of file. The file is in the image section but doesn't appear in the page no matter how I try to upload it, so that if I roll over the file name, the only thing that appears is a query as to whether I want to download it. Am I explaining myself clearly? I'm looking for other favicon hosting pages right now.
never mind, I got it to work with Google Groups, oddly enough.
Thanks a lot for your help, and for creating this site overall. It's the only site that gives clear step-by-step explanations on how to modify blogger code.
Hi Hilda
Glad that it works. I can see your S&B icon in the browser :)
Just an explanation - the file .ico is unlike other image files. When you have uploaded it, it will show in the Uploaded Stuff section. You can't click the link. But when your cursor is over it, you can see the URL of that ico file.
Well, Google Groups is also a good place to store files. What I like is that we can organize the files and folders. For example, you can have images for one blog stored in one folder, and images for another blog in a separate folder. Easier to manage.
Thanks for the info. I uploaded the file to my account on Ripway and it worked great.
Hi!
I have some problems with the favicon.
It simply doesn't appear. But I did
exactly what you wrote... :-(
Can you help me, please? Thank you!
Hi Cornelius
Would you like to put the link into your template so that I may take a look? Presently, all I could see is link rel='' under the Title.
Done! I added the link Google Groups gave me. Thank you so much for your help!
Now it works! I added this:
*link href='LINK TO ICO' rel='Shortcut Icon' type='image/x-icon'/*
Don't know why... thanks again!
Hi! from down under. Have spent hours trying to add a icon to my post title. Failed! But have not given up! To take my mind off my obesssion I found something else to do. Found your site, did what you said, & hay presto got it to work.
Regards Peter McCartney
http://stvincentsdarlinghurstmalenurses.blogspot.com/
worked well on one of my previous blogs, but not working on this!!!
please take a look:
http://chemical-magic.blogspot.com
Awesome! Just added one to mine. Thanks!
Hi goodearth
If you look at your favicon link, you have an extra " at the beginning. You may want to remove it. It should work fine.
Quick and easy. Thanks.
many many and many thanks. you are great.
goodearth
That's awesome! Worked great!
This is exactly what I've been looking for but it's not working.
I uploaded my file to my googlepage and copied the code as shown to my template. I *do* have a a favicon now, but it's the same as GooglePageCreators! (Like a blue folder/window in front of a maroon folder/window.)
The favicon I have uploaded should be a letter S on a maroon background.
Any chance you'd take a look and let me know what's up? Thanks!
Hi Tee
Would you care to upload the icon again but this time rename it to something else? Like spiltmilk.ico or whatever? I do not know the actual cause. Our link is via googlepages too.
Changing the name of the icon worked! I <3 you. LOL.
Perhaps Googlepages calls their favicon "favicon" - and that's why I got theirs instead of mine.
The big problem I ran into was that every favicon generator that I used automatically named the file favicon.ico - and wouldn't allow me to rename it.
I had to download a (free) program called Irfan View and rename the file in it (since I couldn't name any files with the extension .ico in any of my regular graphic programs.)
Hope that helps anyone else who runs into the problem.
Thanks so much! I've wanted a favicon for months and kept giving up. I thought it wasn't possible on Blogger. Awesome :)
I have been trying to figure out how to do this forever! I wish I had found this then. Thanks so much for all this great information. Now I am truly a custom blogger. :)
I have a blog published via FTP.
It's hosted on free webspace from my ISP, so the blogger "site name" isn't the true address of the blog, if that makes sense.
Anyway, if I type in "www.Blogname.com", I don't get a favicon at all.
If I type in "www.myisp.com/~username" I get the favicon I've set up.
Both of these access the same file, which is stored at myisp.com/~username/index.html
Does what I'm saying make sense?
So the question is: is it possible to make the "Blogname.com" url load the favicon?
Hi Matt
If you have root access to the files, you can upload the icon into the root directory. Name it:- myisp.com/~username/favicon.ico
Let us know if it works as we have no experience with FTP publishing.
I have the favicon uploaded as you suggest:
myisp.com/~username/favicon.ico
And it works if you go to
www.myisp.com/~username/
But if you type in
Blogname.com
it doesn't work.
Now here's something I noticed.
If you go to blogname, and click on "view source" you get this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>Blogtitle</title>
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</head>
<frameset frameborder="0" framespacing="0" border="0" rows="100%,*">
<frame name="TOPFRAME" src="http://myisp.com/~username" noresize>
<noframes>
<body>
<h1>Blogname</h1>
<br>
<br>
<br>
Click here to enter <a href="http://myisp.com/~username">http://myispa.com/~username</a>
<hr>
</body>
</noframes>
</frameset>
</html>
Needless to say, this is not a file that exists on the FTP server.
So where does that leave me?
Other than confused, I mean.
Ah. I think I've figured it out -- that's not a blogger page; it's the URL "forward" from the domain registrar.
Thanks,
Matt
Hi!
Thanks for the great tip. It worked very well on my blog - http://ztrixq.blogspot.com/
-ZtrixQ-
After many successful attempts to create a favicon for my blog, I really got frustrated and was about to leave off trying again.
Just in time, I came across your blog and it was a very simple hack unlike the confusing stuff I read earlier.
Thanx a lot. I mean it.
My problem here is that I don´t know how to get images with .ico extension. ¿Can you help me on this?.
Hi Félix González
We used a free software called Imagicon. What it does is to take any image that you have and convert it into a small .ico file. It can be your photo, a logo, etc. You can also search the net for 'icon generators' and try those services.
U are running a blog with very nice stuff dude.. I have added music icon to my blog www.distractedguy.blogspot.com
Anyway all the best..
Thank for this Tip
very helpfuland it work for my blog http://lde-sap-bw.blogspot.com/
I did it, I did it, I did it!!! Thank you so much for this site ... where have you been all my life? ha!
Oops ... mine stopped working now. What happened? It worked like a charm and now it just vanished.
Hi dixychik
What is your blog URL? We can see if it has been correctly inserted. Sometimes it can happen because different browsers and versions of browsers behave differently.
Hi.
http://dixychik.blogspot.com/
Nothing much there yet because it is brand new and I am still trying to figure out how to get a background tile on it, and make it 3 columns. But if you have time to look at my little favicon, I'd appreciate that very much.
Hi dixychik
I can actually see your nice pink favicon in both IE and Firefox browsers. Maybe you can ask your friends to view your blog just to confirm that they can see it too.
Thanks for checking it for me! I can see it in my Favorites folder on the link to that site, but when I get to the site, I can't see it at the top of the page. I could when I first installed it, but now I can't ... isn't that weird? I am using IE. My computer is giving me fits, so maybe that is the problem, but as long as you can see it, I'm happy ha! Thanks again, and I greatly appreciate your site!
mine doesn't work on IE7 and Opera Vista/winXP. works great on Firefox though. Care for anyone to check my site www.vinceandcarla.com
Hi vinceandcarlaplus
This seems to be a known problem in IE7. Let's hope MS will do something about it.
OK your advice seems to work for most people, unfortunately it doesn't work for me...
I'm assuming it's because I'm having my custom domain name forwarded (cloaked) to my blogspot address. Right?
I used to have my own Favicon but it has now been replaced by Blogger's "B".
Any idea how I can display my own Favicon keeping in mind my custom domain name is cloaking the blogspot address?
I thank you in advance.
Regards,
Hi dm
You can let us have your blog url if you want us to take a look.
thanks for this!
dm - i'm doing the same thing as well (using my own domain) and it seems to be working fine.
Hey!
Thank you for this advice!
At first I couldn't find where to put that favicon link, but then, accidentaly, I found it's on the very very top of the code...
Works just fine!
Take a look-
flickzzz.com
First I just wanted to say that your site has been extremely helpful, it's making the setup of my website much easier.
I wanted to know if you had a solution to my problem. I have a favicon that is hosted at myfavatar and inserted the code into my blogger site. The favicon shows up and works perfectly fine if the site is accessed through its www.xxxxx.blogspot.com address. However, I have the site forwarded to the blogspot address from its www.xxxxx.com address, which I purchased from godaddy. The site is forwarded and masked with the www.xxxxx.com address, but the favicon does not appear when accessed through the main, forwarded address purchased from godaddy.
Was wondering if you knew a way for the favicon to show up on main address (that fowards to the blogspot address)
Hi Ralph
If you are able to upload files into the root directory, upload the icon
and name it favicon.ico The url of the icon should be:- www.xxxxx.com/favicon.ico
it works woth animated gif too.. i thought i wolud'nt .. so i give a try and.. WOW..!! it really works.. thanks man..
I came across your blog while trying to troubleshoot a problem I am having with NOT seeing my favorites icon on my personal website. I, too, use URL forwarding to my website: www.mydomain.com is forwarded to http://mysite.verizon.net/mywebsite. If I enter http://mysite.verizon.net/mywebsite in my browser, I see my favorites icon. But if I enter www.mydomain.com I don't see it.
I put the link statement in the HEAD section of my index.html page. So how do I get it to work with the URL forwarding?
Thanks,
Grace Anne
Hi BizWhiz,
I did exactly what you said for both my blogs and it worked on both yesterday. Today it doesn't work on one blog (http://mindfulmimi.blogspot.com/) anymore. Any suggestions?
Hi Grace Anne
We mentioned external domain sites in our article. However, as we had pointed out, what we wrote was based on literature we read from the net and books. We could not test it because we do not have any external domain sites.
You could add the link in both the domains. Alternatively you could upload the image icon into the root directory and the icon will have to bear the URL www.mydomain.com/favicon.ico
If these can't work, I'm afraid you would have to source the net for guides from people who have external sites and are able to link to their favicons.
Hi MindFul Mimi
I am viewing your blog in both IE and Firefox and I can see your favicon. There is no guarantee that the favicon is read all the time in all the browsers.
thanks for that helpful tips..now i can have my own favicon at my blog
Favicon worked for me at the first attempt, just following your instructions. Thanks for posting this useful stuff.
Thanks alot for this great tip!
Works great!
This worked great for my site! Praise to the techno gods.
www.TheArtistGrimoire.com
Thanks,
Brenda
I have found this guide very helpful and easy to follow. Thank you!
i'm having the exact problem as matt's.
whenever i enter the original address: name.blogspot.com,
i get the favicon.
but with my custom domain:
say name.net; favicon's gone.
you said that the favicon must be uploaded onto the root directory, right? can you tell me how to actually upload one?
thank you very much.
Really nice info... I just used this on one of my Blogs that use the New Blogger Templates...
You can also use: type='image/jpg'
For Jpeg's but I Internet Explorer still looks for .ico files and will not display it tho Firefox & Opera will display gif's png's and jpg's...
it only read the favicon on the mainsite as soon you enter by a subsite on your post titles it takes google blogger default icon if it's not in browser catch.
I think have to remove the whole blogger meta generator part and replace all meta tags manually. Possible will work only with blogger one (not the new blogger).
Leechermods.blogspot.com
I have something to say ...