Add Favicon in your blogger blog is so easy. First of all create a favicon and learn what is favicon. You know that favicon is a little icon that appears next to the web addresses, like the one you see above? When you visit the sites or bookmark them, these icons will make these URLs stand out. These are “Favicons” or “Favorite Icons”.
Ok. First of all make a icon with a software or you can use online favicon maker website to generator your icon free. Generate your favicon and then download in your PC on desktop. The only method to use will be to upload the icon into some web folder, and create a link. You can read about using free hosts like Google Page Creator and Google Groups. We have also a rather comprehensive list of free Image Hosts and File Hosting Services in our article on Manage Blogger Image Storage Space. Check out those sites and choose one that is fast, reliable and allows uploading of .ico files.
Once you have done that, take note of the URL of your icon. If you are using Google Page Creator, hovering your mouse over the link, you will see that the file is stored under a directory which looks like this http://yourname.googlepages.com/iconname.ico
where “yourname” is your Gmail account name, and “iconname” is the file name. Copy this URL.
Go back to your Blogger dashboard and under the Template tab, go to “Edit HTML”. Near the top you will see a line like this:-
Update: Copy and insert the following code below the line:-
Inserting this will also work but the former is preferred:-
Remember to type in the “URL of your icon file”.
Save the template. When you refresh your blog site, you should see your nice little Favicon next to the blog address.
Other image types: The .ico image format has been used by many but you can also create an image under the .png or .gif format. Ensure that the size of the image is either 16x16 pixels or 32x32 pixels.
If you have a PNG format image, the link to insert is:-
If it is a GIF format image, the link is:-
External Domain: For those who have hosted sites in external domains, insert the link in the root directory as well. Otherwise, you can upload the file into the root directory and name it favicon.ico
As an example, if your domain name is www.domain.com, the URL of the favicon will be www.domain.com/favicon.ico
This method is not preferred but a number of browser versions are able to process the icon. Since we do not have external domains to try out this alternative, you may want to see if it works for you.
Compatibility: While you can see the Favicon in Mozilla Firefox, many have problems seeing the Favicon in Internet Explorer. This is a known problem and has been a sore point with many IE users. In some versions of IE, bookmarking the site will display the Favicon. This is not necessarily so in IE7 that we are using. In fact, when we bookmarked the highly popular search engine sites, their Favicons don't show in our IE bookmarks too although they show well in Firefox. Perhaps this is one more reason to download Mozilla Firefox if you have not already done so.
© Tips and Tricks for Bloggers
Ok. First of all make a icon with a software or you can use online favicon maker website to generator your icon free. Generate your favicon and then download in your PC on desktop. The only method to use will be to upload the icon into some web folder, and create a link. You can read about using free hosts like Google Page Creator and Google Groups. We have also a rather comprehensive list of free Image Hosts and File Hosting Services in our article on Manage Blogger Image Storage Space. Check out those sites and choose one that is fast, reliable and allows uploading of .ico files.
Once you have done that, take note of the URL of your icon. If you are using Google Page Creator, hovering your mouse over the link, you will see that the file is stored under a directory which looks like this http://yourname.googlepages.com/iconname.ico
where “yourname” is your Gmail account name, and “iconname” is the file name. Copy this URL.
Go back to your Blogger dashboard and under the Template tab, go to “Edit HTML”. Near the top you will see a line like this:-
<title><data:blog.pageTitle/></title>
Update: Copy and insert the following code below the line:-
<link href='URL of your icon file' rel='shortcut icon' type='image/vnd.microsoft.icon'/>
Inserting this will also work but the former is preferred:-
<link href='URL of your icon file' rel='shortcut icon' type='image/x-icon'/>
Remember to type in the “URL of your icon file”.
Save the template. When you refresh your blog site, you should see your nice little Favicon next to the blog address.
Other image types: The .ico image format has been used by many but you can also create an image under the .png or .gif format. Ensure that the size of the image is either 16x16 pixels or 32x32 pixels.
If you have a PNG format image, the link to insert is:-
<link href='URL of your icon file' rel='shortcut icon' type='image/png'/>
If it is a GIF format image, the link is:-
<link href='URL of your icon file' rel='shortcut icon' type='image/gif'/>
External Domain: For those who have hosted sites in external domains, insert the link in the root directory as well. Otherwise, you can upload the file into the root directory and name it favicon.ico
As an example, if your domain name is www.domain.com, the URL of the favicon will be www.domain.com/favicon.ico
This method is not preferred but a number of browser versions are able to process the icon. Since we do not have external domains to try out this alternative, you may want to see if it works for you.
Compatibility: While you can see the Favicon in Mozilla Firefox, many have problems seeing the Favicon in Internet Explorer. This is a known problem and has been a sore point with many IE users. In some versions of IE, bookmarking the site will display the Favicon. This is not necessarily so in IE7 that we are using. In fact, when we bookmarked the highly popular search engine sites, their Favicons don't show in our IE bookmarks too although they show well in Firefox. Perhaps this is one more reason to download Mozilla Firefox if you have not already done so.
© Tips and Tricks for Bloggers
No comments:
Post a Comment