In this post we will look at the favicon. We will look at what it is, the history and legacy of the favicon, how to implement it and finally how to create your own. There are quite a few icon generators online and we will share the best of them with you.
A favicon is a graphic image (icon) associated with a particular website. Many recent user agents such as web browsers, mobile phone, tablets and newsreaders display them as a visual reminder of the website identity in the address bar, tabs or shortcut links.
GENERATE your own Favorites Icon for your website and view a gallery of some of the ones that have been created.
IE7 is out and there’s been some cool changes in the way favicons are handled. No longer are favicons requested and displayed only by the action of a user bookmarking your site; if a favicon is present, IE 7 will display it in the location bar.
IE7 also displays favicons in the individual browser tabs, matching the branding opportunity long enjoyed by Mozilla-based browsers like Firefox and Camino as well as the Opera family. If your clients haven’t been favicon aware, they are sure to become so shortly.
To add a favicon to your website, you’ll need both an image and a method for specifying that the image is to be used as a favicon.
In March 1999, Microsoft released Internet Explorer 5 which supported favicons for the first time. Originally, the favicon was a file called favicon.ico placed in the root directory (e.g., http://webdesignacademy.co.za/favicon.ico) of a website. It was used in Internet Explorer’s favorites (bookmarks) and next to the URL in the address bar if the page was bookmarked. A side effect was that the number of visitors who have bookmarked the page could be estimated by the requests of the favicon. This side effect no longer works, as all modern browsers support the favicon without bookmarking.
Internet Explorer 1-10 supports only the ICO file format; simply changing the filename extension of an image to .ico without converting it to an ICO file will result in an error and not displaying the favicon. Netscape 7 and Internet Explorer versions 5 and 6 browsers display the favicon only when the page is bookmarked, and not simply when the page is visited as in later browsers.
Here we have a list of some free and easy to use icon generators. Some of them will even include the necessary HTML code for you to use in your documents. We will also discuss implementation later in this post.
Use this online tool to easily create a favicon (favorites icon) for your site. A favicon is a small, 16×16 image that is shown inside the browser’s location bar and bookmark menu when your site is called up. It is a good way to brand your site and increase it’s prominence in your visitor’s bookmark menu.
This one has been around for some years now. You can also design and download your own icon. They also allow you to upload a design and edit if needed.
REAL FAVICON GENERATOR
This is one of the newest kids on the block and also export all different types of icons as well as the HTML code you will need to implement the icon. This is what they had to say on their website
Generate the favicon pictures and HTML code that work on all major browsers and platforms
As a web designer or developer, you are creating your brand new web project. It is beautiful and was designed for PC, smartphones, tablets…
If your site looks great on most platforms, why is your favicon a small picture that only works on desktop? Your web site design is responsive, so should be your favicon.
Instead of giving you a single favicon.ico file, RealFaviconGenerator generates all the pictures and HTML code you need to get a cool, mobile- and tablet-ready favicon. Your favicon will be perfect for:
- PC and Mac, as usual
- iPhone and iPad
- Android phones and tablets
- Windows 8 tablets
- And more…
Remember that a favicon is also a branding opportunity. They are easy to create and implement. Do you know any other tools that we might have missed out on? Please let us know in the comments.
Happy icon creating