Welcome, Guest

Please login or register

TUTORIALS SUBMENU

PHOTOSHOP    FLASH    ILLUSTRATOR    BLENDER    CINEMA 4D    WEB-CODING    [SUBMIT]

Sponsored Links

Creating & Using Favicons


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...

Step 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 proceed. Telegraphics 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:

<link rel="Shortcut Icon" href="/favicon.ico">

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.

NB. Please note that not all new browsers have flawless support for the favicon feature! Microsoft IE6 for Windows, for example, does not display the favicon until the URL has been added to favourites. Safari for the MAC caches favicons, so if you change it you'll need to empty your cache before the new one will show.

Footnote: Well... that's it for Favicons! By definition they may be mere fluff, but they do make a site stand out in a browser's URL history, and they add virtually no overhead to your web server, so there is little reason not to use them! If you need some inspiration, try looking at this collection... or just browse around and see what pops up. Who knows... your imagination could be fired up in all sorts of ways...

- Tutorial written by Man1c M0g

Automatic Translations: Translate Into French Translate Into German Translate Into Italian Translate Into Spanish Translate Into Portuguese

Last 5 User Comments

User:  RogueBase (#49255)
Date: Mon Apr 07, 2008. 10:34:48

Post #9 of 9

Sweet, I'm starting up a website and I wanted to know how to do this, many many thanks for this tute, I've added it to my favs!

Reply to this post


User:  Shieldvisor (#45034)
Date: Tue Sep 25, 2007. 03:51:04

Post #8 of 9

Quote from KaiRock Int;41436:
I would like second everyone else's compliments with a resounding "Here Here!" (In my best English accent anyway)

I recently completed a contract where I was made a Volvo Relay - in excess of 172 icons ranging in size from 32x32 down to 8x8. WHAT A LEARNING EXPERIENCE! You can stress enough the importance to KEEP IT CLEAN AND SIMPLE! I am a big fan of the Glass and Metal effect...this is almost and utterly pointless when creating icons. You put in all of this time and effort to come up with original and professional looking icons only to watch your work emerge or "disolve" into this blob of pixelation.

Great tutorial that beats learnign like I did!


Had also a great time in learning this tutorial... I love it... Plain and simple but still it rocks... :biorust:

Reply to this post


User:  KaiRock Int (#41436)
Date: Sun Apr 29, 2007. 07:36:43

Post #7 of 9

Quote from Man1c M0g;16632:
Thanks for the praise! :D And yes... I have already submitted the links to all the relevant tutorial sites. I think we may be seeing them accepted this weekend...


I would like second everyone else's compliments with a resounding "Here Here!" (In my best English accent anyway)

I recently completed a contract where I was tod esign in excess of 172 icons ranging in size from 32x32 down to 8x8. WHAT A LEARNING EXPERIENCE! You can stress enough the importance to KEEP IT CLEAN AND SIMPLE! I am a big fan of the Glass and Metal effect...this is almost and utterly pointless when creating icons. You put in all of this time and effort to come up with original and professional looking icons only to watch your work emerge or "disolve" into this blob of pixelation.

Great tutorial that beats learnign like I did!

Reply to this post


User:  RainLover1985 (#22422)
Date: Wed Jan 04, 2006. 05:44:05

Post #6 of 9

I always wondered how sites did that, this is an awsome tutorial. :) thanks for writing it. :)

Reply to this post


User:  scrowler (#18575)
Date: Tue Sep 27, 2005. 05:18:41

Post #5 of 9

hey mog, great tutorial, i've used this many times. in particular the link to download the photoshop plugin.

keep it up.

Reply to this post


--- View Entire Thread ---
Amazing Font Pack!

Featured Tutorialsmore

Justify Text Manua...
Justify Text Manua...
- Adobe Illustrator -
HyperNURBs Modelling
HyperNURBs Modelling
- Maxon Cinema 4D -
The Pattern Maker
The Pattern Maker
- Adobe Photoshop -
Complex Shapes
Complex Shapes
- Adobe Photoshop -
Membership

Username:
Password:  
Remember Me

Lost Password? || Register

Advertisements





Special Options
Printer Friendly Version
Forum Threads

 Re: 3ds Max Tutorials for Beginners
Author: 3DSMaxresources
Posted: Feb 22nd, 4:29pm
Activity: 0 replies, 856 views
Delete Account
Author: Neo824
Posted: Oct 18th, 7:47am
Activity: 1 replies, 1922 views
Back...
Author: unleash
Posted: Jul 02nd, 12:37pm
Activity: 2 replies, 2034 views
Help Please :)
Author: Roosta
Posted: Mar 25th, 5:08am
Activity: 0 replies, 2481 views
thank you
Author: HypepapyHer
Posted: Mar 24th, 9:18pm
Activity: 1 replies, 1802 views
 Deactivate Account
Author: jerinian
Posted: Oct 02nd, 12:16pm
Activity: 1 replies, 2557 views
 changes....
Author: supertackyman
Posted: Sep 12th, 3:56am
Activity: 2 replies, 3537 views
Back again and with free webhosting :)
Author: ngz
Posted: Aug 14th, 4:50pm
Activity: 0 replies, 2721 views
Cartoon Crab 6 Legs Walk Run created in Blender
Author: patricia3d
Posted: Jun 19th, 1:58pm
Activity: 0 replies, 4093 views
HTML Form Post Array to PHP
Author: Space Cowboy
Posted: May 25th, 3:18pm
Activity: 1 replies, 3877 views
My blog where i create Digi Scrapbook
Author: claudya07
Posted: May 11th, 3:33pm
Activity: 0 replies, 17231 views
Blood Dripping from Letters
Author: patricia3d
Posted: Apr 05th, 4:37am
Activity: 0 replies, 4972 views
Forum Threads

--- Site Resources ---
Total Tutorials:212
Total Downloads:    441
Total Fonts:    4669