18. How to Create a Favicon

Watch my video below to see how to create and install a Favicon.

What is a Favicon?

A Fav Icon is the little icon that appears on the top of the browser beside the address bar or browser tabs.

Make a square version of your logo.
Go to: http://www.favicon.cc
Click “Import Image”, “Choose File”, and select “Shrink to Square Icon”.
Fav Icon will generate a 16 px by 16 px rendering of your square image in a blown up format.
Using the preview window below, you will be able to see what it looks like in the original size.
You can simplify it by using their colour picker to add / delete any pixels.
If you are adventurous, you can even animate it.
Once you are finished, click “Download Favicon”. A file called “favicon.ico” will be downloaded to your computer.
Go back to WordPress, then go to your theme settings, and there should be an option to upload this favicon.co somewhere within the settings.
Go to your website and hit refresh to view it.

Tips:

Make a square version. It’s the best looking way.
If your logo is very complicated, this will not turn out well. For example, if you have a logo icon and then your company name beside it. My suggestion is just to use the icon only.
If the icon is too complicated, then just do something really simple like initials only. You are only working with 16×16 pixels and trying to cram too much information in there is next to impossible.