apple-touch-icon の正しいピクセル寸法はどれくらいですか?

StackOverflow https://stackoverflow.com/questions/1598

質問

適切なサイズがどれくらいかわかりません。

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

ヘンゼルマン'砂 遊び場ブルースのコメントでは、163x163 や 60x60 などのさまざまなサイズが提案されています。

アップル独自の apple.com アイコン 129x129です！

私の関連する質問を参照してください。自分の Web サイトに iPhone 用のアイコンを付けるにはどうすればよいですか?

役に立ちましたか？

解決

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

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

見る カスタムアイコンと画像の作成ガイドライン (JavaScript が必要です) これはドキュメント全体の一部です:

他のヒント

Googleキャッシュより Apple Developer Connection - Web Apps Dev Center - コンテンツのデザイン...

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

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

Webサイトのすべてのページのブックマークアイコンを指定するには、サイトアイコンの「favicon.ico」と同様に、Webサーバーのルートディレクトリに「Apple-Touch-Icon.png」という名前のPNG画像を配置します。

特定のWebページにサイトのブックマークアイコンをオーバーライドするには、u003Clink>に似た要素u003Clinkn rel="apple-touch-icon"n href="/customIcon.png"/>以内u003Chead>ページの要素。

ブックマーク アイコンのサイズは 57x57 ピクセルである必要があります。アイコンが別のサイズの場合、それは拡大され、収まるようにトリミングされます。

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

どれだけ詳細を表現したいかによって異なりますが、アスペクト比は 1:1 である必要があります (基本的には正方形である必要があります)。

私なら Apple 独自の 129*129 を使います。

公式リファレンスは ADC の管理下にあるため、これらのサイズの出典を引用することはできません。

ただし、NDA 以外のサイトの多くには、アイコンの作成方法に関するチュートリアルが用意されています。たとえば次のとおりです。

実際、Apple には Safari Web コンテンツ ガイドの一部として、「」という一般公開されているページがあります。Web クリップの Web ページ アイコンの指定" (JavaScript が必要) これには、すべての解決策とその実装が含まれています。

公式サイズは57×57です。(Apple がスケーリングされた表現をキャッシュしない限り) ロード時に必要なメモリが少なくて済むという理由だけで、正確なサイズを使用することをお勧めします。とは言うものの、 レックスは正しい 任意の正方形サイズが機能すること

アップルのスペック iOS7 の新しいサイズを指定します。

  • 60×60
  • 76×76
  • 120×120
  • 152×152

一方、iOS6 以前の古いサイズは次のとおりです。

  • 57×57
  • 72×72
  • 114×114
  • 144×144

ちなみに、プリコンポーズされたアイコンは非推奨になりました。

結果として、新しいデバイス (iOS7 を実行) および古いデバイス (iOS6 以前) をサポートするには、これら 8 つのピクチャが存在する必要があり、一般的なコードは次のとおりです。

<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png">    
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">

加えて、 という名前の152x152の画像を作成する必要があります apple-touch-icon.png.

あなたはこれを知りたいかもしれません ファビコンジェネレーター これらすべての画像を一度に生成できます。完全な開示:私はこのサイトの作者です。

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

NilObject のリンクから素晴らしいブログ投稿にたどり着きました あなたのアイコンをキャッチアップ で makentosh.com

...もちろん、この矛盾のすべては最終的に対処しなければなりませんでしたよね？2.0は素晴らしい方法でそれを扱った！最後に、57x57は実際には57x57を意味しました。

...それぞれのピクセル...完全にレンダリングされます。

もう正しいサイズを気にする必要はありません。itune アートワーク ファイル (つまり、あなたのアイコンのファイル (サイズ 1024*1024) があれば、提供された情報に基づいてすべてのアイコンを提供するこのアプリケーションを作成しました ここ. 。を入手 お申し込みはこちらから, 、readme ファイルの指示に従って、iOS アプリケーションに必要なアイコンをすべて作成します。

更新リスト 2014 年 10 月、iOS8

Retina ありとなしの 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 ピクセルのデフォルト
  • Retina のない iPad の場合は 76 x 76 ピクセル
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top