Welcome to WebmasterWorld Guest from 54.146.221.231

Forum Moderators: open

Message Too Old, No Replies

favicon.ico in IE

Strange display of favicon in IE

     
1:30 pm on Jun 6, 2012 (gmt 0)

Junior Member

joined:June 6, 2012
posts:104
votes: 0


Hi all,

I'm having a small problem with the way that IE displays my favicon.ico. I used photoshop CS5 to create an image with transparency then used the photoshop plugin to export the file as an ico file.

Below is an image of what the icon looks like in IE. As you can see there is a white background or piece of paper with a folded corner.

I've provided a link to the image below. When you follow the link the image will be in the upper left hand corner.

<snip>

Thanks

[edited by: bill at 4:29 am (utc) on Jun 7, 2012]
[edit reason] removed example link [/edit]

4:38 am on June 7, 2012 (gmt 0)

Administrator from JP 

WebmasterWorld Administrator bill is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 12, 2000
posts: 14483
votes: 49


Welcome to WebmasterWorld brandozz.

Sorry, we prefer to stay away from links to examples. The problem is once a problem has been fixed they're usualy updated or removed from the server. That's no help to someone looking at this thread in the future.

Your issue is that IE isn't showing a transparent background on your favicon.ico file. Is it displaying properly in other browsers?

We've had a bunch of threads on the topic of favicon.ico over the years. I would first suggest you take a look at some older threads to see if your question hasn't been answered before:
  • Favicon Primer [webmasterworld.com]
  • How do you get pngs to work as favicon's in IE [webmasterworld.com]
  • Favicons and Transparency [webmasterworld.com]

    Try the Search [webmasterworld.com] link above for more options.
  • 4:13 pm on June 7, 2012 (gmt 0)

    Junior Member

    joined:June 6, 2012
    posts:104
    votes: 0


    Thank you for the reply Bill and I do apologize for the link.

    It's only IE that does this. It looks great in Firefox and Chrome, the transparency is there.

    Do I need to create a png file with alpha transparency and then export that png to an ico file using the photoshop plugin or some other method of creating ico files?
    2:29 am on June 11, 2012 (gmt 0)

    Administrator from JP 

    WebmasterWorld Administrator bill is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

    joined:Oct 12, 2000
    posts: 14483
    votes: 49


    No problem about the link. Not everyone has the time to go through our TOS [webmasterworld.com] before posting.

    This may be an issue with the PhotoShop plug-in you're using. I've actually had good luck with simple online favicon generators where you upload your file and they spit back a properly formatted .ico file.
    2:00 am on June 13, 2012 (gmt 0)

    Junior Member

    joined:June 6, 2012
    posts:104
    votes: 0


    Great! Thanks

    I have run into many of those when searching for a solution for this. I'll give it a try.
    5:13 am on June 13, 2012 (gmt 0)

    Administrator from JP 

    WebmasterWorld Administrator bill is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

    joined:Oct 12, 2000
    posts: 14483
    votes: 49


    Hope that works out for you. I had tried some Photoshop methods and found I wasn't getting a true .ico file in the end.
    1:46 pm on June 19, 2012 (gmt 0)

    Junior Member

    joined:June 6, 2012
    posts: 104
    votes: 0


    Didn't work out for me. I saved a 16x16 png file with transparency and uploaded it to one of the online generators. IE still puts that annoying border around the icon. I can't figure out why it's doing this and it's annoying the crap out of me.
    1:55 pm on June 19, 2012 (gmt 0)

    Senior Member from FR 

    WebmasterWorld Senior Member leosghost is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

    joined:Feb 15, 2004
    posts:6717
    votes: 230


    Try "gimp"..
    2:07 pm on June 19, 2012 (gmt 0)

    Junior Member

    joined:June 6, 2012
    posts: 104
    votes: 0


    Just used the tool from Dynamic Drive merging it with a 32 x 32 desktop icon and it works? I think IE 9 must use a different resolution then the old standard 16 x 16.
    6:19 am on June 20, 2012 (gmt 0)

    Administrator from JP 

    WebmasterWorld Administrator bill is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

    joined:Oct 12, 2000
    posts:14483
    votes: 49


    That makes sense. An .ico file can contain multiple sizes. Some of the better online tools will let you choose how many you will include in the file.