You know how some websites have a little icon that appears in the browser window? Here is the one that Google uses:
It’s called a favicon. If you want to have your own favicon for your website then here are the instructions.
Creating Your Favicon Graphic
- First of all you need to source a graphic or picture that you would like to use. Something that will associated with your website and brand.
- For my website I am choosing a footstep to go with my missions of helping others step by step.
- Once you have sorted out your graphics you need to re-size it so that it is 16 x 16 pixels square. I use paint.net for my graphics – it is free to download and use (https://www.getpaint.net).
- Here is my favicon – I have made it 16 x 16 pixels:
- When you do this for your own graphic make sure that you can identify the graphic, image or text you are using. Sometimes you will find that when it is this small you end up with just a blob rather than something identifiable!
- The important thing is to save it in the correct format. You have to save your favicon as a .ico file e.g. favicon.ico
- You can’t do this in paint.net. However, there is a free favicon generator that you can use online where you just need to browse and upload your graphic and then save it in this format: Free Favicon Generator
- Just upload your graphic and choose the sizes you want and then press convert.
- Your graphic will be displayed into windows live photo gallery and then you need to copy and save it to your computer.
- In case you think – “it looks awful” when you see it here is a picture of mine –
- Yes it looks pretty bad but once it is uploaded to your wordpress site it will look fine! It’s just because it has been magnified.
Adding Favicon To WordPress
In some wordpress themes you have the option to change your favicon in the theme options. However, in case you don’t have that I shall show you how to add it into your code.
- Log into your hosting cpanel file manager for your website you want to add your favicon to.
- Open you wp-contents folder
- Open your themes folder
- Open the theme you are using
- Look for the favicon.ico file
- You can see mine here.
- This is the existing favicon for your site.
- All you need to do is to replace this file with your new favicon that you have created.
- In order for it to work it must be kept in the same format as the original one (favicon.ico)
- Therefore rename the old one and upload your new one and call it the same name.
- You can see I have renamed my old one and now I can upload the new one.
- Just locate it on your computer and upload it.
- Make sure that is in the format favicon.ico
- Be sure to save the changes.
Updating RSS Feed Favicon
You can also add your favicon to your RSS feed.
- Upload another copy of your new favicon to the main directory of your site. Before going into any folders.
- This means adding it like this: https://mywebsite.com/favicon.ico
- Now it will be displayed in your subscribers feed.
Updating Header File
This is really a double check. Some browsers will not display your new favicon unless you have updated your header file so it is best to do this.
- Go into your wordpress administration dashboard
- Click on Appearance
- Click on Theme editor
- Find the file called header or header.php
- Open this file to edit it
- Do a search for a line of code that looks like this:
<link rel="shortcut icon" and ends with /favicon.ico" />
- If you can find this code you need to overwrite it with the code below.
- If you don’t have this code then you need to add the following right underneath the <head> html tag
- Change it to:
<link rel="shortcut icon" href=" <?php echo get_stylesheet_directory_uri(); ?>/favicon.ico" />
- Make sure you update the file to save the changes.
If you have a firewall plugin installed on your wordpress site then you will not be able to edit the header.php file. Either turn off the firewall plugin while you to the edit or you could edit the file in your cpanel file manager instead.
If you use cpanel for this then you will find the header.php file by going to:
wp-content > themes > themename > header.php
NOTE: If your favicon does not change to your new one then you probably need to remove your browser history and cookies before your new favicon shows up.