How to create a favicon ico file


What Is favicon Icon?

Favicon is short for ‘Favorite Icon.’ Favicons, mini graphics for a particular web-site, can be displayed in the browser’s URL bar, next to the site’s name in lists of bookmarks, and next to the page’s title in a tabbed document interface. To be recognized immediately, favicons have to be visually appealing and fit to the design or logo of a given page. In fact, if you use Favicons for your sites, users can easily find your URL in their bookmarks – in this way you create some kind of a visual connection between your web-site and your sites’ visitors. Often, the Favicon reflects the look and feel of the web site or the organization’s logo matching its colors and general feel.

My site favicon as example:

Every webmaster or webowner should always create favicons for everysite they are building. It is consider an act of professionalism and it also gives a personal touch to one’s website. The favicon file is very small in size (16×16 pixels) and should contain some small text or image. Webmasters usualy use the website’s logo or its main name. Like mine I use my own picture for my www.roslihanip.com website.

Easy to use on-line favicon generator

In my search for a favicon generator I found several ways/methods of building/creating one. The fastest one is building a text favicon. This website antifavicon offers a really nice and fast way for creating a really simple favicon. You only need to enter small text, chose your colors and the software creates your favicon on the fly. This is one route you can use and it is very fast and easy to use.

Favicon Tools

* Favicon Generator
* Favicon Generator 2
* Even More Favicon Generators
* Mysteries Of The Favicon.ico — How To Create A Favicon In Photoshop

How to use a favicon in your site

Now that you have created your final favicon.ico file you should add it to your sites functionality.

The original way of defining a favicon was by placing it in the root directory of your site. Later a more flexible system was created, using HTML, it is now possible to indicate the location of an icon for any given page. This is achieved using the link element in <head> the section of the document.

<link rel=”shortcut icon” href=”/favicon.ico” />

In this way, any appropriately sized (16×16 pixels or larger) image can be used, and although many still use the .ico format, other browsers now also support the GIF and PNG image formats.

So now all you have to do is upload the favicon.ico file on your webserver and add the HTML code posted up in the <head> section of your site. Note that you could also use PNG or GIF formats for your favicon but ICO is a standard format accepted by all browsers. Also note that you can also specify the location of the favicon but the standard is keeping it in your website root directory.

If you are running out of ideeas when creating the small image document have a look through this nice collection of favicons. Also look at the nice categorized list of 50 remarkable favicons at Smashing Magazine.

I hope you enjoyed this tutorial and build beautiful FAVICONS.

Be Sociable, Share!

1 Comment so far

  1. Free Favicon on October 11th, 2007

    Smashing Magazine 50 remarkable favicons is a great post. They offer some fantastic examples of waht can be done in such a small space.

Leave a reply

CommentLuv badge