How to show/set/display an Icon (Favicon) in Browser Tabs, Favorites, Bookmarks, Address Bar for a WordPress Website

Making the Icon

Use your image editing software to create or modify your image (Google image search will find lots of icons for nearly any topic). Use your image editor to make the background transparent and resize it to 16 x 16 px (resizing may not be necessary as browsers will do it). Save the image in a format that keeps the transparency i.e. gif or preferably png.

Use Gimp or another program to convert the file into the Microsoft ICO format. Gimp the free image editor has the option to save in the Microsoft ICO format which has become a standard for icons. Gimp is an interesting program and is free but if you do not want install on your computer you can run it from a usb drive. To run it from a usb drive get it from portableapps.com

Load Gimp and open your image file. In the File menu click Save As…

Change the Name of the file at the top of the dialogue box to ‘favicon’

Click the + sign – Select File Type

Gimp Save As Dialogue Box

Choose Microsoft Window Icon (this will change the file extension to ico)
I accepted Gimps’ choice of details for the ico format
Click the Save button

Installing the Icon in WordPress

Details can be found in the WordPress documentation –  http://codex.wordpress.org/Creating_a_Favicon

To summarize – upload the file (favicon.ico) into the root of your WordPress website and put a copy into to the route of your theme folder e.g. wp-content/themes/twentyten

Then go into the Dashboard and under Appearance click Editor

On the right click Header (header.php) and paste the line below just after the <head> tag –

<link rel=”shortcut icon” href=”<?php bloginfo(‘template_directory’); ?>/favicon.ico” />

Adding a link to favicon.ico in WordPress

Leave a Reply

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