your icon next to your web address in the browser bar

Submitted by eich1220 on Tue, 2006-05-30 01:08. Posted in

General Web Design

| »

How do I add an icon to the URL browser address bar? Like when I type in the address for your Web site, it finds your server and VOILA! Your Silicon Meadow froggy-sign logo appears next to the URL address. I'm seeing that done more and more and would like to add it to my site.

-Marian

www.big-moon.com

Tue, 2006-05-30 15:37

favicons

Richard Sheppard Says:

The icon file is a special format called .ico, which originated from windows. They call them "favicons" when you create them for your web site. I think I created mine in GraphicConverter, which you may or may not use, but I'll bet is on your PowerMac G5!You stick your .ico file on the webserver and then put this code in the head of your html:<link rel="shortcut icon" xhref="/pathto/your_favicon.ico" type="image/x-icon" />That should do it. Let me know if you need more help!

Tue, 2006-05-30 21:14

Adobe favicon plug-in for Photoshop

GregSloman Says:

There is a free favicon plug-in (not sure if it's technically a plug-in) available here, for Mac and PC: http://www.telegraphics.com.au/sw/

I use it regularly with PS CS (PC). You create any square graphic, reduce down to 16x16, then save as...and the .ico format is available in the file types drop down in the Save dialog. This then saves the file in .ico format to the target directory.

Fri, 2006-06-09 23:32

Just found this tool

GregSloman Says:

This site lets you upload an image and it will be turned into a favicon.ico file that you can then download:

http://www.html-kit.com/favicon

Tue, 2006-06-20 22:45

Favicon transparency

GregSloman Says:

It is possible for favicons to have transparency. For example the Silicon Meadow froggy-icon could have no background colour outside of the red triangle (currently white). With transparency enabled, you could just see the red triangle outline and green frog on white within, whilst outside the triangle, the background colour of the browser's tab or bookmark menu would show through.

There doesn't appear to be a way to do it with the Photoshop extension referred to previously, however, there is a way. Follow these steps:

1. Create a PNG file with the necessary transparency in the image. In Photoshop this is a PNG -24 file.
2. Reduce the image to 16 x 16 pixels. (You could try 32 x 32 for greater detail)
3. Upload the PNG using the form on this site: http://www.chami.com/html-kit/services/favicon/
4. You'll see you can preview the favicon right there and/or download it. There's also an animated version for annoying your visitors with!

It's a shame it doesn't produce an animated, blinking version for the browser status bar and the title bar, then we really could enjoy Web 0.01 all over again!

Tue, 2007-08-14 21:39

Fav Icon Not On URL

Anonymous Says:

I noticed on my source that I dont have that ICO file yet I have a fav icon from the person who designed my site. He is very busy man and has yet to get to changing that so I would like to do that ASAP. Right now its and ECS you can go to www.brogansinc.com
can somebody tell me what in my html needs to be replaced so I can put my Fav Icon instead of his on my site?
Thanks
Tim
www.brogansinc.com
tim@brogansinc.com

Tue, 2007-08-14 22:08

Your favicon

Richard Sheppard Says:

Hi,

I don't seem to see any reference to it in your HTML.

I have a question for you:

If this web guy you have is too busy to sort this out, why are you using him? If I were to solve this problem, could I have a custom plaque made for a project I'm working on? For free?

Cheers,

Richard