Making Favicon using Photoshop

Favicon known as “favorite icon” is a small icon that displays in the browser or tabbed browser and close to the address bar, it can be considered as another way of showing your website brand or identity via small picture or icon on a browser. There are some ways in making Favicon such as icon maker/builder applications or using an image program.

* Sample of Favicon on browser
image-01

In this tutorial I’ll be using Photoshop and download some files required and saving it into an icon format. To start with, this tutorial download the ICO File Format plugin for Photoshop, make sure to download the plugin with the correct platform and a bit (example Windows-64bit) and extract those files in the right folder.

For windows users below are the path where you can extract the plugin files.
32bit – C:\Program Files (x86)\Adobe\Adobe Photoshop CS6\Plug-ins\File Formats
64bit – C:\Program Files\Adobe\Adobe Photoshop CS6 (64 Bit)\Plug-ins\File Formats

The favicon is a very small icon, we can start by making a new image with 64×64 in pixel and 72 dpi so we can see the image as we make our design on it than making it smaller in dimension later on. You may use 16×16 in pixel if you’re confident in making designs on that dimension.
image-02

So after finishing the design of the image, click the Image then select Image Size then set the height and width to 16px then click OK.
image-03

To save the image select the ICO (Windows Icon) format. The file should be something like this “filename.ico”.
image-04

To link Favicon to your website, add and edit the example code below (replace it with your favicon filename) then saved on inside the head section of your web page.


 

 

Troubleshooting
  • In saving the image file and if the file format ICO (Windows Icon) does not show up it means that the dimension (in pixel) of the image is too large or the plugin is not properly saved on correct path on Photoshop.
  • If the favicon does not show up on the browser make sure you include the right path/location of the favicon.ico file on the server.

Romel Masagca

I’m a Computer / Technology enthusiast. Very passionate about System Administration and Web Servers both Windows and Open sourced platforms. I created this site as a place to store my musings and thoughts. I also created it as a place to showcase my work. I’m currently freelance Web Designer and Desktop Support by night and a Jr. Draftsman on Mechanical Design by day.