Skip navigation
MikeSmith1233
Currently Being Moderated

Associating an icon with the index page

Sep 15, 2012 2:40 PM

I would like my index page to have an icon associated with it, so when someone creates a shortcut pointing to that page, their short cut will use that icon in its display. Is this possible?

 
Replies
  • Currently Being Moderated
    Sep 15, 2012 2:43 PM   in reply to MikeSmith1233

    Yes it is possible.  It is called FavIcon and you can generate from your existing images/logo.  I suggest search for favicon and you will get many hits to generate your own.

     

    <http://www.google.com/#hl=en&sugexp=les%3B&gs_nf=1&cp=4&gs_id=2k&xhr=t &q=favicon&pf=p&sclient=psy-ab&oq=favi&gs_l=&pbx=1&bav=on.2,or.r_gc.r_ pw.r_qf.&fp=e38a23f9d3d40dbc&biw=1280&bih=618>

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 15, 2012 3:40 PM   in reply to MikeSmith1233

    Create a 100 x 100 px image in Photoshop or Fireworks.  Keep it simple.  Complex art doesn't work well for this.   Resize image to 32px x 32px.  Save for Web as 8-bit PNG, named favicon.png

     

    Upload favicon.png to the root folder of your server (where your index page is).

     

    Add this line of code to your index page between the <head> </head> tags.

     

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

     

    Save and upload to server.

     

     

    Nancy O.

     

    Message was edited by: Nancy O.  Changed  favicon.ico to favicon.png.

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 15, 2012 3:43 PM   in reply to MikeSmith1233

    Hello Mike,

     

    in addition:

     

    Your browser must be convinced first to show It!

    Upload the favicon.ico file to your server's root directory.
    Insert this line of code between the
    <Head> </Head> tags on your home or index.html page:
    If you wish to use an animated icon too,
    upload the animated_favicon1.gif as above
    and add one of this code lines:

    <link rel="icon" href="favicon.ico" type="image/x-icon" />
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    <link rel="icon" href="pictures/favicon.ico" type="image/x-icon" />

    <link rel="icon" href="animated_favicon1.gif" type="image/gif">


    Clear ALL your caches!

    Check with another browser, the new icon will be there.

    Or:


    - If set, delete the bookmark to the page or re-create the bookmark.
    - Quit browser
    - Empty the Temp Internet Files Internet Options
    - Clear History
    - Delete everything in general, where the browser remembers visited sites.
    - Restart
    - Clear Site visit
    - Clear Bookmark


    HTH
    Hans-G.

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 15, 2012 9:04 PM   in reply to MikeSmith1233

     

    I see the icon as part of the tab at the top of the screen but I don't see it as part of the shortcut icon.

     

     

     

    what shortcut icon is this and what do you actually see. Can you post a link here of your test page.

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 16, 2012 12:05 AM   in reply to MikeSmith1233

    Hi Mike,

     

    to clarify some of the fundamental issues in this case I'll send you some links:

     

    http://msdn.microsoft.com/en-us/library/ms537656(v=vs.85).aspx and http://www.w3.org/2005/10/howto-favicon.

     

    esp.:

     

    scIcon.jpg

     

    and: http://en.wikipedia.org/wiki/Favicon, here esp.: "Browsers that support a tabbed document interface typically show a page's favicon next to the page's title on the tab, and site-specific browsers use the favicon as desktop icon."

     

    The main focus of all the hints is always this:

     

    <head>

      <link rel="SHORTCUT ICON" href="http://www.mydomain.com/myicon.ico"/>

      <title>My Title</title>

    </head>

     

    Hans-Günter

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points