I have received several inquiries from people who want to know how to create favicon for their blog. So, I have decided to use this post to address all these requests. A favicon is an icon associated with a website or webpage. It is normally used to different one website from another in the URL bar. Web browsers normally use them in the URL bar, on tabs, and elsewhere to help identify a website visually.
A favicon is typically a graphic 16 x 16 pixels square and is saved as favicon.ico in the root directory of your server. You can use a favicon with any WordPress blog or website on a web server that allows access to the root directories.
How to Create 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 has to be clear and should be designed to match your blog image and/or content. To prepare the image to be saved as favicon.ico:
- crop or add space around the image you want to use and make it 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 favicon.co.uk or Dynamic Drive, follow the instructions provided by the site. Then download the image of the favicon.ico to your computer.
How to instal a Favicon in WordPress
If there is already an old favicon.ico file in your current theme’s main folder, you will need to delete it using an FTP Client. With any 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://bitstopia.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. You can do this by following the steps below:
- 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 bloginfo(‘stylesheet_directory’); ?>/favicon.ico” />
- Save the changes.
To see your new favicon, you may need to clear your cache or even restart your browser. You can repeat this process as many times as you want if you think you don’t have the right favicon for your website.
Source: Creating Favicon for WordPress
Image Source: http://www.reviewmonsters.co.uk/favicon-ico-whats-it-all-about/
