Add a Favicon to a WordPress Theme

Update: This article is now archived. Recent versions of WordPress includes functionality to generate a favicon via a image upload. See the newer tutorial article WordPress Favicon for a Website. The article is here for link purposes only.

Favicons are those little icons to the left of the browser's address bar, usually it is a small representation of the company's logo. The icon is also shown to the left of the page title and in the bookmarks (favourites) list. It was introduce by Microsoft when it released Internet Explorer 5 in 1999 and is now widely supported. All the other major browsers allow the use of different graphic formats (.png, .jpg, .gif) as well as icon files, though for best results an icon file should be used (there are still some older browsers out there), see the Favicon article at Wikipedia.org. Here at Eye we use the Greenfish Icon Editor, though others are available, to produce icon files. Once the file has been produced drop it into the root of your site (the same location as the index.php file). To ship it with a WordPress child theme add a function to place the correct link tags in the head element of the web page. Read on to see how it is done.

If you have not created a child theme before see the article Quickly Create a WordPress Child Theme. Once the theme is created add a functions.php file, or edit the existing one. The functions.php file will be in the same directory as the child theme's style.css. Most hosting providers have online tools to allow the creation and editing of files on your website. Alternately use a text editor to create the functions.php and then upload to the child theme folder. On Windows use Notepad to edit text (remember to save it as a .php file and not a .txt file). Add the following code to the functions.php file (in between the PHP start tag, <?php, and end tag, ?>.

/* ADDS FAVICON TO HEADER */  
function tek_favicon() {  
   $tek_dir = get_bloginfo('stylesheet_directory');  
   echo '<link rel="shortcut icon" href="';
   echo $tek_dir;
   echo '/favicon.ico" type="image/x-icon" />';
   echo '<link rel="icon" href="';
   echo $tek_dir;
   echo '/favicon.ico" type="image/x-icon" />';
}  
add_action('wp_head', 'tek_favicon', 5);

Drop the favicon.ico file into the child theme directory. Now the favicon is automatically linked to in the header of each page.

<link rel="shortcut icon" href="http://www.example.com/wp-content/themes/mychildtheme/favicon.ico" type="image/x-icon"/>  
<link rel="icon" href="http://www.example.com/wp-content/themes/mychildtheme/favicon.ico" type="image/x-icon"/>