Everything You Need to Know About Favicons

What is a Favicon and Why Do I Need One?

Favicons or Favorite Icons are small, square icons that are used to identify a website in a tab or a favorites list. They are unique to each website and can look like just about anything. They are usually a small version of a company logo or another icon that matches the company or personal branding. Using a custom favicon is a simple touch that makes your website more personal and instantly recognizable from a list of other websites. It’s one of the small things that sets a professional, custom website apart from a template.

Examples of Favicons

Design Your Icon

Create a Photoshop or Illustrator project with a width and height of 16px each, or crop a favorite image to 16px x 16px.

It can be difficult to make your art fit into such a small space, so I recommend using as simplified of a logo as you can manage. Blocks of color, single letters, or simple shapes tend to work the best, like the Target icon above. Complicated logos or icons, like the Starbucks logos, are not as good because they reduce in size poorly.

Save and Convert Your Icon

Once your design is complete, save your icon as a .png file.
Use this website http://www.convertico.com/ to convert your .png file to a .ico file.

Now that I have a favicon, how do I get it on my website?

Option #1 – Replace the existing image.
The easiest way to display your favicon is often to replace the existing favicon image with the new one. If you’re unsure where to find this image, your hosting provider can likely tell you how to access it from your control panel or FTP client.

If you’re using a WordPress and a Genesis theme, the favicon will go in the CHILD THEME directory in the images folder. Example: http://mydomain.com/wp-content/themes/mythemename/images/favicon.ico

If you’re using WordPress without a Genesis theme, the icon will likely be in the theme folder.

Note: even if you have properly replaced the image, it may not show up in your website browser for a few days. Favicons cache at a different rate than website content.

Option #2 – Adding code to your header.
If your theme does not have an existing favicon to replace, you can add this meta tag to the header of your website. Replace the url in quotes with your favicon’s url.