That little pic for your blog... (favicons)Monday, August 29, 2005
[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: . If you want one to display whenever people visit or bookmark your blog or website, here's how to do it, as requested by DC. (But note that not all browsers can view favicons, although the latest versions of most should).
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 faviconCreating 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.
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 faviconYou 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 webpageFinally 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