CKurt while( ( !succeed=try() ) ) { }

Sep 16, 2010 at 3:48 AM

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 ...
GoddersUK My five year mission: To boldly split infinitives that no man has split before!

Sep 16, 2010 at 4:13 AM

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/
vesuvius Count Orlock
Sep 16, 2010 at 4:17 AM
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
TommyCarlier Widen your gaze
Sep 16, 2010 at 4:39 AM
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.
CKurt while( ( !succeed=try() ) ) { }
Sep 16, 2010 at 4:41 AM
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.
TommyCarlier Widen your gaze

Sep 16, 2010 at 5:04 AM

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.
CKurt while( ( !succeed=try() ) ) { }

Sep 16, 2010 at 10:18 AM

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.
Minh WOOH! WOOH!

Sep 16, 2010 at 12:12 PM

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
CKurt while( ( !succeed=try() ) ) { }

Sep 16, 2010 at 12:56 PM

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 There PR department would sue me or something

For those wanting a step by step description: http://callemin.be/blog/?p=274 (I've blogged it)
elmer I'm on my very last life.

Sep 16, 2010 at 6:43 PM

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/

++
sushovande Smiley Face Sharp

Sep 17, 2010 at 1:44 PM

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

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

Sep 17, 2010 at 3:40 PM

1 day ago, 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
CKurt while( ( !succeed=try() ) ) { }

Sep 17, 2010 at 3:43 PM

@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 !
Geoffreyk boom

Sep 17, 2010 at 3:54 PM

@CKurt:What sizes did you decide to include?
kip

Sep 17, 2010 at 9:39 PM

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.
Vlasta_

Sep 18, 2010 at 12:28 AM

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.
CKurt while( ( !succeed=try() ) ) { }

Sep 18, 2010 at 3:49 AM

@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.
Geoffreyk boom

Sep 18, 2010 at 9:34 AM

9 hours ago,
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.

Thread Closed

This thread is kinda stale and has been closed but if you'd like to continue the conversation, please create a new thread in our Forums,
or Contact Us and let us know.

IE9 Favicon

Thread Closed