Adding A Favicon To Website - Code Required?...

Discussion in 'HTML & Website Design' started by bad_bob00, Feb 13, 2008.

0
Page 1 of 2
  1. #1
    Hi there,

    I know that to add a favicon to a website you need to add this code:

    But I was just wondering about the placement of the code.

    At the moment I have 3 different link rel lines of code:

    Does this matter at all? Is it okay just to have 3 seperate lines like above?


    Thanks for any help.
     
    bad_bob00, Feb 13, 2008 IP
  2. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Lower case that tag!!
    <link rel="shortcut icon"
    href="favicon.ico" /><-- I forget if your page was html or Xhtml... this is the xhtml ending...

    Um, I think I've seen somewhere that <head> stuff should sit as so:

    metas (<title> sitting somewhere, anywhere, within these)
    links, including stylesheet link
    scripts

    I'd put it after the last link but before any scripts.

    And yeah, each seperate link should be listed seperatly... as far as I know, you can't lump them all together into one link.
     
    Stomme poes, Feb 13, 2008 IP
  3. LGwebs

    LGwebs Guest

    Messages:
    900
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Do you..I have done it with out one befor...
     
    LGwebs, Feb 13, 2008 IP
  4. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Actually, I recall that bobo had one too without the code... so, I'm not sure if there's a browser out there that won't display it without the code or what... so, I've always used it. My old Mozilla saw the favicon on bobo's (friend's) site without the favicon link, and I think IE6 did too...
     
    Stomme poes, Feb 13, 2008 IP
  5. bad_bob00

    bad_bob00 Active Member

    Messages:
    3,472
    Likes Received:
    56
    Best Answers:
    0
    Trophy Points:
    90
    #5
    Thanks for the help guys
     
    bad_bob00, Feb 13, 2008 IP
  6. CaffinePhil

    CaffinePhil Banned

    Messages:
    945
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    0
    #6
    I've been looking at adding one of these to my site, what programs can I use to create these icons, are there any free ones?
     
    CaffinePhil, Feb 13, 2008 IP
  7. bad_bob00

    bad_bob00 Active Member

    Messages:
    3,472
    Likes Received:
    56
    Best Answers:
    0
    Trophy Points:
    90
    #7
    I downloaded a free program to use from here: link.

    Seems to work okay for me :)
     
    bad_bob00, Feb 13, 2008 IP
  8. CaffinePhil

    CaffinePhil Banned

    Messages:
    945
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    0
    #8
    Thanks bad_bob00, Do you think it is worth the 38$?
     
    CaffinePhil, Feb 14, 2008 IP
  9. bad_bob00

    bad_bob00 Active Member

    Messages:
    3,472
    Likes Received:
    56
    Best Answers:
    0
    Trophy Points:
    90
    #9
    Not really to be honest - Its got a 30 day trial, so just make all your fav icon's required in 30 days ;)

    Can't really take you that long to make them, unless you have hundreds of sites to do.
     
    bad_bob00, Feb 14, 2008 IP
  10. jamesicus

    jamesicus Peon

    Messages:
    477
    Likes Received:
    18
    Best Answers:
    0
    Trophy Points:
    0
    #10
    Of course, you don't need a favicon creation program if you wish to use an existing .gif or .jpg image that resides on your computer that is suitable (most aren't) -- simply crop/resize it to 16x16 pixels, upload it to your server and insert the following Meta tag (example) on your page:

    <link rel="shortcut icon" href="imagename.jpg">

    James
     
    jamesicus, Feb 15, 2008 IP
  11. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #11
    Yeah but hey, James, do you know why sometimes a site can show a favicon without the meta tag? Is it when there's just a file in the same folder called favicon.ico?

    To answer above quesitons, GIMP is free and both GIMP and Photoshop have the ability to save images as a Windows Icon (favicon.ico). It is a windows format, not just any old gif or jpg.

    Aha, yes... I put this code on Adam's site: <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
     
    Stomme poes, Feb 15, 2008 IP
  12. jacobbannier

    jacobbannier Active Member

    Messages:
    1,155
    Likes Received:
    30
    Best Answers:
    0
    Trophy Points:
    90
    #12
    You don't need a special program. Just search for a .ico filetype saver for Photoshop, there are some free on Google, and there only a few KB.
     
    jacobbannier, Feb 15, 2008 IP
  13. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #13
    I think Photoshop now comes with that plugin, but not everyone has Photoshop.
     
    Stomme poes, Feb 15, 2008 IP
  14. OrangeFeet

    OrangeFeet Peon

    Messages:
    28
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #14
    what if you already have one and want to replace it? i have the bluehost favicon.
     
    OrangeFeet, Feb 15, 2008 IP
  15. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #15
    There can only be one file called "favicon.ico" in the folder containing your HTML file.

    You'll have to delete the one you have now, and make (or get) a new one. Thye always have to have the name "favicon.ico" which kinda sucks so you can only have one sitting there.

    Lots of people say stick it in your server's root folder but I don't cause I have multiple files on my server and many websites I have (or made for others) have their own favicons. It should be in the same folder as your HTML file. Link it properly in the HTML (if your old one is showing up now, then you don't have to change anything there).
     
    Stomme poes, Feb 15, 2008 IP
  16. jamesicus

    jamesicus Peon

    Messages:
    477
    Likes Received:
    18
    Best Answers:
    0
    Trophy Points:
    0
    #16
    Yes, Stomme poes, that is the cause.

    James
     
    jamesicus, Feb 16, 2008 IP
  17. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #17
    So why do we manually link it in the head? If it shows anyway? Just in case??
     
    Stomme poes, Feb 16, 2008 IP
  18. jamesicus

    jamesicus Peon

    Messages:
    477
    Likes Received:
    18
    Best Answers:
    0
    Trophy Points:
    0
    #18
    I only use the favicon.ico file for my home page (and associated pages) favicon. I have six Directories in my Web site and I use my own .jpg Favicons for each of them plus one for my home page and pages that link directly to it. All of the Favicon files reside in my root directory.

    BTW, it is important to clear cache whenever a new Favicon is installed.

    James
     
    jamesicus, Feb 16, 2008 IP
  19. rukshankb

    rukshankb Banned

    Messages:
    1,014
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    0
    #19
    Thank you very much for the favicon information. Really useful to us.
     
    rukshankb, Feb 16, 2008 IP
  20. jamesicus

    jamesicus Peon

    Messages:
    477
    Likes Received:
    18
    Best Answers:
    0
    Trophy Points:
    0
    #20
    If you clear cache it will probably (Favicons often render in mysterious ways) disappear.

    James
     
    jamesicus, Feb 16, 2008 IP
Page 1 of 2