PDA

View Full Version : how do I add my web logo to the address bar in the browser?



Kyle Nerder
Mar 9, 2006, 03:30 PM
how do I add my web logo to the address bar in the browser? I don't know too much about html, so hopefully I can do it in dreamweaver with a few clicks.

Thanks to those who help out!


SilentPanda
Mar 9, 2006, 03:32 PM
Can't tell you how to for sure but it's called a "favicon". I'm sure google will assist with that.
mustard
Mar 9, 2006, 03:35 PM
check this out
http://www.favicon.com/
for information

or this site will do it for you
http://www.chami.com/html-kit/services/favicon/
MrSmith
Mar 9, 2006, 06:58 PM
Make your 'favicon' image (for example, in GraphicConverter) at 16 x 16 pixels. Save two copies: favicon.png and favicon.ico.

Then add these into the <head> section of your index.html page:

<link rel="shortcut icon" href="favicon.ico" />
<link rel="icon" href="favicon.png" type="image/png" />
emaja
Mar 9, 2006, 07:36 PM
check this out
http://www.favicon.com/
for information

or this site will do it for you
http://www.chami.com/html-kit/services/favicon/

I used chami and it worked very easily. It adds a nice touch to your page.

I can't stand it when I visit a commercial page from a large company and they don't have one. It counds silly, but it is a great detail.
idea_hamster
Mar 9, 2006, 10:37 PM
Make your 'favicon' image (for example, in GraphicConverter) at 16 x 16 pixels. Save two copies: favicon.png and favicon.ico.

Then add these into the <head> section of your index.html page:

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

OK. And where do I store the images? In the same folder level as my index.html file?
emaja
Mar 9, 2006, 10:42 PM
OK. And where do I store the images? In the same folder level as my index.html file?

Yes.
MrSmith
Mar 9, 2006, 10:43 PM
In my example, yes. If you want to put the favicon images in a sub-folder, (let's say, in a folder called 'images') then the links would read:

<link rel="images/shortcut icon" href="favicon.ico" />
<link rel="icon" href="images/favicon.png" type="image/png" />
idea_hamster
Mar 9, 2006, 10:52 PM
Thanks, dudes -- that was pretty easy!

BTW, at first it didn't work because I put the code at the very bottom of the <head> section and I think it was after some comment code or something. (I'm a wimp -- I use GoLive.) So I moved it to the top and...Voil&#224;!

Nice.
Kyle Nerder
Mar 10, 2006, 10:36 AM
check this out
http://www.favicon.com/
for information

or this site will do it for you
http://www.chami.com/html-kit/services/favicon/

This was by far the best help!

Thanks Mustard. You rock!
cr2sh
Mar 10, 2006, 12:57 PM
Wow.. great question and very helpful answers. I've always wondered how they did that, now I can't wait to start creating 16x16 icons.
MattyP
Mar 10, 2006, 01:14 PM
Thanks, dudes -- that was pretty easy!

BTW, at first it didn't work because I put the code at the very bottom of the <head> section and I think it was after some comment code or something. (I'm a wimp -- I use GoLive.) So I moved it to the top and...Voilą!

Nice.
Hey, it would be cool if you put your URL out there so we could check out your site now spifified with your cool new favicon.

Thanks for this thread, I'm going to add one to my site this weekend!
-whoa, I actually remembered my FTP login and did it in text edit! Sweet!
http://www.mattpipes.com
Peyton
Mar 10, 2006, 09:39 PM
.
MrSmith
Mar 10, 2006, 10:17 PM
Easy one. The code isn't in your head section. :)
Peyton
Mar 10, 2006, 10:22 PM
I looked again, and you were right, it wasn't (I honestly thought I did) but it looks exactly the same now, and the code is in the correct place now:confused:
weird, but really, thanks for your help I really appreciate it.
Counterfit
Mar 10, 2006, 10:39 PM
My site (http://counterfit.no-ip.com) has one
MrSmith
Mar 11, 2006, 08:41 AM
Peyton,

Have you tried removing the 'P' and the space in your hrefs?
i.e. replace the links with these:

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

And change the name of the images as well, of course.