favicon.ico in IE

Forum Moderators: open

Message Too Old, No Replies

favicon.ico in IE

Strange display of favicon in IE

brandozz

1:30 pm on Jun 6, 2012 (gmt 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]

bill

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

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.

brandozz

4:13 pm on Jun 7, 2012 (gmt 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?

bill

2:29 am on Jun 11, 2012 (gmt 0)

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.

brandozz

2:00 am on Jun 13, 2012 (gmt 0)

Great! Thanks

I have run into many of those when searching for a solution for this. I'll give it a try.

bill

5:13 am on Jun 13, 2012 (gmt 0)

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.

brandozz

1:46 pm on Jun 19, 2012 (gmt 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.

Leosghost

1:55 pm on Jun 19, 2012 (gmt 0)

Try "gimp"..

brandozz

2:07 pm on Jun 19, 2012 (gmt 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.

bill

6:19 am on Jun 20, 2012 (gmt 0)

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.

favicon.ico in IE

Strange display of favicon in IE

brandozz

bill

brandozz

bill

brandozz

bill

brandozz

Leosghost

brandozz

bill

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week