How To Make A Favicon For Your Web Site

Welcome to Bleeping Computer, 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.
Click here to Register a free account now! or read our Welcome Guide to learn how to use this site.

BleepingComputer.com > Internet & Networking > Web Site Development

How To Make A Favicon For Your Web Site

Options

Grinler View Member Profile	Jun 19 2006, 01:32 PM Post #1
Bleep Bleep! Group: Admin Posts: 31,601 Joined: 24-January 04 From: USA Member No.: 3	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 <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> -------------------- Lawrence Become a BleepingComputer fan: Facebook Follow us on Twitter!

Posts in this topic

Grinler How To Make A Favicon For Your Web Site Jun 19 2006, 01:32 PM

Arenlor I read a good tip on using png2ico, also create a ... Nov 3 2006, 02:57 PM

Walkman Hello, I've downloaded the png2ico program, a... Nov 6 2006, 12:10 PM

Arenlor What's your site? And what's the code you... Nov 6 2006, 01:21 PM

Grinler The double-dash before the colors argument is not ... Nov 6 2006, 05:13 PM

Walkman Hello, I got it working now. I had to add those 2... Nov 7 2006, 01:57 AM

Grinler It is possible that IE looks for the favicon.ico o... Nov 7 2006, 10:20 AM

Arenlor Actually I know it does, forget where I read it, b... Nov 7 2006, 12:44 PM

HIPPO1023 There is an online site that you can create your f... Mar 2 2007, 06:51 AM

the-splodge just a heads up, there's a free plug-in for ph... Mar 6 2007, 05:52 AM

Grinler Have a link for it? Mar 6 2007, 10:25 AM

tg1911 You can also save as an .ico in IrfanView. Mar 6 2007, 10:36 AM

HIPPO1023 I found free plugin of favicon for Photoshop, but ... Mar 9 2007, 07:42 PM

pcmaddeanp Hey, This site will do it all for you without any... May 21 2008, 09:44 AM

pete2008 This is the one I use Free Favicons Aug 10 2008, 02:23 PM

Wolfy87 Have a look at GIMP, its some great free software ... Feb 8 2009, 08:09 AM

patbox Very useful post. Thank you. Apr 14 2009, 04:13 PM

aznkidzx Wells, hmm it doesn't have to be an .ico file.... May 13 2009, 07:44 PM

« Next Oldest · Web Site Development · Next Newest »

2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)

0 Members:

Display Mode: Switch to: Standard · Switch to: Linear+ · Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

Lo-Fi Version

Time is now: 21st November 2009 - 11:02 PM

Advertise \| About Us \| Terms of Use \| Privacy Policy \| Contact Us \| Site Map \| Chat \| Tutorials \| Uninstall List
Discussion Forums \| The Computer Glossary \| Resources \| RSS Feeds \| Startups \| The File Database \| Virus Removal Guides