아이폰, 새로운 iPad 및 Android 용 홈 화면의 아이콘 품질

Question

나는 첫 번째 웹 앱을 개발했습니다 http://checkamy.herokuapp.com. 모든 일반 기기와 호환되는 앱을 만들고 있습니다. 그러나 모바일 홈 화면 아이콘을 만드는 데 문제가 있습니다.

<link rel="apple-touch-icon" href="/apple-touch-icon.png"/> 
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-precomposed.png" /> 

해상도 :

나는 HTML에있는이 2 줄이 -> 114x114

사과 터치 아이콘 - precomposed.png

• 사과 터치 icon.png를 - > 57x57

Android에서는 문제가 없지만 새로운 iPad 및 iPhone 4S에서는 올바르게 표시 할 수 없습니다.

품질이 좋지 않습니다. Apple 기기는 홈 화면 아이콘으로 apple-touch-icon-precomposed.png처럼 보입니다.

내 질문은 :

• 가 어떻게 새로운 & 기존 스마트 폰 디바이스에 미남으로 아이콘을 만들 수 있습니까?

p.s. Android 2.2, iPhone 3G와 같은 이전 기기와 호환되도록하고 싶습니다. & 4S ...

참고로 저는 Coffeescript, jQuery & Ruby on Rails를 사용하고 있습니다.

많은 도움을 주셔서 감사합니다.

Answer 1

여러 개의 해상도에 대해 여러 아이콘을 지정하는 경우 Apple 설명서 here을 참조하십시오.

는 apple-touch-icon-precomposed 다른 해상도를 사용 하지 것을 알고 있어야하지만 이미지의 "광택"(그래서 아이폰 OS는 발판 표현에 자신의 광택을 적용해서는 안) 이미 적용되었음을 나타냅니다.

네이티브 해상도로 현재의 모든 iDevices를 처리 할 수있는 풀 세트의 경우, 이미지의 크기는 실제로는 sizes= 또는 크기가 인용되지 않은 경우 57x57에서 인용 된 이미지입니다. :

<link rel="apple-touch-icon" href="touch-icon-iphone.png" /> 
<link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad.png" /> 
<link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone-retina.png" /> 
<link rel="apple-touch-icon" sizes="144x144" href="touch-icon-ipad-retina.png" /> 

Answer 2

시도 The Icons Slayer. 그것은 당신을 위해 겉보기에 합리적인 아이콘 크기를 많이 생성합니다.