How to create and add a Favicon to a WordPress Theme

I’m happy to bring you another technical post for WordPress which should cover most themes. This tutorial shows you step by step how to create and add a Favicon. For your info I am performing this from the view of Bluehost as my host service with the cPanel. If you don’t have a cPanel interface with your server all you need is your FTP access but chances are this tutorial is trivial to you.

What is a favicon? A favicon is that nice symbol that appears in the address bar.

What is a Favicon

The Blog Prefect Favicon

I opted to write this guide because the WordPress.org Codex and WPbeginner.com both provided a fairly comprehensive guide but, it didn’t quite go into the detail needed to get me to the end zone. If you have ever tried to do something from an incomplete guide you’ll know that you’ll run into a sticky wicket and the sweat will start rolling from your brow. Hopefully with this guide you can avoid that.

You will more than like start with a default Favicon supplied by your host or a blank favicon. Either way you should consider changing this to bolster your image.

FYI

Please note that two updates have been added to this article since it was originally published on the 28th October 2013. One is an advisory note for those using Bluehost. The other is a note on the new feature made available by the WordPress developers. These updates are highlighted in green.

The stages to victory:

  • Stage 0, Backup your header.php file in your theme or “child” theme
  • Stage 1, create a square image
  • Stage 2, convert your image to an icon file
  • Stage 3,  delete your old/default favicon file on the root of your website
  • Stage 4, upload your new favicon file to the root and to the main folder of your theme or “child” theme
  • Stage 5, amend your header.php code
  • Stage 6, clear your browser’s cache
  • Stage 7, bask in your technical glory

This is a straightforward change that doesn’t require you to do anything dangerous with the database so dive in!

Stage 0: The backup bit: Estimate, 3 minutes.

You are only required to edit one file (unless you have something weird going on with your theme), that file is header.php. You will need to go into the back-end of your site through the file manager (or FTP client) and download the header.php file from the theme (or child theme) root you are currently using. Keep this file in a safe place just in case the changes you make don’t work. If you need to replace the file simply upload and overwrite the non functional header.php with the backup. Simples.

Stage 1: The image bit: Estimate 10-20 minutes.

There are some important things to consider before creating your image. Firstly you need to be able to show your image in a tiny square, the dimensions are 16×16 pixels so what you may have had in mind for your Favicon may have to be rethought if it doesn’t look great. Play around a bit before you go ahead and change the file on the server.

Rules of thumb:

  • Make sure your image is clear.
  • Don’t use colours that blend, high contrast is better.
  • Make sure your image will compress okay into a symmetrical square (this may mean that you have to unlock the aspect ratio when resizing).
  • Remember that people are going to be seeing this image in the shortcut bar near the address bar and in the address bar, as well as the bookmarks.

With your square image, resize it to 16 x 16 pixels. Make sure you turn off the aspect ratio settings if your image isn’t a perfect square.

Save the file as .png and name it favicon.

Note: I did all of my image adjustments in Paint Shop Pro so you don’t have to have Photoshop to do this task.

Stage 2: The convert bit: Estimate, 1 minute.

Convert your image into an .ico file. Don’t worry, this isn’t as hard as it sounds. All you have to do is follow this link to Dynamic Drive Tools.

dynamic-drive-tools-favicon

A rather useful tool to convert. Also can convert desktop sized icons.

You can then download this .ico file to somewhere safe on your computer.

Stage 3: The delete bit: Estimate, 5 seconds.

This step might seem a bit odd but if you don’t do this your image won’t change from the default. I tried this a number of times without this step and it wasn’t working.

Go to your web root folder via the FTP manager and delete favicon.ico

Many hosts automatically default a favicon for you to either a blank page icon or their own icon. Bluehost, who I use, tend to default you to the Bluehost 9 squares favicon.

Stage 4: The upload bit: Estimate, 30 seconds.

Upload your new favicon.ico file into the web root and the theme/child-theme root. As noted in stage 3 above, an overwrite of the file isn’t enough in itself. You need to delete then replace.

Update 6th October 2015:

Please note that Bluehost runs into numerous difficulties if you try to straight upload Favicon.ico. To remedy this, rename the file you are going to upload to favicon1.ico then when the file has been successfully uploaded, rename it to favicon.ico in the file manager. I believe this is caused because Bluehost push a forced favicon.ico on your WordPress hosted site as a default and the system gets twitchy at you. If you experience this problem through a FTP client, let me know. I’d be intrigued to know. I expect that the same adjustment works in that instance.

Stage 5: The Code Bit: Estimate, 10 minutes.

Here comes the code bit. This is one line of code and your theme will decide what you do with this one line. Make a beverage of your preference before you begin, this may take a few minutes.

As a side note: I saw a two-line version at WPbeginner.com but this didn’t work for the Twenty Thirteen Theme.

You can either go through the dashboard editor in WordPress > Appearance > Editor or edit the file itself by downloading it and opening with notepad, wordpad or notepad++ (text editor on Mac). Hint: Use the dashboard editor, it is quicker.

You need to locate the head tag. If you’ve ever programmed in HTML then you’ll know that the head tag begins the same in PHP code with “<HEAD” .

Dependent on your theme and how complexly it has been constructed it may or may not already include a favicon link, don’t worry if it doesn’t because you are going to add it right now.

To check to see if you already have a line of code that does what you need press ctrl+f (on Windows) or cmd+f (on an Apple) and search for the word favicon. If you find this word you don’t have to make changes.

Paste the following code into your header.php in you theme/child-theme root. You will need to add the following line near the end of the head tag. (you can copy and past this text).

<link rel=”shortcut icon” href=”<?php echo get_stylesheet_directory_uri(); ?>/favicon.ico” />

Favicon code in header.php

The code inserted into the header.php file via WordPress’s inbuilt editor.

Save the changes when you are done. With this code from the WordPress.org Codex, note how it doesn’t reference the domain.

Update: 6th October 2015

This alternate code can be inserted into the header which directly targets your favicon.ico location. Useful if you have more than one domain as they tend to get confused.

<link rel=”shortcut icon” type=”image/x-icon” href=”http://yourdomainroot.com/favicon.ico” />

Stage 6: The cache cleared bit: Estimate, 10 seconds.

Clearing the cache is the kind of thing you do if you’ve been looking at porn on the internet so you should know how to do this. If you are virtuous then this will vary depending on your browser. Chrome has it in the settings option (the horizontal bars). Safari has it in Safari > Settings.

Stage 7: The check then victory pose bit: Estimate, 2 seconds.

Before you can bask in your technical glory you first need to check that the changes have occurred. You should now be seeing your new favicon appear in the address bar, bookmarks shortcut bar (if you have one) and against the bookmarks.

Time for some biscuits with that beverage? Ah, happy days.

As a final note; if you need to change your favicon again in future, you only need to perform steps 1-4 because the code bit is only needed if your theme didn’t reference the Favicon the first time out of the gate.

Update Circa 6th October 2015

I had a problem whereby because I have two domains hosted on the same account, I got all confused and ended up with my main site taking the wrong favicon entirely, just make sure that you save your favicon.ico to the right root location and theme. It can take a while for the favicon to show correctly around the houses.

Additionally, a few updates ago, WordPress now has added the feature to add your favicon from a much simpler place. You can add it from the following location in your wp-admin dashboard:-

appearances > theme options > general > favicon

appearances > theme options > general > favicon

If this tutorial doesn’t run smoothly for you, let me know in the comments below. Happy tweaking, Jackson….

Leave a Reply

Your email address will not be published. Required fields are marked *

Captcha * Time limit is exhausted. Please reload CAPTCHA.

CommentLuv badge