How to create favicon for your site easily

What is a favicon?

Favicons are small square images usually 16×16 pixels which are used by web browsers to show a graphical representation of the site being visited at the left side of the browser’s address bar. You have probably seen many favicons before, even if you don’t know what they are. If there’s any doubt, the image below will help.

If you’re interested in understanding a piece of internet history, here’s a interesting fact:
The word favicon is a portamentau made out of the words “favorite” and “icon”, and it was named as such because it was first supported by Microsoft’s Internet Explorer 5 and just in case you don’t use IE, this browser bookmarking feature is called favorites.

What’s the purpose of a favicon?

Back in the early days of the internet, tools such as Google Analytics were mere dreams in the minds of a few web-nerds, so as strange as this may sound, at that time, favicons were used as a way to estimate website traffic by counting the number of visitors who bookmarked the page. (That’s another interesting snippet in the history of the internet!)
But interesting facts aside, the main reason for having favicons nowadays is to improve user experience. Favicons are used in all modern browsers at the address bar, in the links bar, in the bookmarking area and in its browsing tabs. Besides that, a few browsers also show favicons whenever you create a shortcut link for the corresponding website in your desktop and your mobile device.
Surely the main reason to have a favicon is the obvious improvement in user experience. A website without one will show a generic browser symbol on all the points-of-interaction I mentioned above, and if you care about your user experience, you must care about favicons.

How to create a favicon?

Creating a website favicon is easy as pie. As a matter of fact, you don’t even need to be a designer to do that. Surely it helps if you are, as you can put your skills to work and create something that really stands out, but even the less tech-savvy of us can do it in about 5 minutes or less, using the right tools.
The websites in the list below allow you to create a favicon simply by uploading a pre-existent image. So if you want to create a favicon for your brand, all you need to do is to upload your logo to one of the following sites and download the favicon file. Easy peasy, lemon squeezy.
Here’s the Favicon generator list you’re looking for:

• CoolWeb.info
• Favicon CC
• Favicon Generator
• Dynamic Drive Favicon Tool
• Chami Favicon Service
• Favicon Generator ORG
• Favicon UK
• Degraeve Favicon
• Anti-Favicon
• Gen Favicon
• Favigen 
  
  

  How to use your favicon?

  Once you have your favicon carefully designed, installing it on your server shouldn’t take more than a couple of minutes in two easy steps. For that you’ll need access to your website root folder and a text editing tool to change your website HTML code.
  

  Step 1

  You’ll need to upload the “favicon.ico” file to your server. In order to do that, point your browser address bar to your FTP server; your URL should look similar to this:
  

  ftp://username@yourwebsite.com

  Press enter and the browser will prompt you for an username and password before granting access to the file server. Once you’re in, just upload the “favicon.ico” file to the root folder and you’re done.
  

  Step 2

  Now you’ll need to edit your website HTML page to help browsers find your favicon image. Keep your FTP window open, find and download the “index.html” or “header.php” file from your server and follow the steps below according to the file you get:
  
  If your website is made of plain HTML, insert the code below in the HEAD area of the “index.html” file, and don’t forget to change “yoursite.com” for your own website address.
  
  

  <link rel="shortcut icon" type="image/x-icon" href="http://yourwebsite.com/favicon.ico">

  
  If you use WordPress, insert the code below in the HEAD area of your “header.php” file.
  
  

  <link rel="shortcut icon" type="image/x-icon" href="<?php bloginfo('url') ?>/favicon.ico">

  
  With that done, upload the file back to where you got it from. You’re done!
  On a matter of fact, most modern browsers are smart enough to find your favicon file even without any piece of code, but only as long as the favicon image has 16×16 pixels, it has been named as “favicon.ico” and is saved in the root folder of your website folder.

What is Favicons ?

What are favicons?

 

Favicons are small 16x16 icon files that are displayed next to the URL of your site in a browser's address bar. Additionally they're often displayed next to the name of your site in a user's list of open tabs and bookmark listings making it easier for the user to quickly identify amongst other sites.

 

Internet Explorer ("IE") 5.0 and above has a facility where, if someone bookmarks your website (ie puts it in their "Favorites" menu), it associates a particular icon with your website in the bookmark. It tries to obtain that icon by first requesting for "favicon.ico" from the directory of your web page. If it cannot find such a file, it will try to obtain it from the root directory of your website, failing which, it will simply use a default icon for the bookmark.

On the other hand, the favicon.ico file is available, the icon will also be displayed beside your website name in the "Favorites" menu, the location bar in IE, and if the user opens up the "Favorites" folder, it will be the icon used for the link to your site.

Opera and Firefox also have the ability to use the favicon.ico file. In fact, Firefox also accepts the file in other graphics formats, such as the PNG format. These browsers display the "favicon.ico" in the location bar of the browser (the part that shows your website's address or URL). Safari, both the Mac OS X and the Windows versions, also loads the favicon.ico file into the address bar if available.

How to create favicon for your site?

Although many modern web browsers support favicons saved as GIFs, PNGs or other popular file formats all versions of Internet Explorer still require favicons to be saved as ICO files (a Microsoft icon format).There are online tool provides an easy way to convert any GIF, PNG or JPEG to ICO which is supported by all modern web browsers.

http://coolweb.info/

Visit : Free Favicon Generator

 

Or you can create it manually...on your image editor.

1. Create an image 16X16 pixels in size. Yes, it is really small and you can't really draw much in it. You should also restrict yourself to the standard Windows 16 colours, although I suspect that 256 colours will work fine.
   If you like, you can also create a 32X32 pixel icon, which will be scaled to size for the Favorites menu and the location bar. You can even put both 16X16 and 32X32 pixel icons into the same icon file. Windows will use the former for its menus and the latter when the user opens up a folder that is set to display large icons. It's probably not really necessary to do this if you can't be bothered.
   
2. Save the image as an ICO file (named "favicon.ico", of course).
   
3. Upload it to your website. You don't need to upload one to every directory of your site if you don't want to waste space - simply put it in your root directory and the web browsers that support favicons will apparently locate it eventually. You can also upload it into your images directory, but you will need to modify your web pages if you do. See later in this article for more information on this.

 

Using a favicon

After generating a favicon with this tool download and save to the root directory of your site. Then include the following code in the head of your HTML document.

<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
<link rel="icon" href="/favicon.ico" type="image/x-icon">