Favicon - How to create?
| Thursday, May 18, 2006 | 8:57 AM | Kiran Malla | 3 comments | Permalink |
Have you ever observed a small icon is shown on left side of the URL in the address bar of the browser? This icon is shown in your bookmarks dropdown too when you add the web site to your favorites. So, a favicon is an icon in your favorites. Favicons are shown in tabs of the browser if your browser supports multi-tabbed windows like Firefox or IE 7.0. For example, reddit.com has a small toy type favicon for it's website.
Creating and adding a favicon to a website is very easy. First of all we need to create an image file with .ico extension of 16 x 16 size.
-Open Paint program in Windows XP.
-Select Image > Attributes and select width as 16 and height as 16.
-Select View > Custom and zoom the picture to 800%.
-Create an icon like graphic that resembles the logo of your web site.
-Keep your graphic simple and transparent.
-Save the image as favi16.png.
-Download a freeware tool called png2ico to convert .png file to .ico file.
-Unzip this tool to your local drive and copy favi16.png file to the extracted directory.
-Run the following command at command prompt.
png2ico favi16.ico --colors 16 favi16.png
-Upload the created favi16.ico to the directory where your html files are stored.
-Then include the link tag in between the head tags of your html page with the following attributes.
rel="icon" href="favi16.ico" type="image/x-icon"
-Then include another link tag in between the head tags of your html page with the following attributes to support all the browsers.
rel="shortcut icon" href="favicon.ico" type="image/x-icon"
(Note: Blogger doesn't support these tags in the post and hence I'm not able to mention complete tags here.)
Republish your website and close your browser. When you open your website next time, favicon is shown in the browser. I have created a new favicon for my blog and your see it in left side of url in the address bar of the browser.
Category: Internet
Creating and adding a favicon to a website is very easy. First of all we need to create an image file with .ico extension of 16 x 16 size.
-Open Paint program in Windows XP.
-Select Image > Attributes and select width as 16 and height as 16.
-Select View > Custom and zoom the picture to 800%.
-Create an icon like graphic that resembles the logo of your web site.
-Keep your graphic simple and transparent.
-Save the image as favi16.png.
-Download a freeware tool called png2ico to convert .png file to .ico file.
-Unzip this tool to your local drive and copy favi16.png file to the extracted directory.
-Run the following command at command prompt.
png2ico favi16.ico --colors 16 favi16.png
-Upload the created favi16.ico to the directory where your html files are stored.
-Then include the link tag in between the head tags of your html page with the following attributes.
rel="icon" href="favi16.ico" type="image/x-icon"
-Then include another link tag in between the head tags of your html page with the following attributes to support all the browsers.
rel="shortcut icon" href="favicon.ico" type="image/x-icon"
(Note: Blogger doesn't support these tags in the post and hence I'm not able to mention complete tags here.)
Republish your website and close your browser. When you open your website next time, favicon is shown in the browser. I have created a new favicon for my blog and your see it in left side of url in the address bar of the browser.
Category: Internet
3 Comments:
is this latest technology ?
Dear anonymous,
If you are aware of the concepts published here, please ignore.
Thanks,
Kiran
This is very helpful Kiran. Although I've seen this in numerous sites, always wondered how to create one. I've been using a trial version of some software to create favicon. Thanks for the info.
I tried linking the favicon through Blogger and it works with my blog. Please check it there. I linked it below the HEAD tag.
Post a Comment
<< Home