This is a guest post by Rebecca Jones, see her bio at the bottom of this post
Favicon is a small icon that displays bright on the browser URL bar, bookmark list or navigation tab. Favicon (the short form for favorite icon) in all its certainty will bring a drastic modification in your website’s outlook, if created with thorough research on the interests of the visitors to the website.
Below I list the steps required to create a new favicon.
The basics
Concentrate on simple images and letters while designing the favicon. The favicon is a 16 pixel by 16 pixel icon with .ico extension. Complex graphics get adjusted in such frame with rare difficulty.
The color of the favicon should be in sync with the basic theme of the website. This makes it easier for the visitors to associate the icon with website and will also reflect your passion and sincerity for your
work.
Use of MS paint and web tools
Favicons being simple image icons, one can create the same with Microsoft Paint. The first step in the series is to create a 32 into 32 pixel JPEG image with help of paint. The same can be converted into favicon .ico file with the help of an online service “Favicon from pics”.
Using Photoshop to create favicon
Another alternative for a well designed favicon is Adobe Photoshop. As, the standard photoshop cannot handle .ico, download the Window Icon Photoshop Plugin. Install the plugin and you can create 64 by 64 pixel canvas with this.
Once the designing part of the favicon is over, one needs to resize the image. Click the Image Size menu. It will show various options, including resample image. Click on the same. By clicking on the resample image option, you ensure that image does not become blurring, even as you scale it down.
Save the 16 by 16 image as favicon.ico.
Upload the favicon.ico file
As the favicon.ico file nears completion, it’s time to upload the same to your site. The only thing one needs to ensure is that the favicon.ico files are placed in the root directory, as the index file is located in the root directory.
Change your header
Change header, as you upload favicon.ico file. Header is the code that goes between the head tags. The following line is to be added:
link rel= shortcut icon
href = favicon.ico
type = image/x -icon
Installing a favicon in wordpress
The new favicon.ico file is to be uploaded in current theme’s main folder. An FTP client helps upload the new Favicon.ico file. Another copy can be uploaded in the main directory of your site. In case, an old favicon.ico file exists in your current theme’s main folder, the same is to be deleted using FTP clients. The same can be deleted by using mdel command under FTP.
The final check
Open the browser, pointing to the site if the favicon is appearing or not. It should appear in all circumstances. Open up a few tabs to check the new look of the icon. Need to check the new favicon for the first time. Clear the browser’s cache. If the favicon does not show up, restart the browser.
Neil’s 2 Cents Worth
There is a really good resource at http://codex.wordpress.org/Creating_a_Favicon with techie details on adding the header details, you need to add the following line in your header. I recommend you put the favicon in your theme directory.
<link rel="shortcut icon" href="<?php bloginfo('stylesheet_directory'); ?>/favicon.ico" />
Another good resources is favicon.co.uk, there is a library of premade icons and a generator where you can upload an existing logo and have it build a favicon for you.
Author BIO
About the author: Rebecca is a blogger by profession. She loves writing on technology and luxury. Beside this she is fond of gadgets. Recently an article on New Android Apps attracted her attention. These days she is busy in writing an article on Silver Bracelets the latest fashion trend.
Image by orphanjones
