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 Codex and 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.


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.


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 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 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=”” />

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….

Post Study Interim Blogging Reality Check – June to October 2013

 Four Months of Freedom

Freedom! I am free from the oppression of the Open University for this year until February 2014. Happy days! I completed my exam for module B201 on the 7th October with 20 minutes to spare and left fairly satisfied that I hadn’t dropped a huge clanger so fingers crossed when my results return in November time (approximately). In February I undertake B301 which is a much more demanding mandatory element of my honours degree. Groan.

I wanted to take stock at this time because it is a prime period to turn up the wick on my exploits. I have time free to pursue further tweaks, further content and further audiences.

Interim blogging reality check:

Blogging Reality Check

Jackson’s world is a brilliant place but unfortunately I have to live in the real world too.

My current WordPress theme.

  • I have gone through a change from Graphene to Twenty Thirteen as should be apparent.
  • I’m not entirely happy with Twenty Thirteen but have made some useful tweaks such as the new archive section which uses a plugin to provide a better view than the WordPress default.
  • I’ve had to disable the featured picture and remove the doubling up of the post title as this was driving me barmy.
  • I’ve had to disable pingback/trackbacks because ultimately these were causing issues and in so doing I’ve had to go back to the database and update the post records retrospectively.
  • I’ve been adjusting my authorship element but still am unable to indicate that I’ve written the posts but have actually figured out why (because I’ve posted all as the administrator).
  • The Snippets are showing properly now which I’m happy about.
  • There is no default author.php for the Twenty Thirteen theme.

Google+ Progress

As part of my goals for world domination I have expanded at a pace I am happy with on Google+. My circles now contain 641 which is a good number. There are of course a number who are in what I might class as the dross pile (the most diplomatic term I can assemble) and still a lot of people I haven’t been able to interact with. One of the downsides with Google+ is that whilst it does show those people who have interacted with you the most at the top of the circle there is no way to cattle prod those at the bottom.

Other Social Media

I’m sorry to say that both Facebook and Twitter now fall under the “Other” category because the amount of effort I put into them and the return in my investment of that time is not proportionate.

I’ve warmed to Facebook because at least it presents my posts neatly but Twitter bugs me. Twitter bugs me because I feel that a lot of what occurs there is of low value. I’ve always had this thought before I joined the social media platform and my fears were verified. Of course I am a bit like a monkey with a gun at the moment and my displeasure is more fuelled by not knowing how to do it well.

I am working on LinkedIn at this time and unfortunately I’m a filthy “no-face” until I get my image on there. I haven’t been on since I set it up which is kind of naughty. I’ll see how this goes.

The blog itself

I am much happier with how the blog now looks. I hope that any returning visitors view the site more positively than they have before. Because I seem to have very little feedback it is difficult to gauge how things are going and I know that part of my problem is that I don’t use my email (headboy) effectively with this site. I plan to do a whole lot more over the coming months but welcome comments on ideas and ways I can shape things.

My Mega Post

I have written a massive post. This is a truly massive article on a subject I’ve been very passionate about. I’ve been reluctant to release the article because I am well aware that my current readership will not engage with this article. What I need are gamers and the support for them on Google+ is weak so I need some strategy to deploy this bad boy. My SEO voodoo is weak also and I need to understand how I will get a better result so this post is currently stowed like the life jacket under an aircraft seat.

What would you suggest?

Current Sitrep

WordPress Stats:

  • 412 views, 154 visitors

Filtered for quality in Google Analytics where visitors have stayed longer than 30 seconds and don’t originate from Crawley, West Sussex, England.

  • 350 views, 81 visitors

Other Stats:

  • Visitor comments of good quality = 1
  • Best performing post to date = Analytic Cold Turkey: A month on
  • Best performing Social Media referrals = Google+
  • Best performing comment referrals on other sites = Tom Ewer’s Leaving Work Behind

In conclusion, things are moving along at a slow pace but I’m happy with the direction so expect more to come over the following four months!

End of Month Traffic Report: September 2013

The first week of September was truly awesome with a post that had a good hit from the Google+ Google Analytics Community. The follow up cold turkey post did well once again, as did the first and I’m pleased with the number following the simple log that I’d put together. Once again it proves that talking about the right topic is the way forward.



30 days according to WordPress – click to view

