Coffeehouse Thread

20 posts

Forum Read Only

This forum has been made read only by the site admins. No new threads or comments can be added.

IE9 Favicon

Back to Forum: Coffeehouse
  • User profile image
    CKurt

    Okay, so in IE9 the famous favicon bug is still not fixed (allready submitted it). So it got me thinking I might be doing something wrong.

     

    www.ksj.be shows a Favicon in FirerFox and Chrome but not in IE9 (never) and only sometimes in IE8.

     

    What program do you use to create a ".ico" file? I want to do it correctly so the .ico file contains multiple dymentions of the same image. Previously I used a free online png to ico convertor, but this was a bad choice. Because now the same icon is used for pinned site's I want to fix it.

     

    Any tips?

     

    Some site that do work: www.liveside.net , channel9.msdn.com ,  bing.com ...

  • User profile image
    GoddersUK

    I don't know whether this will solve any problems with favicons, but in the past I've used IcoFX for icon manipulation which I think should do multiple dimensions.

     

    http://icofx.ro/ 

  • User profile image
    vesuvius

    GoddersUK said:

    I don't know whether this will solve any problems with favicons, but in the past I've used IcoFX for icon manipulation which I think should do multiple dimensions.

     

    http://icofx.ro/ 

    not a problem with IE at all as this works on my rather old site http://castaliasolutions.com/

     

    CKurt is issing a line of HMTL markup, I have the following

     

    <link href="images/website/puzzle.ico" rel="icon"/> <link href="images/website/puzzle.ico" rel="shortcut icon"/>

     

    Try downloading an icon from http://dryicons.com/ (on the right hand side) and using the code above and see if that fixes it

  • User profile image
    TommyCarlier

    vesuvius said:
    GoddersUK said:
    *snip*

    not a problem with IE at all as this works on my rather old site http://castaliasolutions.com/

     

    CKurt is issing a line of HMTL markup, I have the following

     

    <link href="images/website/puzzle.ico" rel="icon"/> <link href="images/website/puzzle.ico" rel="shortcut icon"/>

     

    Try downloading an icon from http://dryicons.com/ (on the right hand side) and using the code above and see if that fixes it

    You don't even need the <link>-elements: if your pages don't have any <link rel="icon"> elements, the browser will try to download "http://www.yourdomain.com/favicon.ico". So you just have to put favicon.ico in the root of your website.

  • User profile image
    CKurt

    vesuvius said:
    GoddersUK said:
    *snip*

    not a problem with IE at all as this works on my rather old site http://castaliasolutions.com/

     

    CKurt is issing a line of HMTL markup, I have the following

     

    <link href="images/website/puzzle.ico" rel="icon"/> <link href="images/website/puzzle.ico" rel="shortcut icon"/>

     

    Try downloading an icon from http://dryicons.com/ (on the right hand side) and using the code above and see if that fixes it

    Well, now it works with an icon of www.dryicons.com . But the organisation has it's own logo. How can I create a working icon for IE from a png ?

     

    EDIT: I've changed it back to my .ico file. IE still displaying the old one (even after Hard refresh),  Chrome showing the new one as it did before.

     

    EDIT2: This article only tells you what your .ico should contain. Not how to make a 'valid' one. http://msdn.microsoft.com/library/gg131029(VS.85).aspx">http://msdn.microsoft.com/library/gg131029(VS.85).aspx

     

    PS: Posting from chrome because IE8 is gone and IE9 does not work for me.

  • User profile image
    TommyCarlier

    CKurt said:
    vesuvius said:
    *snip*

    Well, now it works with an icon of www.dryicons.com . But the organisation has it's own logo. How can I create a working icon for IE from a png ?

     

    EDIT: I've changed it back to my .ico file. IE still displaying the old one (even after Hard refresh),  Chrome showing the new one as it did before.

     

    EDIT2: This article only tells you what your .ico should contain. Not how to make a 'valid' one. http://msdn.microsoft.com/library/gg131029(VS.85).aspx">http://msdn.microsoft.com/library/gg131029(VS.85).aspx

     

    PS: Posting from chrome because IE8 is gone and IE9 does not work for me.

    Like GoddersUK suggested: IcoFX is a good free application to create ICO-files.

  • User profile image
    CKurt

    TommyCarlier said:
    CKurt said:
    *snip*

    Like GoddersUK suggested: IcoFX is a good free application to create ICO-files.

    Thx for the help everybody!

     

    http://ksj.be/ now has an .ico file containing all the right dimentions. It's beautyfull.

  • User profile image
    Minh

    CKurt said:
    TommyCarlier said:
    *snip*

    Thx for the help everybody!

     

    http://ksj.be/ now has an .ico file containing all the right dimentions. It's beautyfull.

    You should take out the blue square, it will look better

     

  • User profile image
    CKurt

    Minh said:
    CKurt said:
    *snip*

    You should take out the blue square, it will look better

     

    It's the official logo of the organisation. I can't just change it Wink There PR department would sue me or something Tongue Out

     

    For those wanting a step by step description: http://callemin.be/blog/?p=274 (I've blogged it)

  • User profile image
    elmer

    GoddersUK said:

    I don't know whether this will solve any problems with favicons, but in the past I've used IcoFX for icon manipulation which I think should do multiple dimensions.

     

    http://icofx.ro/ 

    ++

  • User profile image
    sushovande

    Shameless self plug - convert png icons in various resolutions to a ICO [free/open source]

    http://sushovande.6te.net/caspian/csharp/iconmaker.php

  • User profile image
    Geoffreyk

    , CKurt wrote

    Okay, so in IE9 the famous favicon bug is still not fixed (allready submitted it). So it got me thinking I might be doing something wrong.

    What program do you use to create a ".ico" file? I want to do it correctly so the .ico file contains multiple dymentions of the same image. Previously I used a free online png to ico convertor, but this was a bad choice. Because now the same icon is used for pinned site's I want to fix it.

    Any tips?

     

    I made the new Channel9 favicon this week, so this is pretty fresh for me.

    In the past, I had used png2ico, but that just wasn't cutting it this time.

    The new favicon has 16x16, 24x24, 32x32, 48x48, and 64x64 versions inside it. I am not sure that the 48x48 and 64x64 versions are both needed, but I wanted to cover higher dpi displays well. At 32.8k,  it is too large for my tastes, and I am going to try and shave at least 10k out of it when I have time. Note that IE9 is respecting caching directives, so the larger size is not that much of a worry under some circumstances.

    I created the original images using Photoshop and exported them individually as png-24 images. I originally tried png-8 images, but the transparency just wasn't good enough when pinned.

    I then used Gimp 2.6 to combine the indivual images together into the final favicon that you see now. Open the largest image in Gimp, then file>open as Layers the other sizes. Save As and select Microsoft Windows icon in Select File Type.

    Bingo, nice favicon

  • User profile image
    CKurt

    @Geoffreyk: Thx for the info, but I allready found a way myself as I discribed above.

    For those wanting a step by step description: http://callemin.be/blog/?p=274 (I've blogged it)

    But nice work with the C9 icon, it works great in IE9 !

  • User profile image
    Geoffreyk

    @CKurt:What sizes did you decide to include?

  • User profile image
    kip

    I've been playing a bit with Pinned Sites for IE9, and had questions about favicons as well.  I found this PhotoShop add in: http://www.telegraphics.com.au/sw/, which seems to work well in PhotoShop CS3, so you can save as .ico.  The same site also has a (command line for windows) .ico bundle program to create a favicon.ico with multiple sizes: http://www.telegraphics.com.au/sw/info/icobundle.html.  Found this all at http://www.photoshopsupport.com/tutorials/jennifer/favicon.html, a good tutorial.

  • User profile image
    Vlasta_

    You can convert picture to icon online for example at http://www.rw-designer.com/image-to-icon It allows you to specify what custom sizes to create if you wish. ...no need download or install anything.

     

    For favicons, you really need just 16x16 picture these days. If you want to be on the top and support high-DPI modes, include a 32x32 image too (it will get rescaled to 20x20 for 120DPI and to 24x24 for 144DPI display modes in IE (other browsers only use
    the 16x16)). If you include bigger sizes, you are just making the file unnecessary big and it will take more time to appear for the visitors. 32x32 is good up to 192 DPI and noone use this high resolution and won't be using it in at least the next 10 years.

  • User profile image
    CKurt

    @Geoffreyk: All of them. Because you never know when a new browser might be using one of the different sizes and fall back to smaller size if it doesn't have them. The browser might also need it for higher DPI screens.

    And since the last icon I created (via a web ico generator) did not work I wanted to be sure it worked now.

  • User profile image
    Geoffreyk


    ,
    Vlasta_ wrote


    For favicons, you really need just 16x16 picture these days. If you want to be on the top and support high-DPI modes, include a 32x32 image too (it will get rescaled to 20x20 for 120DPI and to 24x24 for 144DPI display modes in IE (other browsers only use
    the 16x16)). If you include bigger sizes, you are just making the file unnecessary big and it will take more time to appear for the visitors. 32x32 is good up to 192 DPI and noone use this high resolution and won't be using it in at least the next 10 years.


     

    Not true anymore. IE9 takes advantage of the higher resolution images in the favicon now.

     

    Checkout this link. Or try pinning C9 to your taskbar in IE9 + win7 to see the higher resolutions in action.

Conversation locked

This conversation has been locked by the site admins. No new comments can be made.