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?