Making personal website have it's own "icon" - Tilted Forum Project Discussion Community

Derwood · 05-03-2005, 06:41 PM

In Firefox (and other browsers), many websites (TFP included) have a custom icon that is displayed next to the URL in the address bar, as well as on the quick link bar below it. How do I assign an icon like this to my own personal website?

spectre · 05-03-2005, 07:22 PM

http://www.thesitewizard.com/archive/favicon.shtml

Quote:

How to Create a "Favicon.ico" File

1.Create an image 16X16 pixels in size. Yes, it is really small and you can't really draw much in it. You should also restrict yourself to the standard Windows 16 colours, although I suspect that 256 colours will work fine.

If you like, you can also create a 32X32 pixel icon, which will be scaled to size for the Favorites menu and the location bar. You can even put both 16X16 and 32X32 pixel icons into the same icon file. Windows will use the former for its menus and the latter when the user opens up a folder that is set to display large icons. It's probably not really necessary to do this if you can't be bothered.

2. Save the image as an ICO file (named "favicon.ico", of course).

3. Upload it to your website. You don't need to upload one to every directory of your site if you don't want to waste space - simply put it in your root directory and IE will apparently locate it eventually. You can also upload it into your images directory, but you will need to modify your web pages if you do. See later in this article for more information on this.

arch13 · 05-03-2005, 08:53 PM

Sweet. Even I used that in less than 5 minutes after reading this!
There was a little detail I never paid attention to that was straight-forward and easy.

Derwood · 05-04-2005, 04:33 AM

Ok, that worked for the address bar, but not for the quick links part under it. I'll keep futzing around with it.

sadistikdreams · 05-06-2005, 09:41 PM

I was just about to ask this.

RelaX · 05-07-2005, 01:30 AM

You have to click on it again, when the browser fully loads the page it will show the link with the icon in front of it.
If you're still having trouble, even with that, then you could try removing and re-adding the link, then visiting the page. That should do the trick.

Derwood · 05-07-2005, 05:15 AM

Quote:

Originally Posted by RelaX

You have to click on it again, when the browser fully loads the page it will show the link with the icon in front of it.
If you're still having trouble, even with that, then you could try removing and re-adding the link, then visiting the page. That should do the trick.

Neither of those worked. And on my other quick-links, they took the custom icon the first time I visited the site automatically.

Derwood · 05-07-2005, 05:19 AM

Wait, now I got it. I erased the quick link. Made a new quick link. Then visited the site via the quick link. Now I just need to fix my icon so the background is clear instead of white...

CBlend · 05-07-2005, 02:47 PM

Thanks, that was really useful. I didn't know how this was done. I also like thesitewizard site; there was other good stuff there!

SinisterMotives · 06-04-2005, 01:44 PM

It doesn't even have to be an ICO file if you use the following LINK tag:

Code:

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

The type attribute could be changed to image/gif, image/jpeg, etc., and it would still work as long as the image was 16x16 pixels.

If you must have it in ICO format and your paint program doesn't have an ICO export ("Save As...") filter, here's an online PNG-to-ICO converter:

http://www.degraeve.com/favicon/

SinisterMotives · 06-04-2005, 03:29 PM

The LINK tag thing doesn't work in IE. Best to dumb it down for Microsloth and just stick the favicon.ico file in your document root, as previously suggested.

05-03-2005, 06:41 PM	#1 (permalink)
Derwood Who You Crappin? Location: Everywhere and Nowhere	Making personal website have it's own "icon" In Firefox (and other browsers), many websites (TFP included) have a custom icon that is displayed next to the URL in the address bar, as well as on the quick link bar below it. How do I assign an icon like this to my own personal website? __________________ "You can't shoot a country until it becomes a democracy." - Willravel

05-03-2005, 08:53 PM	#3 (permalink)
arch13 Loves my girl in thongs Location: North of Mexico, South of Canada	Sweet. Even I used that in less than 5 minutes after reading this! There was a little detail I never paid attention to that was straight-forward and easy. __________________ Seen on an employer evaluation: "The wheel is turning but the hamsters dead" ____________________________ Is arch13 really a porn diety ? find out after the film at 11. -Nanofever

05-04-2005, 04:33 AM	#4 (permalink)
Derwood Who You Crappin? Location: Everywhere and Nowhere	Ok, that worked for the address bar, but not for the quick links part under it. I'll keep futzing around with it. __________________ "You can't shoot a country until it becomes a democracy." - Willravel Last edited by Derwood; 05-04-2005 at 04:42 AM..

05-06-2005, 09:41 PM	#5 (permalink)
sadistikdreams lonely rolling star Location: Seattle.	I was just about to ask this. __________________ "Besides the noble art of getting things done, there is the noble art of leaving things undone. The wisdom of life consists in the elimination of non-essentials." -Lin Yutang hearts, by d.a.

05-07-2005, 01:30 AM	#6 (permalink)
RelaX Follower of Ner'Zhul Location: Netherlands	You have to click on it again, when the browser fully loads the page it will show the link with the icon in front of it. If you're still having trouble, even with that, then you could try removing and re-adding the link, then visiting the page. That should do the trick. __________________ The most likely way for the world to be destroyed, most experts agree, is by accident. That's where we come in; we're computer professionals. We cause accidents. - Nathaniel Borenstein

05-07-2005, 05:19 AM	#8 (permalink)
Derwood Who You Crappin? Location: Everywhere and Nowhere	Wait, now I got it. I erased the quick link. Made a new quick link. Then visited the site via the quick link. Now I just need to fix my icon so the background is clear instead of white... __________________ "You can't shoot a country until it becomes a democracy." - Willravel

05-07-2005, 02:47 PM	#9 (permalink)
CBlend Junkie Location: Classified	Thanks, that was really useful. I didn't know how this was done. I also like thesitewizard site; there was other good stuff there!

06-04-2005, 01:44 PM	#10 (permalink)
SinisterMotives Junkie	It doesn't even have to be an ICO file if you use the following LINK tag: Code: <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" /> The type attribute could be changed to image/gif, image/jpeg, etc., and it would still work as long as the image was 16x16 pixels. If you must have it in ICO format and your paint program doesn't have an ICO export ("Save As...") filter, here's an online PNG-to-ICO converter: http://www.degraeve.com/favicon/

06-04-2005, 03:29 PM	#11 (permalink)
SinisterMotives Junkie	The LINK tag thing doesn't work in IE. Best to dumb it down for Microsloth and just stick the favicon.ico file in your document root, as previously suggested. Last edited by SinisterMotives; 06-04-2005 at 03:51 PM..