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

9 thoughts on “How can I make a favicon with photoshop

  1. Well you’ve no excuse now Phil :)

    Remember you’ll probably need to kill your browser and open it again and even possibly clear the cache to see the favicon (At least I need to with Firefox)

  2. Ha. Stumbled upon this in a “Google Alert” for Jim Larkin (it kills me not knowing what people are saying about me and my business.) I have been needing to do this for a while now but wasn’t sure how to. Now I know. Thanks.

  3. Ha :) well Jim now you know :)

    Took a quick look through your portfolio of work you’ve some lovely shots in there loving the one of the girl in the field / forest (First one on the from little to big gallery) is very stricking great colours. I’m a complete amateur photographer, currently the cat is my muse, though I’ve gotten some nice shots of family as well

  4. Funnily enough the Irish Times uses one “IT” (white text / red gradient background) and I’ve absolutely no idea where it comes from … the colours aren’t its colours … looks more like an IT resource (info tech)

  5. Damm you now have to go and create favicons :-)

    Love the new site – all crisp colors and like that snappy blue!

    So instead of tweeting you have been blogging !!

  6. Thanks Kieran … Not really doing much of either TBH … though I’m trying to invest my time in my own projects / sites more and spend less “unproductive” time on the likes of twitter :)

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.