Tag Archives: fav icon

How can I make a favicon with photoshop

Favicons quick tip banner

One thing I hate is when a website goes to all the trouble of making up a nice design (or even just grabbing a template and putting it up) and then they don’t go ahead and create a Favicon or worse still in my mind they use the default one that came with the CMS they are using. ARGH!

So what can you do … well really you’ve no excuse there are a multitude of free online favicon generators out there. I however prefer being able to do things from within my trusty version of Photoshop. I’m running Photoshop CS3 and thankfully there is a nice little plugin for it from the lovely people over at Telegraphics. They have versions of the plugin for both windows and Mac (I’m a Mac) and they also have versions or CS3 and CS4.

So install the plugin .. create your 32×32 pixel image and away you go Click the Save As button from the Format Dropdown choose ICO (Windows Icon) and I normally select Standard format.

Of course you can just go ahead and use PNG graphics for your icons I do believe however you’ll end up no doubt having issues with compatability and this method described here has just worked for me.

All this sounding like too much hastle to you ? well there are loads of free online generators out there

Take this one over at Dynamicdrive Favicon Generator or HTML Kit Favicon Generator

Lastly I might add in order for this favicon to appear on the tab / URL area you’ll need to let browsers know it exists. I recommend uploading it to the root webfolder / on your website calling it favicon.ico for consistancy not to mention some browsers automagically pick up the name and search for it, and you’ll want to add in a small snippet of code to all your webpages

<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />

And finally some Favicons I’ve created (not to mention the one you’re hopefully seeing above)

Examples of Favicons I've created

So once again we’ve saved the world .. well no … its not made that much difference on the greater scale of things but its a nice little finishing touch to your sites and something you or your customers can kinda go oooh thats cool about