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.

 

MAKE YOUR IMAGE:

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!

SAVE YOUR IMAGE:

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

CONVERT IMAGE TO AN .ICO FILE

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 www.favicon-generator.org/.  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?

UPLOAD FACIVON.ICO FILE INTO YOUR THEME DIRECTORY

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?

3 Comments

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

  2. I have recently started a site, the information you provide on this website has helped me tremendously. Thanks for all of your time & work. “It is a great thing to know our vices.” by Cicero.

  3. Thanks. I think I will use this grid to measure the ideas I want to pitch to my boss.The only problem I see is that it is difficult to judge the impact of an idea. It seems that if a group has high enough capacity to implement an idea, they will overestimate the impact it will have.

Write A Comment