You often noticed a small image – actually an icon in the URL bar or at tabs. What is it? Any idea – it’s a favicon (an icon) which is associated with a website and can be used when you bookmark the web page. A clearer picture is that a favicon is typically a graphic 16 X 16 pixels square which will be saved as favicon.ico (format: .ico) in your server’s root directory.

Favicon

How You Can Create A Favicon?

First of all, I will say don’t worry as this is the simplest process which you ever noticed while doing or working in your WordPress site. A favicon can be easily created using any graphical software available which allows you to save .ico graphic files although you can create a favicon for free online also. Make sure the image you create or use should be clear and is designed in capacity to match your blog image and/or content as it will give huge glimpse to your site’s visitors.

Creating Manually

  • Make the image square by cropping or adding space around the image.
  • Resize the image to 16 x 16 pixels.
  • Save the file as favicon.ico.

Creating Online

  • Use the service like Faviconer.com, which will create 24bit favicon.ico with a transparent background or favicon.co.uk or Dynamic Drive.
  • Follow the instructions provided by the sites’.
  • Once created, download the image of the favicon.ico to your computer.

Creating Favicon With A Transparent Background

  • Make sure your source image already having a transparent background i.e. GIF or PNG.
  • The difference here is the favicon file being saved with an extension .png or .gif instead of .ico.
  • But in order to have favicon with a transparent background, you need to overwrite and to add the following code below the <head> HTML tag, once you find the line of code which begins with <link rel=”shortcut icon” and ends with /favicon.ico” />.

Installing A Favicon In WordPress

New Browser

  • To start the installation process of a favicon, you need to first delete your old favicon.ico file in your current theme’s main folder using FTP Client.
  • Similarly with the same FTP Client, upload the new favicon.ico into your current theme’s main folder.
  • Now, upload another copy of your favicon.ico file to your site’s main directory, which will in turn display the favicon in your subscribers’ feedreaders.

Old Browser

  • Once done, now you have to edit your page header.
  • Go to your WordPress Administration Panel and click on Design (Presentation in WordPress 2.3.x and below and Appearance in WordPress 2.7+).
  • Click on Theme Editor and 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.

  • Save the changes and you are done.

Photo Credit: Flickr/Rafa Otero