Learning how to add a custom favicon to your website [.ico]

I have been working as a graphic/website designer for a while now and I have learned several tricks that help your website looks a lot more professional.  It is so simple but I have noticed that a lot of people aren't making them [even graphic designers]. If you are a designer there is no reason not to have one on your website.

If you are wondering... what is a favicon? I suppose you could google it... but I'll give you a summary. It's the icon that displays above the address bar.   I'm sure you've seen these when you visit a big website like Bank of America, Walmart, or HKDEZIGNER.COM. The favicon also shows up in your list of favorites, shortcuts, and all over your bookmarks. This little tiny thing [16x16 pixels] is pretty easy to make. If you don't have photoshop there are tons of FREE websites out there that have something close that will assist you via web. Either way... pretty easy!

How to make your favicon in Photoshop, 6 easy steps!


Step 1: You will need to download a Windows Icon (.ico) file usually called favicon.ico that you upload to the main directory of your website. Nowadays, most browsers besides Internet Explorer [bla] can use a GIF (including animated ones) or PNG (including full transparency) instead. But since all browsers including IE understand the .ico format it is just best you use this method for compatibility issues. Download the .ico plugin from Telegraphics. Hopefully your download and install goes well... [I'd show you how but that would be another tutorial, tehe. I'm sure you know how to download and install. You got this! =P]

Step 2: I like to start my layered/main photoshop file at 64x64 pixels so I can be more creative with my artwork. I like to save this version as a layered .tiff or .psd so I can always go back and modify it.

Step 3: The fun part! The design! If you already have a logo you should reduce it to the 16 x 16 size to see if it looks cool. If it doesn't look good at this size, work with the 64 x 64 canvas and try creating a simple design. Tip: Maybe try using colors from your site so it looks uniform =)

Step 4: When you're ready to test out your cool new favicon design select Image > Image Size menu and enter 16 x 16. Click on Resample Image and choose "Bicubic Sharper" from the drop-down menu (CS only for this step). This is the best setting for making sure that an image doesn't blur as it's being resized. If it’s still not sharp enough, go back and oversharpen, oversaturate and/or heighten the contrast of the original image and then resize it again. Fingers crossed!! Hopefully it doesn't take you to many attempts to having it looking awesome.

Step 5: Time to save the .ico file! Go to File > Save as and make sure you name the file favicon.ico. Under Format you must choose Windows Icon (ICO) from the pulldown menu.  Go ahead and save it where you want it on your hard drive.

Note: This format will only be available in Photoshop after you download and install the plugin. So make sure got everything installed right before you try to save. Sometimes it helps to close photoshop and restart it.

Step 6: Time to upload your awesome new favicon to your server! Connect to your online server and upload your favicon.ico file to your website. Make sure to place the favicon.ico file into the same directory as your home (index) page.  Most browsers should find it automatically and sadly some browsers will look for a direct link in the HTML. You can help these browsers by adding this link in the head section of each page on which you want the Favicon.ico to appear.

Here is the link code to include in your head section to all of your sites pages:
<link rel="Shortcut Icon" href="/favicon.ico"></a>

WOOT WOOT! You should have a cool favicon now! See, that wasn't so hard! Lets hear it for being custom!