Business / Tutorials

How to Make a Favicon

You may be reading this asking what in the world is a favicon?  The word favicon is short for favorite icon.  It is the small image, usually 16 x 16px, and appears in your browser’s address bar next to the website.  It is another form of branding.  Now that we have defined a favicon and are convinced it is not some weird sci-fi term let’s move on to make one.



You are going to first need to create an image to use as your favicon.  I like to use a program like Photoshop for this application.  Start out by creating a 32 x 32 px image.  Set your resolution to 96 pixels/inch.   You can see a sample of my favicon above.  You will probably want your design to be pretty simple since it is such a small picture.  Keep in mind your branding colors and fonts when designing your favicon.  Remember consistency in branding is key!


File – Save for Web – Save as JPG

***You will also want to re-size your picture at this time to a 16 x 16 px file. This option should be below the area where you can select the file type.

You now have a file saved on your computer called – favicon.jpg


The special thing about a favicon is the type of file that it is.  The file will end in .ico.  Since you can not save it as this type of file from Photoshop, we must use a program to do the conversion.  There are several free on-line applications that will convert your file.  I like to use  You will upload your file from your computer.  There will be the option to download the generated file or use html code.  I downloaded the file and saved it to my computer.  CONGRATS – You made a Favicon!  That’s great, but what do you do with this newly made image?


This is going to require just a bit more tech skills, but you can do it!  You are going to upload your facivon.ico file to your theme directory.  You will need to use a FTP to get to your files.  There are several free programs that you can download, like FileZilla.  My blog runs on the Genesis framework, so I would navigate /wp-content/themes/nameofyourtheme/images/favicon.ico.  Upload your new image and replace the existing favicon.ico file.

As my five year old would say – “Easy, Peasy”, right?

1 Comment

  • government
    September 16, 2014 at 6:13 am

    Hello to every one, since I am really keen of reading this webpage’s post to be updated daily.
    It carries pleasant stuff.


Leave a Reply