iOS 4 Web App Home Screen Icon Bug

iOS 4 has an annoying bug for web app developers. If you use the apple-mobile-web-app-capable feature to indicate that your site should launch as it’s own app rather than open in Safari, the OS creates a low-resolution version of your apple-touch-icon on the home screen:

The app on the right uses apple-mobile-web-app-capable. The app on the left doesn’t. They were both generated from the same image.

---

Update: Finally fixed in iOS 4.1!

---

See also:

• Targeting the iPhone 4 Retina Display with CSS3 Media Queries
• Generating High-Resolution Graphics for iPhone 4 with HTML5’s Canvas Element

Comments

[Rasmusbe on June 24, 2010 at 3:22 PM]

Jailbreaked iOS 4 with pwnagetool and all my web apps with apple-mobile-web-app-capable crashes at start. Tried it with complete clean install (except the jailbreak) and it still crashes.

[Chris Drackett on June 24, 2010 at 3:43 PM]

I submitted this bug to apple, but never thought to remove the 'apple-mobile-web-app-capable'

sadly, I'd much rather my app run full screen and have a ugly icon. Hopefully this will be fixed soon...

yeah right ;)

[Walt Grayson on June 24, 2010 at 11:21 PM]

Rasmusbe: Ouch.

Chris: I’m hoping it gets fixed soon too. With any luck there’ll be a 4.0.1 before too long. And I agree, removing it isn’t really an option.

[Franck on June 25, 2010 at 4:14 AM]

Same here :(
I hope Apple will fix this soon...

[Sean on June 25, 2010 at 6:11 AM]

Mine is fuzzy on the homescreen with

All of the images are now for my mobile site. I have tried exporting as 326dpi and they still are. Any ideas on how to clear up the images?

[Renato on June 28, 2010 at 3:36 AM]

The problem for me append only after the jailbreak. Try. Restore to iOS 4 and before jailbreaking try some webapp with fullscreen support. It will works. After the jailbreak no way.

[Elias on August 3, 2010 at 10:48 PM]

Does anyone know if this bug is just limited to jailbroken iPhones? Or all iOS 4 devices?

[Walt Grayson on August 3, 2010 at 11:16 PM]

My phone's not jailbroken and the bug is there in 4.0 and 4.0.1.

[Jonmilani on August 24, 2010 at 5:00 PM]

I started a discussion on Apple's support thread regarding this topic. Let's see if it gains any traction!

http://discussions.apple.com/thread.jspa?threadID=2555729&stqc=true

[Niksy on August 25, 2010 at 4:55 AM]

Maybe you could try inspecting for device pixel ratio with JS?

var head = document.getElementsByTagName('head')[0];         
    var link = document.createElement('link');
    link.rel = 'apple-touch-icon-precomposed';
    if(window.devicePixelRatio < 2) {
      link.href='favicon.png';
    } else {
      link.href='favicon@2x.png';
    }
    head.appendChild(link);

Haven’t tried it since I don’t have iPhone 4, but debugging in Chrome showed correct results while changing if/else statements.

Can someone try this with iPhone 4?

[Walt Grayson on August 25, 2010 at 9:18 PM]

Unfortunately, it doesn't have anything to do with the size of the image you provide. Even if the image is large, the iPhone 4 won't size it correctly. And it's still broken in iOS 4.0.2.

[Jonmilani on September 11, 2010 at 9:39 AM]

I submitted a bug report to Apple about 4 days ago, received a response from an Apple engineer the day before yesterday, and as of this morning the bug appears to be fixed!

[stopsatgreen on November 4, 2010 at 5:30 AM]

Thanks for writing about this - I was tearing my hair out wondering why my app icons looked pixelated!