SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 28

Thread: Photo Shortcut?

  1. #1
    SitePoint Evangelist Barnum's Avatar
    Join Date
    Oct 2008
    Posts
    418
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Photo Shortcut?

    Curious. Is there a way that when someone saves my website to their desktop the icon is my index page, not the IE logo?

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,121
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    What icon? I'm not sure what you're referring to.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    SitePoint Evangelist Barnum's Avatar
    Join Date
    Oct 2008
    Posts
    418
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    When I click on my website now and save as a shortcut I get an Internet Explorer Icon. Is there someway I can set up my site so that when someone adds it to their desktop they will see the photo of my first page, or at least something different than the IE icon. Maybe it cannot be done...

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,121
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    O, I think you are talking about a "favicon".

    Firstly, place a link like this in the head of your web page:

    Code:
    <link rel="icon" href="/favicon.ico" type="image/vnd.microsoft.icon">
    Then in your root folder, place an image of your choice (called favicon.ico), preferably 16 x 16px. It can be a .gif or .png, but to work on IE it needs to be a .ico file. You can't just change the extension to .ico, though. You need a program that can save it to that format. There is a plugin for Photoshop that does that, but otherwise you can try online tools like these:

    http://www.chami.com/html-kit/services/favicon/
    http://www.favicon.cc/
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  5. #5
    SitePoint Evangelist Barnum's Avatar
    Join Date
    Oct 2008
    Posts
    418
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Sorry, but I am having trouble following all this....when I upload an image it turns out extremely blurry.

    Can someone explain again please?

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,121
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    So what have you been doing? Explain your current process. Because favicons are so small, you can't have anything very complex. Just a very simple design. Show us what you are doing, or what you are trying to upload.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  7. #7
    SitePoint Evangelist Barnum's Avatar
    Join Date
    Oct 2008
    Posts
    418
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Was trying to upload photo that s on my index page....

    attached.
    Attached Images Attached Images

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,121
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    This is way too big for a favicon. Make sure to read my posts above. A favicon should be saved as a 16 x 16 px image, saved in .ico format (to work on windows). I gave you all the info you needed to do that easily above.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  9. #9
    Sploghm bronze trophy Victorinox's Avatar
    Join Date
    Nov 2008
    Posts
    749
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    I think Barnum is referring to multiple ICO favicon images that can display in a range of sizes.

    Here are some free Photoshop plugins for creating both single and multiple ICOs. (Icobundle utility is for multiples).

    If you don't have Photoshop, Barnum, perhaps someone would process the image for you, or there may be an online service that'll do it. Here's a list.

    Bear in mind that a photo will not look pretty at 16x16, so you may wish to use a different image for that size.

  10. #10
    SitePoint Evangelist Barnum's Avatar
    Join Date
    Oct 2008
    Posts
    418
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    No big deal...I will figure it out eventually. Thanks for your help.

  11. #11
    SitePoint Enthusiast
    Join Date
    Jan 2011
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Will that code work for all browsers? I think this is something similar to what I am looking for as I want in icon to appear in Mozillas tab. Right now I only get a blank page. I've downloaded that plugin for Photoshop and got that installed right. Just wondering the rest of the procedures?

  12. #12
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,121
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Boone View Post
    Will that code work for all browsers? I think this is something similar to what I am looking for as I want in icon to appear in Mozillas tab. Right now I only get a blank page. I've downloaded that plugin for Photoshop and got that installed right. Just wondering the rest of the procedures?
    Yes, the code I posted above will work for all browsers. So save the file as a 16 x 16 px .ico file, save it to your root folder (not essential these days, but easiest), then place the link code in the head section.

    It can sometimes take a while for the browser to pick up the new icon. You may have to clear your cache, for example.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  13. #13
    SitePoint Evangelist Barnum's Avatar
    Join Date
    Oct 2008
    Posts
    418
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I do all the above and still not get an icon. Can someone explain again...sorry. I created the favicon. Saved it to my root folder. Entererd the html code after the head, and still nothing.

  14. #14
    SitePoint Evangelist Barnum's Avatar
    Join Date
    Oct 2008
    Posts
    418
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    And I uploaded the ico.

  15. #15
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,121
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Barnum View Post
    Entererd the html code after the head, and still nothing.
    Just make sure it's in the <head> section.

    Also, you may need to clear your cache, as I mentioned above, as browsers do a lot from memory. Then delete the bookmark and bookmark the site again, too. Sometimes it takes a little while to get the icon to show. Try the site in other browsers too, preferably ones you haven't viewed the site in before, to verify that the icon is working.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  16. #16
    SitePoint Enthusiast
    Join Date
    Jan 2011
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Amazing thank you again ralp.m! Clearing the cache fixed it for me Barnum.

  17. #17
    SitePoint Evangelist Barnum's Avatar
    Join Date
    Oct 2008
    Posts
    418
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Still having trouble...do I save this ico. to my root or to my images folder? And is the extension ico or icon?

    My photo has name of title5. Tell me how that would look in head please?

  18. #18
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,121
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Barnum View Post
    Still having trouble...do I save this ico. to my root or to my images folder? And is the extension ico or icon?

    My photo has name of title5. Tell me how that would look in head please?
    You can save it to the images folder, but older browsers only look for it in the root folder, so it's safest to place it in the root folder.

    The extension is .ico, but as I said, you can't just type that in. Use one of the services listed above that will generate a proper .ico file for you.

    If you want to keep the name "title5" (I'd recommend calling it "favicon", though, as that's clearer—and I'm not sure if browsers look for that specifically or not) it will end up looking like title5.ico, and the code in the <head> section will then look like this:

    Code:
    <link rel="icon" href="/title5.ico" type="image/vnd.microsoft.icon">
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  19. #19
    SitePoint Evangelist Barnum's Avatar
    Join Date
    Oct 2008
    Posts
    418
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    used the program you offered, and it provided me with a favicon (photo shown before). I saved it as favicon like you said, and entered the following in <head>

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">


    <head>
    <meta name="keywords" content="Dick Stout, Metal Detecting, FMDAC, Treasure Hunting, coins, coinhunting, relics, prospecting, treasure, searchcoil">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Stout Standards</title>



    <link rel="icon" href="/favicon.ico" type="image/vnd.microsoft.icon">

    <link rel="stylesheet" href="styles.css" type="text/css"/>

    <style type="text/css">
    body {
    background: #DEB887;
    font-size:100%;
    margin:0;
    padding:0;
    }
    #container {
    width: 95%;
    min-width:990px;/*keep BG color from stopping short*/
    background: #97694F;/*header BG color moved to here*/


    The favicon is in my root directory, and I uploaded it via Filezilla...still nothing?

  20. #20
    Sploghm bronze trophy Victorinox's Avatar
    Join Date
    Nov 2008
    Posts
    749
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Your site, stoutstandards.com is currently showing a favicon of the photo you posted above in my browser address bar and history.

    You may need to empty your browser cache, quit and reopen your browser to see it.

  21. #21
    SitePoint Evangelist Barnum's Avatar
    Join Date
    Oct 2008
    Posts
    418
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Okay finally got it working...thanks. Now is there a way to make it larger?

  22. #22
    Sploghm bronze trophy Victorinox's Avatar
    Join Date
    Nov 2008
    Posts
    749
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Here's a multiple ico of your pic with 16x16, 32x32 and 48x48 pixels.

    You'll have to wait for the attachment to be approved.
    Attached Files Attached Files

  23. #23
    SitePoint Evangelist Barnum's Avatar
    Join Date
    Oct 2008
    Posts
    418
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Sorry, don't understand? Then again there's a lot of stuff I don't understand...

  24. #24
    Sploghm bronze trophy Victorinox's Avatar
    Join Date
    Nov 2008
    Posts
    749
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    As I mentioned in post 9 of this topic, it's possible to include multiple sizes of image in a single ico file.

    The zip file attached to my last post (that has now been approved and may be downloaded) contains an ico file with the three sizes of images stated above.

    Decompress the zip file, rename the ico file to favicon.ico and upload it to your server, replacing the old one.

    Where and whether the larger size images are actually displayed depends on the browser and operating system. In Windows, for example, you could drag the favicon from the browser address bar onto the desktop and it will display at a larger size than 16x16 pixels.

  25. #25
    SitePoint Evangelist Barnum's Avatar
    Join Date
    Oct 2008
    Posts
    418
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thanks so much for helping a lightweight. Someday I will get a grasp on all this...


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •