|Downloaded from www.biorust.com on Thu Jun 20, 2013 13:06:27|
|Creating & Using Favicons|
Tutorial Author - Man1c M0g (http://forums.biorust.com/member.php?userid=1)
A favicon is a little icon that appears next to a website's URL in the address bar of a browser and/or bookmarks area. Not all sites have them, of course, but go to any large commercial entity (i.e. eBay, Adobe, etc), and they will be clearly on show (depending, of course, on your browser's age and support for the feature). Whilst by no means an essential part of any website, favicons are a great way to make your site stand out from the crowd, and work well in maintaining a design theme. Here's how you make them...
1: Photoshop does not come with the ability to save Window's icon (.ico)
file formats as standard, so you need to download a plug-in before you can
have exactly what you need, so you should fetch the plug-in from them and
install it before proceeding any further. It's a free download, capable of
supporting ICO files in 1, 4 and 8-bit Indexed and 24-bit RGB modes, and
also reads and writes 32-bit "XP" icons (with 8-bit alpha channel). Suffice
it to say that I consider this plug-in useful for more than just this
tutorial - if you are considering starting a career in icon design, then
this is an essential plug-in too!
Step 2: Favicons have a standard size of 16x16
pixels. Many people find it exceptionally difficult to design in such a
small canvas area, so this leaves you with a choice - You can either stick
to a 16x16px format and carefully design each icon pixel-by-pixel with the
Pencil Tool (100% opacity, 1px thickness), or you can design with a canvas
of 64x64 pixels and resize it later. If you choose the latter option,
remember that you'll need to stick to bold designs - excessive detail will
just be lost when you scale the image down.
Step 3: When you have finished designing your icon
you need to save it in an appropriate format. Go to File > Save As,
select the format as Windows Icon (ICO) (this will only be available
once you have installed the plug-in and restarted Photoshop), and save your
image as Favicon.ico. Now upload this file into the base HTML
directory of your website, together with your index/home page.
Step 4: Some browsers automatically look for a file called Favicon.ico or favicon.ico (note the type case) on your website and display your icon. Others, however, prefer a direct link in your HTML in the HEAD section on each page telling the browser where to look for the file. To maintain maximum compatibility, therefore, you should insert this code into all your HTML pages:
If you run a Linux system, you MUST ensure that the casing
of your file and the <link> reference are the same. Yes, I know its a pain,
but that's Linux.