 How To Make A Favicon For Your Web Site |
Welcome Guest ( Log In | Click here to Register a free account now! )
Register a free account to unlock additional features at BleepingComputer.com
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.  |
 Jun 19 2006, 01:32 PM
Post
#1
|
|
 Bleep Bleep!  Group: Admin Posts: 28,179 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:
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
|
 |
 
|
|
Nov 3 2006, 02:57 PM
Post
#2
|
|
 Member Group: Members Posts: 25 Joined: 3-November 06 From: Here Member No.: 93,638 |
I read a good tip on using png2ico, also create a 32X32 image.
|
|
|
|
|
Nov 6 2006, 12:10 PM
Post
#3
|
|
 Forum Addict  Group: Banned Posts: 1,327 Joined: 18-October 06 From: Planet Earth Member No.: 90,873 |
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? -------------------- Walkman
One Man's Opinion "What I didn't know yesterday, I know today, and I'll remember it tomorrow" by Walkman |
|
|
|
|
Nov 6 2006, 01:21 PM
Post
#4
|
|
|
Member Group: Members Posts: 25 Joined: 3-November 06 From: Here Member No.: 93,638 |
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" /> |
|
|
|
|
Nov 6 2006, 05:13 PM
Post
#5
|
|
|
Bleep Bleep! Group: Admin Posts: 28,179 Joined: 24-January 04 From: USA Member No.: 3 |
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.
-------------------- Lawrence
|
|
|
|
|
Nov 7 2006, 01:57 AM
Post
#6
|
|
|
Forum Addict Group: Banned Posts: 1,327 Joined: 18-October 06 From: Planet Earth Member No.: 90,873 |
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. -------------------- Walkman
One Man's Opinion "What I didn't know yesterday, I know today, and I'll remember it tomorrow" by Walkman |
|
|
|
|
Nov 7 2006, 10:20 AM
Post
#7
|
|
|
Bleep Bleep! Group: Admin Posts: 28,179 Joined: 24-January 04 From: USA Member No.: 3 |
It is possible that IE looks for the favicon.ico on its own. IE tends to do non- standard approaches to web browsing.
-------------------- Lawrence
|
|
|
|
|
Nov 7 2006, 12:44 PM
Post
#8
|
|
|
Member Group: Members Posts: 25 Joined: 3-November 06 From: Here Member No.: 93,638 |
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.
|
|
|
|
|
Mar 2 2007, 06:51 AM
Post
#9
|
|
 Member Group: Members Posts: 73 Joined: 19-February 07 Member No.: 112,595 |
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. 
|
|
|
|
|
Mar 6 2007, 05:52 AM
Post
#10
|
|
 New Member Group: Members Posts: 12 Joined: 9-February 05 Member No.: 11,682 |
just a heads up, there's a free plug-in for photoshop so you can save as .ico
|
|
|
|
|
Mar 6 2007, 10:25 AM
Post
#11
|
|
|
Bleep Bleep! Group: Admin Posts: 28,179 Joined: 24-January 04 From: USA Member No.: 3 |
Have a link for it?
-------------------- Lawrence
|
|
|
|
|
Mar 6 2007, 10:36 AM
Post
#12
|
|
 Can't decide what to use, so I won't use anything. Group: Global Moderator Posts: 13,021 Joined: 6-May 04 From: SW Louisiana Member No.: 363 |
You can also save as an .ico in IrfanView.
-------------------- I love being married.
It's so great to find that one special person you want to annoy, for the rest of your life. |
|
|
|
|
Mar 9 2007, 07:42 PM
Post
#13
|
|
|
Member Group: Members Posts: 73 Joined: 19-February 07 Member No.: 112,595 |
|
|
|
|
|
May 21 2008, 09:44 AM
Post
#14
|
|
 Member Group: Members Posts: 81 Joined: 30-March 08 Member No.: 199,842 |
Hey,
This site will do it all for you without any fuss! http://www.favicon.co.uk/ -------------------- pcmaddeanp (Dean) |
|
|
|
|
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:
| Lo-Fi Version | Time is now: 6th July 2008 - 04:45 PM |
© 2003-2008 All Rights Reserved Bleeping Computer LLC.