Your Customers are Mobile, you will be too …

In this tutorial we will be showing how to create a favicon and how to add it to a WordPress theme. We will be using Fireworks, Photoshop or any graphics program of your choice to create the basic graphic then using a free online tool to convert it to a favicon. From there we will add the favicon to our theme then make sure the favicon displays correctly for all browsers.

WordPress 3.5: Creating and Adding a Favicon to a WordPress Theme

Create the Basic Favicon Graphic.

To begin with we will use either Photoshop or Fireworks or any other graphic manipulation program you like.

The main thing we need to keep in mind when we create this file is that it must be square. The normal size of a favicon file is only 16 by 16 pixels. However working at this size will usually end in a poor quality end product. So to improve the quality of the end product we should design our graphic at 80 by 80 pixels. You can go larger but this will tempt you to put too much details into the image which will then be lost when we go to export our image. Also too much detail could turn our favicon into nothing more than a blur. So keep them as simple as possible.

The second thing we need to take into consideration is different browsers my have different colour tab background etc. So that our favicon will look the same across all browsers we need to make sure our background colour is transparent. This will help the icon to blend into the browser the same regardless of platform.

With these two things in mind design your icon. Before exporting your icon change the image size to 16 by 16 pixels. Let the graphics program you are using worry about how to scale it down. Save your file out as jpg, jpeg, gif, or png.

Upload and Convert your Icon to a Favicon

The tool I am using for this tutorial to convert the icon we have created is www.favicon.cc.

Follow the link above and click on Upload Image.

faviconuploadimage

Select Choose File and navigate to where you saved the file and select Open. Select Upload to upload your file to server.

The pixel by pixel edit and preview panel probably looks very messy, however you can see how there is a preview panel lower down that shows how the file looks in an address bar.

faviconaddressbarpreview

 

Also if you look at the tab at the top of your browser you will see your favicon in use.

favicontabpreview

 

You can make slight changes to the favicon if you like through the on page editor. Once you are happy hit Download Favicon.

favicondownloadfile

 

Save your file where you can find it and close the website.

Add Your Favicon to Your WordPress Theme.

Navigate to the main folder of your WordPress theme. If you have a favicon.ico file in this folder delete it. Now put your favicon file into this folder.

For many browsers this is all you need to do. But for some we still need to put in a little code.

Using Dreamweaver CS6 or your favourite text editor open the header.php file of the theme you just added the favicon to. Between the <head> tags of this file look for a line that has the following in it:

<link rel="shortcut icon" href="<?php bloginfo('stylesheet_directory'); ?>/favicon.ico" />

If the header.php file has this line exactly like this nothing needs to be done. If you cant find it check this section of the header.php file again for any reference to the favicon.ico file. Some themes may have slightly more complex php coding that checks for the presence of this file and loads it and if it missing loads another file from else where. If you find a line like that replace it with line above. This is to ensure your favicon is being loaded and not something else.

If you can find either of the above lines in the header.php file between the <head> tags simply copy the above line into it. This will ensure all browsers display your favicon.

Upload your theme and activate it. Your website will now display your favicon instead a generic one that came with your theme.

Hope you found this article helpful and hope to see you again soon.

Leave a Reply

Please buy me a Coffee

Help a starving student to drink more coffee

Follow us on: