A Favicon is a little custom icon that appears next to a website’s URL in the address bar of a web browser. It is usually of small size, like 16 pixels by 16 pixels. It’s a very good branding opportunity and it gives that additional dynamism to your site design.
How to make a Favicon file?
For starters, you can use a GIF or a PNG file as an icon, but Internet Explorer doesn’t always support those formats, that’s why to be on the safe side, the .ICO format should be used.
To make and .ICO file in photoshop, you have to first download a plugin and add it to photoshop. Please download and follow the instructions here…
Telegraphics ICO plugin for Photoshop
After you’ve installed the plugin, open canvas in photoshop of size 32×32 pixels. [ or you can take multiples of 16×16. Such as 48×48, 64×64 etc ]
Best Branding Option is to use a part of the logo of the site and/colors to make the icon. If you have a logo ready, please try to make it smaller and see how it looks at the size of 16×16. if it looks too complicated, it’s better to incorporate just a part of it, rather than the whole logo.
After you’ve decided on the look and size, time to make it better by sharpening the image at that small size. Also, change saturation and contract to achieve a neat and clean icon option. Try not to have too many shadows and blurs in the icon, as it doesn’t look clean in browsers.
Once done with that, in photoshop menu Go to File>Save As and name the file favicon.ico. Under Format, you must choose Windows Icon (ICO) from the pulldown menu. This format will only be available in Photoshop after you install the abovesaid plugin.
So the Favicon is created. Now let’s look at how you can add it to the website.
Add Favicon to the website
The common location is the “root” folder of your site, which is the same directory as your home (index) page. If you put it there with the name favicon.ico, most browsers will find it automatically.
If you plan to not keep it in the ‘ROOT’ Directory of the website, you will have to add one line of code to your index file HTML.
<link rel="icon" href="/favicon.ico" type="image/x-icon" />Add Favicon in the WordPress Blog
In the WordPress blog, you can also use the same format of putting the .ICO file in the root folder. But for the sake of making the favicons theme friendly, upload the .ICO file in the Theme directory where your style.css file is saved of a particular theme you’re using.
Then in the theme editor, please look at the header.php file. Open it and add the following code betweentag.
<LINK REL="ICON" HREF="<?php bloginfo('template_directory'); ?>/favicon.ico" type="image/x-icon" />Update the file and Visit the Blog home page to see the favicon at work.
If your new Favicon does not show up right away, try refreshing the page [ by doing Ctrl + F5 ] or clearing your cache.
Voila! You’re done!