Creating a Favicon « WordPress Codex

By 2nd September 2013 Developer Tools

Creating a Favicon

A favicon can be easily created using any graphic program that will allow saving of .ico graphic files, such as The GIMP. There are also online services that will allow you to create a favicon for free.

The image should be clear and is usually designed to match your blog image and/or content, a big task for something so small.

To prepare the image to be saved as favicon.ico:

By cropping or adding space around the image, make the image square.

Resize the image to 16 x 16 pixels.

Save the file as favicon.ico.

If using an online service to create your favicon, such as Faviconer.com (creates 24bit favicon.ico with a transparent background) and favicon.co.uk or Dynamic Drive, follow the instructions provided by the site. Then download the image of the favicon.ico to your computer.

Installing a Favicon in WordPress

If there is already an old favicon.ico file in your current theme’s main folder, delete it using FTP Clients.

With an FTP Client, upload the new favicon.ico file into your current theme’s main folder.

Upload another copy of your favicon.ico file to the main directory of your site (ie. http://example.com/favicon.ico). This will display the favicon in your subscribers’ feedreaders.

In order for your favicon to show up in some older browsers, you will need to edit your page header.

Go to your WordPress Administration Panel.

Click on Design (called Presentation in WordPress 2.3.x and below, and Appearance in WordPress 2.7+).

Click on Theme Editor.

Select the file called Header or header.php to edit the file.

Search for the line of code that begins with <link rel=”shortcut icon” and ends with /favicon.ico” />. Overwrite it, if it exists, or add the following code below the <head> HTML tag.

<link rel=”shortcut icon” href=”<?php echo get_stylesheet_directory_uri(); ?>/favicon.ico” />

Save the changes.

via Creating a Favicon « WordPress Codex.