Loading...While browsing the internet, you might have noticed a small icon before the address of the webpage in the address bar. These also appear in the drop down of the address bar along with the site’s name. These are actually called Favicons or Page Icons.They are the icons which appear in the browser’s address bar, Bookmarks and Favorites list. You can also add a favicon to your blog.
Favicons are very useful because they add a touch of professionalism in your site and if saved in .ico format they can also be used as desktop shortcuts for your site. Almost every site uses it and some sites change the favicon at times. Besides, there are plugins that can make your favicon informative, like showing the number of unread emails in Favicon for Gmail. The main advantage however is that it makes the viewers easy to locate your site in Bookmarks or favorites list. Here I’ll show you how to add these favicons to your sites.
First you choose an image or design one for the favicon. Generally the size is 16px X 16px. Favicons can be in three images formats, .ico, .png or .gif. But it would be good if you save it in .ico format. If you use photoshop you can use ICO format Plugin. After downloading, copy the plugin file inside the “File Formats” folder of your Adobe Photoshop Plugins Folder. If you are already using Photoshop while you copied this plugin, quit photoshop and launch it again. Now open up your image and Save it in .ico format available in the dropdown of Adobe Photoshop file saving dialogue box. Give it the name Favicon.ico.
If you want to create your Favicon online, you can visit favicon.cc, where you can easily create one. Or use a dedicated software like add to any icon.
Now you need to upload it. If you use WordPress then upload the file to your “public_html” folder. After this, you will need to edit header.php file of your theme. Add the following line of code to your header.php file:
<link rel = “shortcut icon” href = “favicon.ico”>
Save your header.php file and then open up your website. Refresh the page and you’ll be able to see the icon before the URL of your page.
For Blogger Blogs:
You can add a custom favicon to your blog in blogger replacing the default blogger’s favicon. First you choose some place to upload your favicon like Google sites, Windows Live Sky drive, or any other. Copy the URL of the uploaded image. Then login to your Blogger account and go to Layout>Edit html in the Dashboard. In your template file you will find the following code at the top:
<title><data:blog.pagetitle/></title>
Now add the following lines of code just below the above one.
<link href=’favicon file url ‘ rel=’shortcut icon’ type=’image/vnd.microsoft.icon’/>
Replace ‘favicon file url’ with the URL of the .ico image. Finally save it.
Now refresh your blog and see the favicon change from blogger’s default icon to your very own custom icon.
So, give your blog a professional look and make it easy for your viewers to bookmark it by adding a favicon to your blog.