Faviconis basically a tiny 16x16 .ico file which is displayed in the browser address bar, bookmarks, explorer shortcuts,browser tabs and also inblog feeds. Majority of favicons are static images, Recent browserversions Firefox,Internet explorer 8 now support animated GIFs or thetransparent PNG formats.
We can create favicons very easily without using expensive photoshop or Coreldraw.Windows icon files are named with extension ico. Favicons can be created from pictures(jpeg,gif,png),or even from text also. If youwant to designs professional looking 3D icons,you can invest for Microangelo Icon Editor. For Basic icon editing Irfanview with icon plugin is good enough to design cool favicons. Apart from this don’t steal any icons from other sites because just like logos and pictures icons are also undercopyright laws.
Step 1: We have to choose a picture or logo for favicon
While you can create a favicon from an image of virtually any size, butit is not looking good when it is squeezed to a 16x16 graphic icon.So better thing is open your picture or logo in any photo editingsoftware [like Picasa, Paint.NET or online image editors] and crop the image in 1:1 proportion of lenght:width keeping only the relevantportions. For instance, if you want to show your own pic as the favicon, you might trim down everything except face.
Step 2: How to creat a favicon from the picture Once your picture ready upload your picture here (Favicon from pics) or you can use your own and click generate favicon.ico,you will instantly get a zip file containing some four files includingthe favicon.ico. Extract only that favicon file to your desktop andyou can rename keeping .ico extension.
Step 3: Upload the favicon file to your web server If you have your own web space, you can upload the file their but ifyou are using a free blog service like Blogger, you may use Googlepages or imageboo to host that favicon file. Once uploaded, copy the faviconlocation url.which will be required in the next step.
Step 4: Modify your blog template by editing HTML. This is the Final step. Now we have to do some HTML coding but it's very easy and simple Click on Page layout tab,then click edit HTML.You will find HTML template code. Then you you have to find tag. Right inside the section, you may find some meta tags andlink tags. Leave them as such and look for the line that says Just above the closing head tag, add the following lines:
<link rel="icon" href="www.xyz.com/myicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="www.xyz.com/myicon.ico" type="image/x-icon">
The value of www.xyz.com/myicon.ico will have to be replaced by your favicon url Step 3 Now press the save template button and click on view button to acess your blog with new cool favicon. If you want to change your blog favicon in future, you can just replace the icon file with another version. Now your blog looking cool with favicon.
No comments:
Post a Comment