How to create a bookmark thumbnail image?

Discussion in 'HTML & Website Design' started by dpatel304, Aug 25, 2007.

  1. #1
    I'm not sure what they are called, but this is what I am talking about:
    [​IMG]

    I've got the file right here, just not sure what to do with it.
    [​IMG]
    Any help would be greatly appreciated.
     
    dpatel304, Aug 25, 2007 IP
  2. GolfHos

    GolfHos Member

    Messages:
    44
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    43
    #2
    GolfHos, Aug 25, 2007 IP
  3. dpatel304

    dpatel304 Peon

    Messages:
    220
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Awesome, thanks for the reply. Seems pretty easy. I have one question about this part:
    Add the following HTML tag to your web page after the <head> tag, before the </head> tag:

    I'm not sure where the <head> tags are located. If it helps, I'm using vbulletin and wordpress.
     
    dpatel304, Aug 26, 2007 IP
  4. tennisplayer89

    tennisplayer89 Peon

    Messages:
    387
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Create a 16x16 image and save it as a favicon.ico. Upload it to the root directory and you'll have one. IE sometimes acts a little funny with it. Test it out on another computer.
     
    tennisplayer89, Aug 26, 2007 IP
  5. dpatel304

    dpatel304 Peon

    Messages:
    220
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    That doesn't seem to work. In the tutorial, it says to place the image between the <head> tags, but I'm not sure where I would find that. Any ideas?
     
    dpatel304, Aug 26, 2007 IP
  6. ariyes

    ariyes Notable Member

    Messages:
    1,123
    Likes Received:
    45
    Best Answers:
    0
    Trophy Points:
    245
    #6
    ariyes, Aug 27, 2007 IP
  7. twistedspikes

    twistedspikes Notable Member

    Messages:
    5,694
    Likes Received:
    293
    Best Answers:
    0
    Trophy Points:
    280
    #7
    oh a favicon?

    I had to download a plugin to use in photoshop for creating .ico files. I can upload it for you if you need it.
     
    twistedspikes, Aug 27, 2007 IP
  8. FraserJilani

    FraserJilani Active Member

    Messages:
    174
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    58
    #8
    You need a plugin for making in photoshop. And you put it between your <head> </head> tags at the top of your HTML document.
     
    FraserJilani, Aug 27, 2007 IP
  9. HDaddy

    HDaddy Active Member

    Messages:
    287
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    60
    #9
    i made one in photoshop and saved it just favicon.ico I don´t have any special plugins for making favicons.

    and here´s how i put it:
    <head>
    <link rel="shortcut icon" href="http://www.koti.mbnet.fi/thinner/epistemp/favicon.ico"/>
    </head>

    works great in FF, but as tennisplayer said it acts sometimes funny in IE. Like IE couldn´t find the favicon. But at least it works in FF
     
    HDaddy, Aug 27, 2007 IP
  10. twistedspikes

    twistedspikes Notable Member

    Messages:
    5,694
    Likes Received:
    293
    Best Answers:
    0
    Trophy Points:
    280
    #10
    Thats cause IE looks for a real .ico file. I mean I could name a html file's extention .ico, doesn't mean it is an icon.

    Anyone want the plugin? I'll upload it if someone does.
     
    twistedspikes, Aug 27, 2007 IP
  11. dpatel304

    dpatel304 Peon

    Messages:
    220
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #11
    If I had vbulletin and wordpress, what file would I edit to put that code in?
     
    dpatel304, Aug 27, 2007 IP
  12. GWiz

    GWiz Peon

    Messages:
    359
    Likes Received:
    17
    Best Answers:
    0
    Trophy Points:
    0
    #12
    Look in the templates, usually the header templates which are located in the admin control panels.
     
    GWiz, Aug 27, 2007 IP
  13. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #13
    There's also a "plugin" of sorts for GIMP... actually a command-line tool you'd use in Linux, no clue what you'd do if you're using Gimp with Windows or Mac...

    Save as 16 by 16 as normal, save file as favicon.ppm and when you hit save you are asked how to save the file, choose Raw. Then in command line, type
    ppmtowinicon -output favicon.ico favicon.ppm
    Code (markup):
    .
    If bash says no such command, I think you can download it from http://netpbm.sourceforge.net/
     
    Stomme poes, Aug 28, 2007 IP
  14. dpatel304

    dpatel304 Peon

    Messages:
    220
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #14
    Thank you. I've found it and it works on my forums. I haven't figured out how to make it work on my wordpress blog though. Any help on that. Not sure where to place the <head> code tags.
     
    dpatel304, Aug 29, 2007 IP
  15. GolfHos

    GolfHos Member

    Messages:
    44
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    43
    #15
    I'm not sure about your setup, but on my wordpress blog, I'd edit this file and put the link tag in the head section:
    /wp-content/themes/[your_theme_name]/header.php

    For example:
    /wp-content/themes/default/header.php
    /wp-content/themes/classic/header.php
    (but replace with the theme you're using)
     
    GolfHos, Aug 30, 2007 IP