Blog Dub

How to Make a Favicon in Photoshop

A favicon is the little icon you’ll see at the top of your web browser to the left of the url bar, or to the left of a tab when browsing firefox.  It’s a 16×16 image that is used to make your website easily recognizable when going through bookmarks, and it ads a bit of cosmetics to your website.  In my opinion it’s an essential addition to every website and it’s really easy to make.  In this guide I will go over how to make a favicon in photoshop, but if you don’t have photoshop you can do a google search for a favicon generator and you’ll find something that works similarly.

First of all, you can download the file extension on Telegraphics.  Once you’ve downloaded it, drag the .ico plugin out of the zip folder and into photoshop’s “plugins” folder.  When you restart photoshop you should now be able to save your files in the .ico.

1. Open photoshop and create a square canvas, something you can work with like 100×100.
2. Create your logo doing whatever you know how to do.  Favicons are usually very simple, maybe a solid color with a letter or 2.  Or you could use a small sprite.There are some example favicons you can get some ideas from to the right.  Or you can just look at the amazing favicon on my blog, which is an inverted rss symbol haha.
3. Resize your logo to 16×16 and save it as “favicon.ico”
4. Now simply upload the favicon.ico to the root directory of your website and it should show up within a couple of hours.
5. If you’re running wordpress you may need to add this code to the header so that wordpress knows to look for a favicon:<link rel=”shortcut icon” href=”favicon.ico”>

That’s the guide don’t wear it out, haha.  Hopefully this helps you to add some spice to your website!