|
Adding Favorite Icon ( Favicon ) to your Web Pages
|
Post Bank
Posting Manager
Posts: 995
Group: Forum Team
Joined: Sep 2006
Status: Online
|
Make money from now. You can make money just for posting on this forum. Every discussions on this community gives you more money. $2 minimum payout. So get your payment today, SignIn with this forum.
Signin to Remove this Post
|
|
|
|
ivenms
Administrator
Posts: 2,172
Group: Administrators
Joined: Sep 2006
Status:
Offline
Reputation: 14
Points: 4373 (Donate)
|
 Adding Favorite Icon ( Favicon ) to your Web Pages
What is a favicon?
Favicon (pronounced fav-eye-con) is short for 'Favorites Icon'. A Favicon is a multi-resolution image included on nearly all professional developed sites. The Favicon allows the webmaster to further promote their site, and to create a more customized appearance within a visitor's browser. Often, the Favicon reflects the look and feel of the web site or the organization's logo. You can customize the Icon(s) in the browsers 'address box window' and 'bookmark listing'. Hence, when people look at their browsers bookmarks they will be drawn to your web page because of the beautiful logo next to your bookmark. They can confirm that they are viewing your web site by seeing your customized icon(s) in the browser 'address box window'.
A screenshot of your favicon on your browser is given below:
How do I set up a favorite icon?
Create a 16 pixel wide by 16 pixel high favicon.bmp file in a Program like MS-Paint, Adobe Photoshop, or Jasc's Paint Shop Pro, then use a program (such as the free IrFanView app [for Windows]) to reduce the colors to 16 colors [Image -> Decrease Color Depth], and then 'save as...' to a Windows Icon Format (favicon.ico). Upload the file with FTP to the root section of your web site (the first page area, where you put files like index.html). Open up index.html, and add this line after any meta tags in the HEAD section but before the </head>.
<link REL="SHORTCUT ICON" HREF="http://yoursitedotcom.here/favicon.ico">
If you are in a user directory, without a domain, add something like this instead:
<link REL="SHORTCUT ICON" HREF="http://yoursitedotcom.here/yourdir/favicon.ico">
Example: If you owned http://www.webmasters-forums.com, you would create the file favicon.ico, and FTP it to your host. Then, you'd use this code:
<link REL="SHORTCUT ICON" HREF="http://www.webmasters-forums.com/favicon.ico">
Reload the page... and try adding it to your favorites or bookmarks. Once you've added it to the favorites, close the browser and then open it again, and return to the site? Does it show up now? It should! 
Can I convert my logo or other images to favicon.ico
You are lucky that there were lots of online favicon generators available on the internet. Some for the favicon generators are listed below:
Design your .ico files online on: http://www.favicon.co.uk/
Upload your image and conver them to favicon.ico: http://www.html-kit.com/favicon/
Create a FAVICON from any image file on your hard drive: http://www.chami.com/html-kit/services/favicon/
Which are the HTML codes to put on my pages?
As mentioned above, you have to include only one line html code:
<link rel="shortcut icon" href="favicon.ico" >
This code must be placed between <head> and </head> tags. You can replace the favicon.ico with your favicon file name. Make sure that your file must be placed on the main directory.
What is an ico file?
An ico file is actually a repository of bitmap like images. They are used because in some locations a 16x16 pixel image is desired, and sometimes a 32x32 image may be needed. Sometimes a 16 color image is desired, and sometimes a 256 color icon is desired. This repository is scanned for the image size/color count appropriate for the location and the computer's color capability. If the image is not ideal, it may be compressed, expanded, and/or colors may be modified producing unexpected results.
Isn't an ICO file just a renamed BMP?
NO. Although some people have said an ico is a BMP, this is not true. Think of an ICO file as a repository of BMP images. It has its own format. If you have a 16x16 bmp you want to convert, use a program designed for the creation of favicons, or hire us to do it for you!
Thats all. Hope that you will enjoy embeding favicon on your pages. Post your replays.
Iven
Read: General Rules & Policies before posting.
Make Money By Posting | Earning and Exchanging Points | Add Your Links
|
|
| 21-10-2006 05:03 PM |
|
|
clookid
Advanced Member
Posts: 184
Group: Registered
Joined: Oct 2006
Status:
Offline
Reputation: 4
Points: 134 (Donate)
|
RE: Adding Favorite Icon ( Favicon ) to your Web Pages
Great tutorial, I will use this when I get my website up and running although I will have to ask you to convert it from BMP to ICO. Can you convert a GIF to an ICO?
Veebra Articles - Computer and technology related articles.
|
|
| 23-10-2006 02:25 PM |
|
|
|
ivenms
Administrator
Posts: 2,172
Group: Administrators
Joined: Sep 2006
Status:
Offline
Reputation: 14
Points: 4373 (Donate)
|
|
| 23-10-2006 03:36 PM |
|
|
|
walsh
Senior Member
Posts: 401
Group: Registered
Joined: Oct 2006
Status:
Offline
Reputation: 0
Points: 680 (Donate)
|
RE: Adding Favorite Icon ( Favicon ) to your Web Pages
Waoo.....
Great tutorial. Iam adding my reputation to the ivenms.
It is very useful for webmasters.
|
|
| 25-07-2007 09:01 PM |
|
|
|
bojomojo
Senior Member
Posts: 363
Group: Registered
Joined: Sep 2007
Status:
Offline
Reputation: 1
Points: 256 (Donate)
|
|
| 08-09-2007 09:36 AM |
|
|
|
Lord_Daksh
Posting Freak
Posts: 643
Group: Registered
Joined: Sep 2007
Status:
Offline
Reputation: 0
Points: 16 (Donate)
|
|
| 25-10-2007 08:35 PM |
|
|
|
ivenms
Administrator
Posts: 2,172
Group: Administrators
Joined: Sep 2006
Status:
Offline
Reputation: 14
Points: 4373 (Donate)
|
RE: Adding Favorite Icon ( Favicon ) to your Web Pages
Ultimate info! Oh god,how i missed this topic! I'm very happy now. I'll use it now now now. Thanks thanks thanks. Repute+
Thanks for your reputation. This is one year old tutorial from me..
Made for newbies who like to make a professional web site. The step by step procedure mentioned here is actually the way approached by myself for my first favicon creation.
Read: General Rules & Policies before posting.
Make Money By Posting | Earning and Exchanging Points | Add Your Links
|
|
| 26-10-2007 02:10 AM |
|
|
|
Cedik
Moderator
Posts: 424
Group: Moderators
Joined: Aug 2007
Status:
Away
Reputation: 2
Points: 575 (Donate)
|
RE: Adding Favorite Icon ( Favicon ) to your Web Pages
Thanks a lot for this tutorial, Ivenms!
I too find it very useful! I was actually looking for something like that too but the method that I used worked only for the forum, and not for the whole site!
Now, I can make it work!
Thanks again! I hope you will make many tutorials as useful as this one in the future!
It's a pity that everyone focuses on the major stuffs and no one pays attention to little things like this one when making tutorials!
MyBB.ro|Extra.animezup.com|Picture with me ^^|Animezup.com|Forum.animezup.com|Manga-anime.ro|My blog^^
|
|
| 26-10-2007 07:21 AM |
|
|
|
