Effective Classy Websites

What is a Favicon? It’s a small 16×16 pixel icon that shows up in your browser to the left of the web address.

It also helps distinguish your site in your browsers bookmarks and is also used in some social bookmarking sites as well. Here’s how you can easily create the file and make it show up on your website.

1. Find an image on your computer that will work very small. It should be square and can be a gif, jpg, png, or bmp file. It can have transparency as well. It does not need to be a large file as it will be reduced to 16×16 pixels in size.

2. Visit http://tools.dynamicdrive.com/favicon (new window) and press the Browse button.

You could also try this free tool that makes a favicon from your Twitter profile image. http://www.html-kit.com/favicon (new window)

3. Navigate to the image on your computer and press Open.

4. Click the Create Icon button on the dynamic drive website.

5. In a moment you will see a preview of your icon. If you are happy with the way it looks, press the Download Favicon button.

This will download a file called favicon.ico on to your computer.

6. Login to your WordPress website.

7. Click on the Media tab and select Add New.

8. Press the Select Files button, navigate to the favicon.ico file on your computer and press Select. WordPress will automatically upload the file.

9. When it is finished you will see a small image of the file and down the bottom we are looking for the File URL section. Copy this URL.

10. Click on your Appearance tab and select Editor. Find the theme files section on the left and click on the one that says, Header (header.php).

11. Paste this code below the <link rel=”pingback” href=”/xmlrpc.php” /> line and replace the href URL with the full file path to the icon file we uploaded previously.

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

12. Click the Update File button.

You will need to refresh your website page to see the favicon in action. Even then it may not work straight away. The easiest way I have found to test that all is working is to use a different browser to load your page fresh.

If all is done right you should be sporting a spanking new tiny favicon. Yay!

Related posts:

1. Preparing Firefox for WordPress – A visual guide to fast WP access This WordPress tutorial will show you how to setup Firefox so that getting to your...
2. Insights – Plugin Tutorial – Awesome WordPress Media and Links tool Insights What It Does: Allows you to quickly and easily, search for and insert YouTube...
3. Preparing for WordPress – Essential Downloads and Setup This article outlines some essential downloads and setup you will need to make sure that...