Favicons are my favorite!

My favicon!

Perhaps you noticed my new favicon (what’s a favicon?)? If not, you may be using a browser that doesn’t take advantage of them. At any rate, you can still go and see it.

Since I just went through creating mine, I thought I would provide you a simple process for creating yours.

First, go download png2ico, a freeware program for transforming .png files into an .ico file. Unzip it in a convenient location. It’s a command line program, but buck up and learn something (if that’s new for you)!

Second, create some nice .png graphics. Create 2 of them. The first should be 16×16 pixels and the second, 32×32. Mmmmm…those look nice. For ease of use and explanation, slap ‘em in the png2ico directory (located wherever you unzipped it in the latter part of step 1).

Third, open up a command line. In Windows (which is what I’m using), you can hold your Windows key and then press ‘R’. That will bring up a Run dialog box, where you can type either “cmd” or “command”, depending upon your version of Windows.

Fourth, from the command line, browse to your png2ico directory (HINT: if you don’t know how to browse in MS-DOS, you can Google “MS-DOS cd command”). Then, run the png2ico program. The command will look something like this:

> png2ico favicon.ico logo16×16.png logo32×32.png

Obviously, substitute logo16×16.png and logo32×32.png with whatever you called them. Your new favicon.ico file will now be in the png2ico directory.

Fifth, upload the favicon.ico file to the root directory of your site.

Sixth, place the following code somewhere in the <head> section of all of your (x)HTML documents:

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

Seventh, lay back and imagine the “Oooohs” and “Aahhhhs” people will utter as they come to your site. Proceed to revel in your genius.

Thanks to Cody Lindley for the tip on using png2ico.

  1. You can download the photoshop plug-in from this site. iI makes it a little easier than having to use DOS or Run…

    Jordon Brill is the author. Jan 10, 23:54 is the time. <
  2. Very nice.

    That’s a sweet option if you have Photoshop (which I do at work, but not at home). The drawback is that it costs $5, if we’re looking at the same plug-in.

    My bet is that there are also some free ico programs out there with GUI interfaces.

    Thanks for the tip!
    Nathan Logan is the author. Jan 11, 00:40 is the time. <
  3. Its a $5 donation. It is free, which is the way I got it, but then donated with PayPal. But, you can get it for free.
    Jordon Brill is the author. Jan 13, 22:18 is the time. <
  4. you can also google for pixeltoolbox. A free tool that lets you create and manipulate icons and cursors..
    Wacken Marbill is the author. Apr 4, 18:57 is the time. <