Creating a website favicon
You see that little icon in the top left corner of your browser at the beginning of a url? That is the favicon and is a way to make your website stand out in peoples favourites list. We are often asked how to to these and it is in fact quite simple using the right software.
We use Microangelo's Studio, part of Microangelo's Toolset, available from http://www.microangelo.us/. Normally we will create an image and then make sure that the background is transparent. We then export that image (we use photoshop for this) in png24 format. By using a transparent background it appears to look nicer in the browser. You will notice on ie7 that the url background colour can change when you click in it and has a grey look when it does not have focus. A transparent background makes it look good in either case.
Open up Microangelos Studio and import the png file. You can then automatically create a favicon. Use the size 16x16 and save as favicon.ico (ico being an icon file). Upload this to your website then in the <head> of your site use the code:
<link href="http://www.yourdomain.co.uk/favicon.ico" rel="shortcut icon"/>
There you go. You probably won't see it instantly as you will need to clear your cache on your browser.
An update to this blog 30/7/08
You can generate favicons for FREE at http://www.favicongenerator.com/
We use Microangelo's Studio, part of Microangelo's Toolset, available from http://www.microangelo.us/. Normally we will create an image and then make sure that the background is transparent. We then export that image (we use photoshop for this) in png24 format. By using a transparent background it appears to look nicer in the browser. You will notice on ie7 that the url background colour can change when you click in it and has a grey look when it does not have focus. A transparent background makes it look good in either case.
Open up Microangelos Studio and import the png file. You can then automatically create a favicon. Use the size 16x16 and save as favicon.ico (ico being an icon file). Upload this to your website then in the <head> of your site use the code:
<link href="http://www.yourdomain.co.uk/favicon.ico" rel="shortcut icon"/>
There you go. You probably won't see it instantly as you will need to clear your cache on your browser.
An update to this blog 30/7/08
You can generate favicons for FREE at http://www.favicongenerator.com/
Labels: favicon, web design
posted by Web-Studio
0 Comments
