BleepingComputer.com > How To Make A Favicon For Your Web Site

Full Version: How To Make A Favicon For Your Web Site

BleepingComputer.com > Internet & Networking > Web Site Development

Grinler

Jun 19 2006, 01:32 PM

How to create a Favicon.ico for your web site

Ever wondered how web sites have those cute little icons in the address bar of a web browser? For example, here at BC we have a little computer next to the address of any page you go to at this site.

Well now you to can have one of these icons for your own site. The instructions provided below using a freeware graphics program called Paint.NET. You can, though, use any program that allows you to create specific image sizes and save them as a PNG file.

Nuff of the intro...let's start making a favicon:

Download Paint.NET and install it on your computer. Please note that this program needs the Microsoft .NET framework installed.
Start Paint.NET
Click on the File menu option and then New.
Change the Width and Height to 16.
As the image is now way too small to work with, lets zoom in on it so we have more room to work with. To do this click on the dropdown menu, found on the main menu bar, that has a bunch of percentages in it and select 3200%.
Now using the program, create the icon you would like to use with a maximum of 16 colors. As I have as much artistic ability as a rock, I can't help you with this. An example of a really bad icon is a stick figure I just made:
When done, save this image as a PNG file called Favicon.png and exit the program.
Now download png2ico and extract it to your hard drive. This program will be used to convert your PNG image to a .ICO file.
As png2ico is a console program you need to run it from a command prompt. Start a command prompt and navigate to the folder you extracted the program to. Once there you would use the following command to convert your PNG file to a ICO file. These commands assume your PNG file is saved in the C:\ folder.

png2ico favicon.ico --color 16 C:\Favicon.png (Note there are two dashes before color)
Once the Favicon.ico is made, upload it to the root of your web site.

Now when someone visits your site they will see your icon next to the address.

If you would like to put the icon in a folder other than the root one, you can use the following html in your <head></head> section of the document.

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

For example:

HTML

Arenlor

Nov 3 2006, 02:57 PM

I read a good tip on using png2ico, also create a 32X32 image.

Walkman

Nov 6 2006, 12:10 PM

Hello,

I've downloaded the png2ico program, and I got it up on one of my sites now. Thanks alot for this info.

I do want to add, for those that don't download and install the Paint.NET and the Microsoft.NET Framework, but use their own imaging program, the command:

png2ico favicon.ico –-color 16 C:\Favicon.png

needs to be changed to:

png2ico favicon.ico C:\Favicon.png

because I've tried it that way and I get "--color: No such file or directory" message in the command line. So, after trying numerous combinations of commands to make it create the file, it finally worked when I took off the --color 16. I've saved the file in .png format and at 16 colors, and at 16x16 pix.

The issue I'm having though is that it displays in IE but not in Firefox. I've checked all my settings in Firefox, but it doesn't help. I've tested it on two computers, and the same results on both. I can however see the Bleeping Computer icon using Firefox.

Am I doing something wrong?

Arenlor

Nov 6 2006, 01:21 PM

What's your site? And what's the code you're using? My icon shows up fine for me in FF and I used png2ico http://arenlor.ulmb.com/ see if your code matches up. Also remember to use both lines:

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

Grinler

Nov 6 2006, 05:13 PM

The double-dash before the colors argument is not translating right if you copy and paste it. Just type it by hand and make sure you use two - before the colors argument and it should work.

Walkman

Nov 7 2006, 01:57 AM

Hello,

I got it working now. I had to add those 2 lines of code to my index.php page. But now, I'm going to have to add those lines to the pages inside of my top directory. I'm using Dreamweaver, so I'll do a mass find/replace.

It's strange that IE recognizes favicon on my site, but with Firefox, I'll have to add those 2 lines of code on every page I want it shown.

I might be able to add it to my /includes/ folder so it'll display on all pages. I'll test it out. I'm using it on a site that has the osCommerce shopping cart.

Anyway, nice tip, and it works.

Grinler

Nov 7 2006, 10:20 AM

It is possible that IE looks for the favicon.ico on its own. IE tends to do non- standard approaches to web browsing.

Arenlor

Nov 7 2006, 12:44 PM

Actually I know it does, forget where I read it, but IE will look for a "favicon.ico" and then a "favicon.png" then a "favicon.gif" to use. In case you're wondering that means that yes you don't have to name it favicon in order to use it as such, you're telling it in the code what to use as the icon. It just makes it easier for browsers who do their own thing to the internet and rewrite the genome sequencing of your computer to install to locate them on their own if you do.

HIPPO1023

Mar 2 2007, 06:51 AM

There is an online site that you can create your favicon.
You can create favicon of 16*16, 32*32 and 48*48 size in this site, FavIcon Generator.

the-splodge

Mar 6 2007, 05:52 AM

just a heads up, there's a free plug-in for photoshop so you can save as .ico

Grinler

Mar 6 2007, 10:25 AM

Have a link for it?

tg1911

Mar 6 2007, 10:36 AM

You can also save as an .ico in IrfanView.

HIPPO1023

Mar 9 2007, 07:42 PM

I found free plugin of favicon for Photoshop, but I don't use it yet.

ReadMe
Download

pcmaddeanp

May 21 2008, 09:44 AM

Hey,

This site will do it all for you without any fuss!

http://www.favicon.co.uk/

pete2008

Aug 10 2008, 02:23 PM

This is the one I use

Free Favicons

This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.