[Edited generally 17 August 2006:] That little pic by the URL in your browser's address bar, which you see when you go to some Websites or blogs? (You'll also see the graphic on tabs if you use Opera or Firefox, or in your Favorites/Links/Bookmarks if you bookmark those sites or blogs).
It's called a favicon. Mine looks like this:
There are three steps: create the graphic; upload it somewhere that will take it; and edit your blog template or webpage HTML to include a special reference to it.
1. Creating the favicon
Creating the favicon has to be done in a particular way, if you want to get the best results, and it has to be saved as a file named favicon.ico. (Firefox will display it even if it's say a gif or jpg, but for maximum compatibility with all browsers, go the favicon.ico route. If only Internet Explorer would display favicons which weren't .ico files life would be much easier. Maybe with IE 7, who knows - I've not checked it out yet).The hard way, DIY - you can use a special icon editor (like Iconomaker). It should ideally be a merged version of two separate files of 32x32 pixels and 16x16 pixels each (detailed explanations on how to do this are at December14 and Photomatt). Or alternatively, just create a 16x16 pixel one, that'll do fine though it's not as good. You could also use a free graphics program (like Irfanview) to edit a bigger pic down and save an ico file.
UPDATE: there's even a free online favicon maker which works very well.
The easy way (which is what I did, to convert my Blogger avatar pic to a favicon), is by using the fab free service Chami - just make sure the pic you want to use is on your hard drive, then upload it to Chami as the source image, and it will do it all for you, include merging 32x32 pixel and 16x16 pixel versions and producing a Zip file you can just download and unzip. That site has lots of other helpful info about favicons too. (Remember, there may be copyright issues if you use an image created by someone else, so make sure you have permission to use whatever pic you choose).
2. Uploading your favicon
You need some webspace that will take favicon.ico files. Sadly Blogger won't, even via its newish picture posting service - it would be the best solution for Blogger users, I really don't know why they haven't allowed it yet.Any picture hosting service that will accept ico files, or indeed your personal webspace via your ISP, will do. [Added 17 August 2006:] Unfortunately many of the free services won't accept ico files, or they don't let you hotlink to them. Recently I've been using Fileden, started by the guy who originally started Filelodge but sold it (Filelodge is now pretty useless as far as I'm concerned). You can only upload ico files if you register, which it's free - so far. Also, so far I've had no problems with the service, and they told me that files are kept forever and won't be deleted, for now at least, which is good as some services only keep your files if you keep logging in to them regularly, and if you forget once you're stuffed. Once you've uploaded your .ico file, you can check it and generate the URL ("Selected files actions"), pick the Direct URLs option for the code for the link to your file. . but I use YourUpload myself; it's free and it's easy. [Edited 30 August: sod's law, they change their site the day after I post about it!] You do have to register. Make sure you note down the link to the pic you've just uploaded. On Yourupload you can find the "Get code" link for easy copy/pasting of the link to your uploaded image.
3. Editing your template or webpage
Finally you just need to tweak your template or webpage. Between the <head> and </head> tags of your template or HTML code for your webpage, just insert this code:<!-- Favicon -->
<link rel="shortcut icon" href="http://URLtoyourfavicon/favicon.ico" type="image/x-icon"/>
<link rel="icon" href="http://URLtoyourfavicon/favicon.ico" type="image/x-icon"/>
but of course you should change "http://URLtoyourfavicon/favicon.ico" to the actual URL of your uploaded favicon file (like the link you copied from FileDen earlier, if you used that service). For example mine is "http://www.fileden.com/files/2006/8/3/153331/favicon.ico".
Then, publish your template or webpage and that's it. To test your shiny new favicon, you can use Chami's helpful favicon validator or just visit your blog using your browser of choice and have a look - remember to refresh your browser at your blog page if necessary (hold down Ctrl and hit F5). If you still can't see it in Internet Explorer you probably need to empty your cache (by deleting your Temporary Internet Files - but NB that will delete lots of other stuff too, so you could try just viewing those files, searching for all the favicon.ico files in there, and deleting just those).
For those interested, the "<!-- Favicon -->" is just to help you identify the code for the favicon within your template. And the reason you have two lines, one for "shortcut icon" and one for "icon", is again on account of Internet Explorer. You need the "icon" line so that your favicon will display in the Internet Explorer address bar, next to the URL of your blog or web page. You need the "shortcut icon" line so that, when someone adds the blog to their Favorites, they can see your favicon pic in their Favorites list or Links bar, in Internet Explorer - the "icon" line by itself isn't enough to make the favicon display in Internet Explorer Favorites or Links.
Technorati Tags: favicon, favicons, favicon.ico, blog, blogs, blogging, blog tools, blogging tools, browsers, Improbulus, A Consuming Experience, Consuming Experience
21 comments:
I love favicons in my own IE6 linkbar. Problem is I don't have them too often since I'm cleaning up with Norton and it's not possible to protect the folder where they are kept (acc. to Norton support). Shame, isn't it?
Well maybe you could change the folder where they are kept, to say a dedicated favicon folder? See e.g. http://personal-computer-tutor.com/abc2/v12/vic12.htm#favicon
he he... your magic is back, wizard! I could have googled this for years without getting anywhere. Hasn't implemented it yet but it sure seems straight forward.
As I have you on the line, I've noticed that many blogspotters have a problem with their sidebars, e.g. they're falling down, and only appears after the posts. In my experience that would be b/c of a picture that is too large (bloggers rezising isn't very good I think) or more commonly for me, the wmsyghij#$@ editor can't cope with three different font sizes in two colors and bold and italics and centered text in a blog post that also has - or not- an image.
-- That isn't a question, more a suggestion if you've already blogged everything on your mind today and want to use your wand for something else.
Many thanks -- also for letting me take up so much space here / ritzy
Clicking on YourUpload opens this: http://server3.pxtek.com/suspended.page/ with the 404 error message "No such domain." I had been storing my favicon.icos at YourUpload for over two months with no problem, until a few days ago when the images disappeared.
Thanks Sereena. Looks like that site has gone - I've not been able to access my own favicon for days now too. Will have to update my post. Meanwhile, I've not tried it yet but imgzhost allows upload of ico files.
YourUpload not allow ico file upload anymore. I use geocities, rename the file as favicon.zip then upload, after that rename it back to favicon.ico.
Thanks for that info gazard, I'll update my post shortly. And that's a neat workaround.
Ripway is a free image storage site that allows favicon.ico files.
Thanks, improbulus! I now have an animated favicon at my blog.
-Cranky
The Cranky Insomniac, glad it helped.
Only thing to watch with Ripway is that now you have to log in at least once a month or you'll lose your files.
I am thankful to google for having me bumping into your post.I was looking for ways to upload icon files and then use them in blogger
Tahnks to your post.. now i upload my icon at Ripway.
This is my test post.I ahve uploaded 2 iconfiles.small..&.. big( i just changd the size).I see a border around these icons.Can u help me as to how to remove the appearence of border.I used photshop to resize and irfanview to create icon
Thks again
Deepa
http://horizonwitinus.blogspot.com
Your post had been extremely helpful.Thank you verymuch.I have mentioned this post here
Deepa
Thanks for your comments Deepa, glad it's been helpful. Hope you sorted out your border issue? Wouldn't be a problem as a favico in the browser, I would have thought, and in fact yours looks fine.
Yes.. Thanks to you:-)
You're very welcome. :)
thanks for this post.. you were very helpful..
And thanks for your comment Marnold, I'm glad my post helped.
Hi,
I am using
http://www.mobilefish.com/services/favicon/favicon.php to create my favicons. This site also contains other useful tools.
i have followed the steps and also uploaded a file in fileden. and added the links in my blog template.
but fav icon is not displaying for my blog site.
did blogger updated in such way..
please suggest the solution.
my site http://telugutrack.blogspot.com
Thanks, it works like a charm...
_ATOzTOA
www.atoztoa.com
Hello admin thanks for this post.. you were very helpful very thanks
I should have read the comments first. I signed up for Fileden, put in more details than I needed because I was signing up for "special offers" (adverts) without realising it.
I've had a load of spam come through on that email address but I'm still waiting for my validation link.
I'll try some of the other hosts suggested in the comments.
Post a Comment