Web icons
You want to know a pet peeve of mine?
Web pages that don't have an icon.
I didn't care when I was restricted to using IE for most of my browsing, since IE has lousy support for the little icons that appear next to the URL - it only shows them if you bookmark the site, and even then it only shows them IN the "Favourites" list.
But now I can use Firefox the whole time. And it is my habit to have my bookmarks visible as a sidebar at all times. So I no longer like websites not having one of those little icons, as it spoils the look of my sidebar :o)
And it's not like it's hard to do it. When I first went in search of a guide to doing it, I was expecting to have to jump through all sorts of hoops. Instead, I found there are two main ways of doing it, and they're both laughably easy.
The first method is based on the fact that the little picture was originally there to pretty up your "Favourites" menu. It worked simply enough: Create a small (16x16 pixels) icon file named "favicon.ico" and put it in your web page's root directory. Ka-ching, every favicon-supporting browser will automatically look for this file. No coding necessary, the file just has to exist to be used.
The downside is, most common graphics packages don't do .ico files. So you might not be able to use the first method.
But that still leaves the second method, usable by anybody: You save your little 16x16 image as a PNG or GIF file - in fact, I've even seen an *animated* GIF file used as a Favicon.
The downside is, browsers only look for the favicon.ico files. So this approach needs some code to be placed in your web page. No big problem, all you need is to locate this inside your <HEAD> tags, and you're away:
<link rel="shortcut icon" href="favicon.png" />
<link rel="icon" href="favicon.png" />
<link rel="shortcut icon" href="favicon.png" />
The above example assumes you used a PNG format and called it "favicon.png", but you could use "wibblenertz.gif" for all it matters - so long as the icon is present in your web directory, and called whatever the code says it is, it'll work.
As easily as that, you have a little icon that will show up in any decent browser beside your URL, and in most others in your list of bookmarks.
Innit marvellous?
Web pages that don't have an icon.
I didn't care when I was restricted to using IE for most of my browsing, since IE has lousy support for the little icons that appear next to the URL - it only shows them if you bookmark the site, and even then it only shows them IN the "Favourites" list.
But now I can use Firefox the whole time. And it is my habit to have my bookmarks visible as a sidebar at all times. So I no longer like websites not having one of those little icons, as it spoils the look of my sidebar :o)
And it's not like it's hard to do it. When I first went in search of a guide to doing it, I was expecting to have to jump through all sorts of hoops. Instead, I found there are two main ways of doing it, and they're both laughably easy.
The first method is based on the fact that the little picture was originally there to pretty up your "Favourites" menu. It worked simply enough: Create a small (16x16 pixels) icon file named "favicon.ico" and put it in your web page's root directory. Ka-ching, every favicon-supporting browser will automatically look for this file. No coding necessary, the file just has to exist to be used.
The downside is, most common graphics packages don't do .ico files. So you might not be able to use the first method.
But that still leaves the second method, usable by anybody: You save your little 16x16 image as a PNG or GIF file - in fact, I've even seen an *animated* GIF file used as a Favicon.
The downside is, browsers only look for the favicon.ico files. So this approach needs some code to be placed in your web page. No big problem, all you need is to locate this inside your <HEAD> tags, and you're away:
<link rel="shortcut icon" href="favicon.png" />
<link rel="icon" href="favicon.png" />
<link rel="shortcut icon" href="favicon.png" />
The above example assumes you used a PNG format and called it "favicon.png", but you could use "wibblenertz.gif" for all it matters - so long as the icon is present in your web directory, and called whatever the code says it is, it'll work.
As easily as that, you have a little icon that will show up in any decent browser beside your URL, and in most others in your list of bookmarks.
Innit marvellous?
2 Comments:
you think blogger would chuck a wobbly for changing their favicon? thanks for the great tip.
oh yeah- http://freshmeat.net/search/?q=ico§ion=projects&Go.x=0&Go.y=0
this is the search result for ico on freshmeat.
Post a Comment
<< Home