Following on from my post a while back about making your own lil’ cute favicon for your site, I found the generator I mentioned a bit … well, not all that great after all, particularly if you’re trying to generate any half-decent looking favicon.
Anyway, with a little help from the designer here at work, Photoshop & Google, I’ve found a way of making better ones!
First off, visit Telegraphics.com.au and download and download the plugin for your version of Photoshop. Install it following the instructions then re-start Photoshop.
Make your favicon in Photoshop, again using the instructions, making sure the icon is no larger than 16×16 pixels. Save it somewhere and name it favicon.ico
Upload the icon to your root web directory on your website, and then, in the <head> section of your site add in this code…
<link rel="icon" href="http://www.example.com/favicon.ico" type="image/x-icon" /> <link rel="shortcut icon" href="http://www.example.com/favicon.ico" type="image/x-icon" />
And you should be all done! Caching in browsers is sometimes an issue with favicons. If it doesn’t show up straight away, try visiting the favicon directly in your browser, or add your site to your favorites and force-refresh the page.
