Welcome to BleepingComputer, a free community where people like yourself come together to discuss and learn how to use their computers. Using the site is easy and fun. As a guest, you can browse and view the various discussions in the forums, but can not create a new topic or reply to an existing one unless you are logged in. Other benefits of registering an account are subscribing to topics and forums, creating a blog, and having no ads shown anywhere on the site.
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 --colors 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.
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:
<head>
<title>This is a test</title>
<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" />
</head>
Back to top
