Operating system: Any
Program: Photoshop
Plugin: Telegraphics ICOFormat
One of the biggest things one can add to a website to make it look professional – the final touches if you will – is a favicon. A favicon is that little icon at the top of a browser window that shows an image representing the website within that tab. On this website, it’s a crown (some people say it looks like a monkey…).
I’ve gone over how to add it to most websites here, but now we’re looking at actually how to create the favicon to upload to the website.
Design
When designing a favicon, keep in mind that it’s going to be very small. How small? 16 x 16 pixels (or 32 x 32 pixels). So, when creating the favicon, be conscious about every single pixel in the image. If there are half colors that make the icon become blurry, delete those. Think sharp edges.
I usually make mine with vectors in Adobe Illustrator.
Plug-in
By default, Photoshop doesn’t have the capacity to export a *.ico (favicon.ico). So, a Plug-in is required. The one I’ve used and respect is from Telegraphics called ICOFormat (direct file download link). Perhaps there are others out there that work better? (leave link in comments below)
Close Photoshop down. Avoiding this step is not possible.
Download this favicon plug-in (ICOFormat), then copy the plug-in file to the Adobe Photoshop Plug-in folder (../Program Files/Adobe/Adobe Photoshop/Plug-ins).
Program
Once the plug-in has been added to this folder, it is now safe to open up Photoshop with the image file to be used as the favicon – aka the design. Make sure that the image size is either 16 x 16 pixels (standard) or 32×32 pixels, then select file -> save as. One of the drop down options in the save-as menu should be *.ico file.
Now that the favicon has been saved, you can find it in the folder you saved it to, ready to be uploaded to the website!
Hope this helps!