Favicons Inside of WordPress

Our site remains ad-free thanks to our affiliates. This post's featured affiliate is Namecheap. Namecheap offers domains at low prices while providing outstanding customer service.

The post is not sponsored by the above affiliate and the content here is not representative of their company.

Adding a Favorite Icon / Bookmark Icon / Favicon / Website Icon to wordpress is a lot easier than you may think. But it still does require some work. The first way won’t take more than a few seconds after you have the icon you wish to use. But it is highly suggested you use both methods since it will work better across different browsers and search spiders.

Method 1 - Favicon.ico in Root Directory

This method is the most common method, and a lot of websites that show favicons next to URL’s (YouTube and Google Plus for example) will use favicon method. Instead of having to parse your website’s HTML for the favicon, they just check a single URL of [website]/favicon.ico.

So to get started with this method, you will want / need your favicon. The suggested size is 16x16 pixels. I usually create a set of icons from 16px to 64px so desktop icons, bookmarks, etc all appear nicely.

  1. Create your PNG Favicon (or ico if your editor supports it). Make sure it uses a transparent background if you don’t need it filled.
  2. Convert the PNG to ICO using the website at ConvertICO.com
  3. Upload the .ico file to your website’s root directory (usually /public_html/ OR /www/) and make sure it’s name “favicon”
  4. Navigate to [website]/favicon.ico and make sure it loads.

Now, this method is great for most uses, but using the next method along with Method 1 is highly suggested for compatibility.

Adding a link tag to your website that also points to the favicon is highly suggested instead of just uploading the favicon.ico file. Also using the link tag method, you can use GIF’s, PNG’s and various other icon formats. I usually point my link tag to a PNG. They both are the same image, but the PNG I have in a higher size of 32px or 64px.

  1. Create your icon (1:1 ratio / resolution) and save it into a directory you can access easily. For WordPress, place it in the “images” folder of the theme that you are currently using. /public_html/wp-content/themes/yourcurrenttheme/images/favicon.png
  2. Open up the header.php file in your theme. This file name can vary depending on the developer so you may have to open up a few files to find it. It will include the <head> tags.
  3. Before the closing </head> tag, include the code below to add your icon.
/* ICO File - Root Directory */
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />

/* PNG File - Root Directory */
<link rel="shortcut icon" href="/favicon.png" type="image/png" />

/* GIF File - Root Directory */
<link rel="shortcut icon" href="/favicon.gif" type="image/gif" />

/* ICO File - WordPress Theme Image Directory */
<link rel="shortcut icon" href="<?php bloginfo('template_directory'); ?>images/favicon.ico" type="image/x-icon" />

/* PNG File - WordPress Theme Image Directory */
<link rel="shortcut icon" href="<?php bloginfo('template_directory'); ?>images/favicon.png" type="image/png" />

/* GIF File - WordPress Theme Image Directory */
<link rel="shortcut icon" href="<?php bloginfo('template_directory'); ?>images/favicon.gif" type="image/gif" />

Related Posts

Prevent Sending HTTP Referer Headers from Your Website

Learn how to prevent your site from sending HTTP referer headers to external websites that you link to with these three different methods.

Website Contact Form without PHP

How to create a fake contact form without PHP that initiates the user's current mail client.

Custom Style RSS Feed

Customize the look and feel of your WordPress RSS feed by adding a stylesheet to your RSS XML feed.

Blogger Theme Data Tags for Widgets

A list of template tags for Blogger Widgets available to add to your custom Blogger template and design.