How to create a favicon in Photoshop

Added Tuesday, February 16th, 2010 at 9:14 pm by

Getting a favicon on your website is a great way to help your visitor find your website, in their bookmarks. If you do not know what a favicon is, it’s the small icon next to the URL in the address bar of your browser. It’s also shown besides bookmarks in all common browsers. It’s a great little something extra to have on your website. I am going to show you how to do it in Photoshop. Now if you are not a designer or use Photoshop you can do it using one of the online makers like favicon.cc.

So here is just a quick run-through of how to make a favicon for your website in Photoshop.

First Photoshop, isn’t able to save images as .ico files by default, so you’ll need to download a plugin. You can download it completely free here. You just download it and follow the instructions on where to put it. on Windows and Photoshop CS3 its Adobe\Adobe Photoshop CS3\Plug-Ins\File Formats. Then just do a quick restart of Photoshop.

Now make a new image that’s 16×16 pixels and start creating you icon. Don’t give it too much detail at it’ll just make it look messy.

When you are done creating you icon save it as a ICO file. Select it from the Format dropdown and save it as favicon.ico.

Now that it’s saved, upload it to your website (often done via FTP).

Now go into the head section of your html files or if you are using something like wordpress you’ll find it in header.php and add the following html code:  <link rel=”shortcut icon” type=”image/x-icon” href=”/favicon.ico” />

That’s it. Your done. Now you need to have a bit of patience as it might take some time for your browser to register the icon, some browsers might loose it from time to time, but you don’t need to change anything to get it back.




Respond!