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.
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.
- 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.
- 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” />.
<link rel="shortcut icon" href="<?php echo get_stylesheet_directory_uri(); ?>/favicon.png" />
Installing A Favicon In WordPress
- 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.
- 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.
<link rel="shortcut icon" href="<?php echo get_stylesheet_directory_uri(); ?>/favicon.ico" />
- Save the changes and you are done.
Photo Credit: Flickr/Rafa Otero