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.

Comments

[Rasmusbe]

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]

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 Dickinson]

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]

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

[Sean]

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]

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]

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

[Walt Dickinson]

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

[Jonmilani]

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]

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 Dickinson]

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.