How to create a favicon ico file

Written by Daniel

Favicon is short for 'Favorite Icon.' A Favicon is a multi-resolution image included on nearly all professional developed sites. In most browsers the Favicon ICO file is displayed on the Address line, in the Favorites menu or next to the page title in a tabbed document browsing. The Favicon allows the webmaster to give a personal touch to their website, 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 matching its colors and general feel. Every webmaster 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 (16x16 pixels) and should contain some small text or image. Webmasters usualy use the website's logo or its main name. To start of I am going to present several ways in witch one can create favicons. 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. Create a favicon using your favorite graphics software Lets asume you want to make your favicon special and not use the online generation tool. All you need to do is fire up your favorite graphics software and start working. Remember the favicon is really small, only 16x16pixels, and i dont think anyone can decently create something on that size. So to make things a bit easy you should start of by creating a document lets say 64x64pixels. I am using 64 becouse its a multiple of 16. You should work with whatever size your are comfterbul with, but that has to be a multiple of 16. Now that you have created your main image for the favicon you should scale it down to 16x16 px. If that doesnt look good (ie. blurry) you should go back, edit and size down again. Now you should save your file in a PNG format. Just chose File>Save As and then selected the PNG format from the extensions list. If you are using Photoshop in creating the favicon you must know that there is a special plugin that allows you to save files in direct ICO format from Photoshop; download the plugin. Be advised that for this to work you have to load the plugin into Photoshop, restart it and then open the file you just created and save it in the ICO format naming it favicon.ico Convert image to ICO format online For all i know you could also be using Paint to create your favicon so lets asume you dont have Photoshop and the special plugin. There are a bunch of online tools that let you upload a PNG file and convert it to a ICO file. Icon sushi is an online image to icon converter that supports the mask editor and the creation of Windows XP 32bit/Windows Vista format icons. It can also convert icon files to image files if anyone finds that helpfull. Converticon is another online converter that does just about the same thing as suchi. It .convert s ICO to PNG or PNG to ICO. Chami is another website that converts most image formats to ICO files online. Convert image to ICO format with software If for exampe you need more control over the way your files are converted you should install proper software that those the converting onsite and you can manage it more accurately. I have compiled a small list of the most popular and used software applications used for creating a FAVICON. IrfanView is a very fast, small, compact and innovative FREEWARE (for non-commercial use) graphic viewer for Windows. MovieGear is also used for creating animated GIF files that can also translate to animated FAVICONs. 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. Subscribe now via RSS feed and get all the new tutorials written by Rose , August 14, 2007 I have photoshop and illustrator CS2 and I want to create my own icon how do I save it...it won't save with an ico extension? written by SPIRI , October 16, 2007 Use the Telegraphics Photoshop plugin for ICO files: http://www.telegraphics.com.au/sw/ written by Neomi Vembu , November 14, 2007 I followed the instructions above: created my favicon in photoshop CS2 dowloaded the plug in copied the plug in into the photoshop plug in folder saved as an .ico file called favicon.ico put this file into the root directory in my dreamweaver 4 folder and pasted after my flash script and before the tag Then I uploaded it.. it didn't work Am I missing a step? written by Michelle Labrie , January 28, 2008 I created the favicon in Photoshop and converted to an ico file using the Telegraphics plugin. I pasted the code in my flash generated HTML file in between the tags and the favicon.ico file is in my root directory, yet I keep seeing a green running man icon instead of the favicon I created. I can't figure out what is wrong. Below is a copy of my html code. Any suggestions would be much appreciated:) Studio L Architecture AC_FL_RunContent = 0; if (AC_FL_RunContent == 0) { alert("This page requires AC_RunActiveContent.js."); } else { AC_FL_RunContent( 'codebase', 'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0', 'width', '100%', 'height', '100%', 'src', 'index', 'quality', 'high', 'pluginspage', 'http://www.macromedia.com/go/getflashplayer', 'align', 'middle', 'play', 'true', 'loop', 'true', 'scale', 'showall', 'wmode', 'window', 'devicefont', 'false', 'id', 'index', 'bgcolor', '#ffffff', 'name', 'index', 'menu', 'true', 'allowFullScreen', 'false', 'allowScriptAccess','sameDomain', 'movie', 'index', 'salign', '' ); //end AC code } written by dark , March 02, 2008 Embed your flash into a html page and the head should be like follows: Assuming your icon is in your root directory.Or you can put it in an images folder and use: written by ChilliMo , July 03, 2008 I cannot access http://www.telegraphics.com.au/sw/, it's been blocked on our network. Is there somewhere else I can download it from? Thanks Do you need more help? Ask now! Comment Name Email Website   Add Comment Trackback(0) Comments (6)

Last Updated ( Thursday, 07 June 2007 )