The first full week actually saw some unexpected numbers daily where the previous 4 weeks had been fairly sparse for numbers. This was the longest period with actual views which was excellent! Rather scarily the number wasn’t far from half of the previous month’s figures which actually mean that the previous month was really poor and that potentially I’ve lost some ground.

Something that I always seem to experience after a good post is a week that sags. I have no real explanation for why, I try not to rest on my laurels but often find it hard reach the excitement a second time in succession. I’ve tried to work on my PR skills but often find that my current exposure to certain communities precludes me from picking up momentum.

Unfortunately there was a further week of sag. I wasn’t expecting this and was disappointed overall. I’d been working quite hard on the website as my commitment to my degree has dropped but this hadn’t translated in improved viewings. I’ve rectified the excerpt situation I had but this didn’t have the desired effect of pushing people off a wandering gaze. There is still some tweaking to do and my verdict for Twenty Thirteen is not such a good one. The sidebar isn’t very effective so I’ve canned it and pushed links to the bottom. The last week of the month was the worst so far. Trying to get people to view my posts from my current network was akin to drawing blood from a stone.

End of Month Report

I’ve given an acronym to Google Analytics with my Actual Traffic Filter so as to save on some real estate for words below. This is displayed as GAF. GAF represents the truest figure based on what Google Analytics has recorded as a true page indent. The filter removes a phenomenon I’ve termed as ZSB or Zero Second Bounce where the visitor has made no page indent or 0 seconds on page.



  • WordPress Stats = 64 (last month 83) -19 adverse (-23%) eek!
  • GAF Stats = 44 (last month 63) -19 adverse (-31%) double eek!

A big pageview slide this month.


  • WordPress Stats = 40 (last month 27) +13 inverse (+32.5%) Yay!
  • GAF Stats = 10 (last month 6) +4 inverse (+40%) Yay!

Improved over August but not as good as July. Going in the right direction.

Average time on site

GAF = 1055 seconds or 17 minutes 35 seconds (last month 564 seconds or 9 minutes 24 seconds) +491 seconds or 8 minutes 11 seconds inverse (+47%)

A mega improvement on last month showing that what is read is read more intensely than before which means the quality on some posts has improved and that those small amount of visitors are taking a good amount of time to read an article or articles thoroughly. This is something I strive for when writing.


It’s not all doom and gloom. This is very positive. Have a look at how this compares to my previous months.


WordPress Stats Demographics for last 30 days.


Demographics for September 2013. America is Number 1. Click to view.

Here is the filtered look in Google Analytics:


Worthing on top, Praia Grande in Brazil. Not set, unknown.

Traffic Source

I don’t get as deep a field of view from Stats although it does give a lot of good information on referrals and search terms. Direct is best supplied by Google Analytics.


GAF = 3 (last month 5) adverse -2


WordPress stats last 30 days shown below (30)


Referrals according to WordPress stats

GAF = 7



However, “Female Wrestling” has proved to be a successful search term. Weird huh!



Disappointing overall despite initial good viewings.


I had some good interaction during the first full week of the month and had a 13 day uninterrupted flow of traffic (albeit light in the second week). The third week was a bust, not helped by a huge bout of writer’s block, the fourth week didn’t fare much better despite my Google+ following increasing substantially.

I’ve had some positive improvements, some return to form and some slippage to contend with. Week 36 has been my best in many weeks, attributable to good content in the main and an active community where I posted this. I see further avenues here to be a future benefit. I returned to form in terms of visitors to a figure similar to where I was in July. My pageviews have tumbled dramatically and I have grown a little disheartened by the lack of visitors in the last couple of weeks. Onwards and upwards!

I’ve been working on some private elements of improvement to get more plates spinning but in the meantime I am working to improve the overall experience a piece at a time.

My biggest challenge is reducing the bounce.

So good people, how do you best tackle the bounce?

As a side note my AWstats and Webalizer stats have both proved that September has been a good month regardless of what my analytics say.

Webalizer stats. On the host site.

Webalizer stats. On the host site.

I also seem to be targeted a lot by Russian websites but can’t see the transient link between what I write and what Russians would find interesting. I had thoughts along the lines of; “In the beginning there was Russia….”.

October has to be different, it has to be Golden. I am going to be making some important changes in direction and drive.

Related articles