iphone - 表示されない - favicon サイズ




apple-touch-iconの正しいピクセルサイズは何ですか? (8)

正しいサイズがどうあるべきかわかりません。

多くのサイトは、apple-touch-iconが57x57ピクセルであるべきだと繰り返しているようですが、ソースとしてリンク切れを引用しています。

Hanselman playgroundblues のコメントは、163x163や60x60などの異なるサイズを示唆しています。

Apple独自の apple.comアイコン は129x129です!

関連する質問: WebサイトにiPhoneのアイコンを付けるにはどうすればよいですか?


2010年8月3日のAppleガイドラインには、「必要な」アイコンサイズの「iPhone 4用の」「高解像度」画像が含まれているようです。

57x57と114x114の両方の画像と、640x960のタイトル画像を提供する必要があるようです。

ドキュメント全体の一部である カスタムアイコンと画像作成のガイドライン (Javascriptが必要)を参照してください。


NilObjectのリンクは、 makentosh.com アイコンに関する 素晴らしいブログ投稿Catchupに私を導きました。

...もちろん、この矛盾はすべて最終的に対処する必要がありましたよね? まあ2.0はそれをうまく処理しました! 最後に、57x57は実際には57x57を意味していました。

...すべてのピクセル...完璧にレンダリングされます。


「正しいサイズ」があるとは思わない。 iPhoneは実際にOSXを実行しているため、アイコンレンダリングシステムは非常に堅牢です。 適切なアスペクト比と少なくとも実際の出力と同じ解像度の高品質の画像を提供する限り、OSは非常にきれいにダウンスケールします。 私のサイトは158x158を使用しており、アイコンはiPhoneの画面上でピクセル単位で表示されます。


これ以上正しいサイズを気にする必要はありません。 アイコンのiTunesアートワークファイル(つまり、1024 * 1024サイズのファイル)がある場合、 here 提供さ here 情報に基づいてすべてのアイコンを提供するこのアプリケーションを作成し here ここからアプリケーションを 取得し、readmeファイルの指示に従って、iOSアプリケーションに必要なすべてのアイコンを作成します。


公式のサイズは57x57です。 ロードされたときのメモリ消費が少ないという事実のために、正確なサイズを使用することをお勧めします(Appleがスケーリングされた表現をキャッシュしない限り)。 とはいえ、 レックスは どんな正方形のサイズでも機能するの は正しい


公式の参照はADCの鍵と鍵の下にあるため、これらのサイズのソースを引用することはできません。

ただし、NDA以外のサイトの多くには、アイコンの作成方法に関するチュートリアルがあります。 以下に例を示します。


Apple Developer Connectionの Googleキャッシュから -Web Appsデベロッパーセンター-コンテンツの設計 ...

Webクリップブックマークアイコンを作成する

iPhoneおよびiPod touchを使用すると、ユーザーはWebクリップブックマークをホーム画面でサイトに保存できます。

Webサイトのすべてのページにブックマークアイコンを指定するには、Webサーバーのルートディレクトリに「apple-touch-icon.png」という名前のPNGイメージを配置します。これは、サイトアイコンの「favicon.ico」に似ています。

特定のWebページのサイトブックマークアイコンを上書きするには、ページの<head>要素内に<link rel = "apple-touch-icon" href = "/ customIcon.png" />のような<link>要素を挿入します。

ブックマークアイコンのサイズは57x57ピクセルにする必要があります。 アイコンのサイズが異なる場合、サイズに合わせてサイズ調整およびトリミングされます。

Safariは、アイコンを標準の「グラッシー」オーバーレイと自動的に合成するため、組み込みのiPhoneまたはiPodアプリケーションのように見えます。


2014年10月に更新されたリスト、iOS8

網膜ありとなしのiPhoneおよびiPadのリスト

<link rel="apple-touch-icon" href="touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">
<link rel="apple-touch-icon" sizes="180x180" href="touch-icon-iphone-6-plus.png"> 

2014 iOS 8の更新:

iOS 8およびIphone 6プラスの場合

<link rel="apple-touch-icon" sizes="180x180" href="touch-icon-iphone-6-plus.png"> 

iPhone 6は、iPhone 4および5と同じ120 x 120ピクセルの画像を使用し、その他はiOS 7と同じです

2013 iOS7の更新:

iOS 7では、推奨解像度が変更されました。

  • iPhone Retinaの場合、114 x 114ピクセルから120 x 120ピクセル
  • iPad Retinaの場合、144 x 144ピクセルから152 x 152ピクセル

他の解像度はまだ同じです

  • 57 x 57 pxのデフォルト
  • 網膜のないiPadの場合は76 x 76ピクセル




apple-touch-icon