That little browser icon

I’ve always been curious about how to install that little browser icon that usually belongs to a domain. An example would be the little moon icon on or the “G” in a box on It usually appears next to the URL on most browsers (instead of a default icon) as well as the bookmark toolbar on Firefox.

Anyone know how to set that up?


Create an icon with the name “favicon.ico” and place it in your main web root. Add the following lines to the section of your home page:[code]

[/code]Although the first line is usually sufficient, use both lines for maximum browser happiness!

si-blog | Keystone Websites
Save $97 on yearly plans with promo code [color=#CC0000]SCJESSEY97[/color]

Story is there some way make:

For Customers, by Customers, of DreamHost

The “article” linked above suggests that you steal images from other people. Icons are very easy to make with a basic image editor. Even the “Paint” software that comes free with Windows will allow you to make icons. I would strongly suggest doing it like this, rather than risking potential copyright theft.

si-blog | Keystone Websites
Save $97 on yearly plans with promo code [color=#CC0000]SCJESSEY97[/color]

ah thanks. that worked great!

You can also generate your favicon.ico using this online tool :

$77 off plus 1 Additional Free Domain For Hosting Lifetime with [color=#CC0000]77PLUS1DOMAIN[/color] promo code :cool: . See Detail Here

i make all my icons in the gimp – it’s free and does everything i want it to

track7 - my dream-hosted site

Hey guys, you can get a free plugin for Photoshop to save .ICO files here:

I used it, works great!

If you don’t already know how, here is a step by step Photoshop tutorial for making your 16 x 16 image:

If this has helped you, hopefully someone can help me.

I upload my favicon.ico, and it works, but only on my first index.html page.

Is it necessary to put this code on EVERY page?

I have looked at other sites, that don’t seem to have this on every page, yet the icons show up.

Can someone please help with an answer?


I beleive you can get away without using the icon link if all pages are in the same directory. If any pages are in a different directory, you either have to use the icon link or copy the favicon to that directory.

My website

sometimes the browser looks up /favicon.ico on its own, but i’ve never heard of it looking up /dir/favicon.ico even for pages in /dir/

the best way is to have a /favicon.ico and also put the two link tags in the header of each page.

on my site some parts have different favicons, and i’ve got php that starts in the current page’s directory and keeps going up until it finds a favicon.ico and writes the appropriate link tags. for example, there’s a /geek/favicon.ico which gets used for everything under /geek/, but without the link tags i think it would use /favicon.ico

track7 - my dream-hosted site

Can we use css to load favicon ?

Get YOUR $97 off on yearly plan with [color=#CC0000]YOUGET97 [/color] promo code. Sign Up NOW

The favicon is an example of metadata (albeit a visual example), and so it has nothing to do with CSS (which is supposed to be purely presentational).

si-blog | Keystone Websites
Save $97 on yearly plans with promo code [color=#CC0000]SCJESSEY97[/color]