how do I add my web logo to the address bar in the browser?

Discussion in 'Web Design and Development' started by Kyle Nerder, Mar 9, 2006.

  1. Kyle Nerder macrumors regular

    Kyle Nerder

    Joined:
    Oct 14, 2005
    Location:
    Toronto
    #1
    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!
     
  2. SilentPanda Moderator emeritus

    SilentPanda

    Joined:
    Oct 8, 2002
    Location:
    The Bamboo Forest
    #2
    Can't tell you how to for sure but it's called a "favicon". I'm sure google will assist with that.
     
  3. mustard macrumors 6502a

    mustard

    Joined:
    Dec 28, 2005
    Location:
    NJ
  4. MrSmith macrumors 68040

    MrSmith

    Joined:
    Nov 27, 2003
    #4
    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" />
     
  5. emaja macrumors 68000

    Joined:
    May 3, 2005
    Location:
    Chicago, IL
    #5
    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.
     
  6. idea_hamster macrumors 65816

    idea_hamster

    Joined:
    Jul 11, 2003
    Location:
    NYC, or thereabouts
    #6
    OK. And where do I store the images? In the same folder level as my index.html file?
     
  7. emaja macrumors 68000

    Joined:
    May 3, 2005
    Location:
    Chicago, IL
    #7
    Yes.
     
  8. MrSmith macrumors 68040

    MrSmith

    Joined:
    Nov 27, 2003
    #8
    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" />
     
  9. idea_hamster macrumors 65816

    idea_hamster

    Joined:
    Jul 11, 2003
    Location:
    NYC, or thereabouts
    #9
    Sweet!

    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.
     
  10. Kyle Nerder thread starter macrumors regular

    Kyle Nerder

    Joined:
    Oct 14, 2005
    Location:
    Toronto
    #10
  11. cr2sh macrumors 68030

    cr2sh

    Joined:
    May 28, 2002
    Location:
    downtown
    #11
    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.
     
  12. MattyP macrumors member

    MattyP

    Joined:
    Dec 13, 2005
    Location:
    San Francisco
    #12
    Gah!

    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
     
  13. MrSmith macrumors 68040

    MrSmith

    Joined:
    Nov 27, 2003
    #14
    Easy one. The code isn't in your head section. :)
     
  14. Peyton macrumors 68000

    Peyton

    Joined:
    Feb 2, 2006
    #15
    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.
     
  15. MrSmith macrumors 68040

    MrSmith

    Joined:
    Nov 27, 2003
    #17
    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.
     

Share This Page