Creating our new Website FavIcon (Favourite Icon)
Back in May I wrote an article explaining about Blogger's new favicon and what favicon's are.
For a recap of the purpose and benefits of a 'Favourite Icon' (or 'Favicon'), read the original article!
At the time I said that I'd had the task of producing a favicon for our Gite website on my 'to do' list for some time but still hadn't had the time to create one.
Well for once I actually left the office last night at a half-reasonable time (8pm as opposed to 10pm or 11pm which it sometimes is) so I had some time to myself in the hotel I was staying in.
Trying to draw a firm line between work and home I resolved to not spend the evening wading through the hundreds of unread emails I still hadn't dealt with and would spent my time doing something for me, i.e. working on a favicon.
I'd had the idea for what I wanted the favicon to be for some long time - to blend together the black and white stripped Brittany Flag (the Gwenn-ha-du - literally Black and White in Breton) and a love-heart symbol.
I thought this would be nice and simple, and hopefully iconic and memorable enough.
Back Searching on Google for Brittany Flag I came across Wikipedia's Flag of Brittany entry and this rather nice commons licence copy of the Gwenn-ha-du.
Favicon's need to be sized as either 16 by 16 pixels or 32 by 32 pixels and the Microsoft Icon format allows both types to be embedded into a single file so the first thing I needed to do once I'd saved a copy of the flag found on Wikipedia was to reduce it down to 32 pixels wide.
This resulted in an absolutely awful image with indistinct stripes in varying shades of grey and black so I had to spend quite a bit of time with Photoshop's pencil brush manually editing the individual pixels of the picture to make the image more clear, both when viewed at 32x32, but also when reduced to 16x16.
Next job was the love heart. This was somewhat easier as I found a suitable picture in the Microsoft Word clip-art gallery which I copied into Photoshop, cropped it down to just the central heart, selected and then removed the surrounding pink background using the magic-wand tool, and then resized it to 22 pixels wide.
Finally I copied the love heart into a new layer above the Brittany Flag and then carefully copied, nudged and pasted the heart into the right alignment against the flag. I'm sure there is an easier way to move layers around in Photoshop but I don't know what it is so this last bit was somewhat laborious.
And this is the completed 32 x 32 pixel result which overall I was quite pleased with.
I did try some other variations of orientation of the flag and heart, and I briefly experimented with writing 'GITE' at the top of the icon, but none of these really looked good - you can see some of the trial attempts on the picture at the top of this article.
Having got a picture in Photoshop I was happy with I used my favourite Image viewer/converter, Irfanview to convert the .PSD to a .BMP and I then used Chami's FavIcon Generator to create the Icon File. You upload a normal picture format to the Chami website and it converts the picture to 32x32 and 16x16 pictures and then embeds them together into a single .ICO icon file.
All that was then required to associate the icon with my website was to upload the favicon.ico to my website and then change the website template to include a reference to the icon file in the HTML <HEAD> section like this:
<LINK rel="shortcut icon" href="http://www.giteinbrittany.com/theme/favicon.ico" >
And that's it, all finished. If you now view our Gite website or this Blog in either Firefox or IE7 the icon should be shown on the tab bar, and if you bookmark any of these pages the icon should again be shown against the saved bookmark.
I did find reference on Wikipedia's FavIcon entry to the above not being valid W3C HTML and that I should be using
<link rel="icon" href="http://URLtoyourfavicon/favicon.ico" type="image/png" >
or
<link rel="icon" href="http://URLtoyourfavicon/favicon.ico" type="image/x-icon" >
But what I'd written seemed to work in the browsers I use, it passed the W3C website validator test, and sampling the many websites I currently have open in Firefox showed that they all either used the rel="shortcut icon" coding or were using the old IE approach of relying upon the icon being named favicon.ico and it being stored in the website root directory, so I decided there wasn't sufficient justification to do anything different from the rest of the website 'flock' and it was job done!
Hope you like it - please do drop a comment on your thoughts - good, bad or ugly?
For a recap of the purpose and benefits of a 'Favourite Icon' (or 'Favicon'), read the original article!
At the time I said that I'd had the task of producing a favicon for our Gite website on my 'to do' list for some time but still hadn't had the time to create one.
Well for once I actually left the office last night at a half-reasonable time (8pm as opposed to 10pm or 11pm which it sometimes is) so I had some time to myself in the hotel I was staying in.
Trying to draw a firm line between work and home I resolved to not spend the evening wading through the hundreds of unread emails I still hadn't dealt with and would spent my time doing something for me, i.e. working on a favicon.
I'd had the idea for what I wanted the favicon to be for some long time - to blend together the black and white stripped Brittany Flag (the Gwenn-ha-du - literally Black and White in Breton) and a love-heart symbol.
I thought this would be nice and simple, and hopefully iconic and memorable enough.
Back Searching on Google for Brittany Flag I came across Wikipedia's Flag of Brittany entry and this rather nice commons licence copy of the Gwenn-ha-du.
Favicon's need to be sized as either 16 by 16 pixels or 32 by 32 pixels and the Microsoft Icon format allows both types to be embedded into a single file so the first thing I needed to do once I'd saved a copy of the flag found on Wikipedia was to reduce it down to 32 pixels wide.
This resulted in an absolutely awful image with indistinct stripes in varying shades of grey and black so I had to spend quite a bit of time with Photoshop's pencil brush manually editing the individual pixels of the picture to make the image more clear, both when viewed at 32x32, but also when reduced to 16x16.
Finally I copied the love heart into a new layer above the Brittany Flag and then carefully copied, nudged and pasted the heart into the right alignment against the flag. I'm sure there is an easier way to move layers around in Photoshop but I don't know what it is so this last bit was somewhat laborious.
I did try some other variations of orientation of the flag and heart, and I briefly experimented with writing 'GITE' at the top of the icon, but none of these really looked good - you can see some of the trial attempts on the picture at the top of this article.
Having got a picture in Photoshop I was happy with I used my favourite Image viewer/converter, Irfanview to convert the .PSD to a .BMP and I then used Chami's FavIcon Generator to create the Icon File. You upload a normal picture format to the Chami website and it converts the picture to 32x32 and 16x16 pictures and then embeds them together into a single .ICO icon file.
All that was then required to associate the icon with my website was to upload the favicon.ico to my website and then change the website template to include a reference to the icon file in the HTML <HEAD> section like this:
<LINK rel="shortcut icon" href="http://www.giteinbrittany.com/theme/favicon.ico" >
And that's it, all finished. If you now view our Gite website or this Blog in either Firefox or IE7 the icon should be shown on the tab bar, and if you bookmark any of these pages the icon should again be shown against the saved bookmark.
I did find reference on Wikipedia's FavIcon entry to the above not being valid W3C HTML and that I should be using
<link rel="icon" href="http://URLtoyourfavicon/favicon.ico" type="image/png" >
or
<link rel="icon" href="http://URLtoyourfavicon/favicon.ico" type="image/x-icon" >
But what I'd written seemed to work in the browsers I use, it passed the W3C website validator test, and sampling the many websites I currently have open in Firefox showed that they all either used the rel="shortcut icon" coding or were using the old IE approach of relying upon the icon being named favicon.ico and it being stored in the website root directory, so I decided there wasn't sufficient justification to do anything different from the rest of the website 'flock' and it was job done!
Hope you like it - please do drop a comment on your thoughts - good, bad or ugly?
Labels: Website
posted by Geoffrey at 9:30 am Permalink
0 Comments:
Post a Comment
<< Home