Apple touchのアイコンは60x60よりも大きいですか?サポートされている場合、iPadとiPhoneにはどの寸法を使用すればよいですか?
Apple touchのアイコンは60x60よりも大きいですか?サポートされている場合、iPadとiPhoneにはどの寸法を使用すればよいですか?
回答:
2019年12月に更新されたリストiOS13 iOS 180x180 px用のアイコンとAndroid 192x192 px用のアイコン(site.webmanifestで宣言)。
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
#### site.webmanifest
{
"name": "",
"short_name": "",
"icons": [
{
"src": "/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
}
],
"display": "standalone"
}
非推奨リスト2017年10月、iOS11
Retinaあり/なしのiPhoneおよびiPad用リスト
<!-- iPhone(first generation or 2G), iPhone 3G, iPhone 3GS -->
<link rel="apple-touch-icon" sizes="57x57" href="touch-icon-iphone.png">
<!-- iPad and iPad mini @1x -->
<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png">
<!-- iPhone 4, iPhone 4s, iPhone 5, iPhone 5c, iPhone 5s, iPhone 6, iPhone 6s, iPhone 7, iPhone 7s, iPhone8 -->
<link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png">
<!-- iPad and iPad mini @2x -->
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">
<!-- iPad Pro -->
<link rel="apple-touch-icon" sizes="167x167" href="touch-icon-ipad-pro.png">
<!-- iPhone X, iPhone 8 Plus, iPhone 7 Plus, iPhone 6s Plus, iPhone 6 Plus -->
<link rel="apple-touch-icon" sizes="180x180" href="touch-icon-iphone-6-plus.png">
<!-- Android Devices High Resolution -->
<link rel="icon" sizes="192x192" href="icon-hd.png">
<!-- Android Devices Normal Resolution -->
<link rel="icon" sizes="128x128" href="icon.png">
2017年10月更新iOS 11: iOS 11がチェックされ、iPhone XおよびiPhone 8が導入されました
2016年11月更新iOS 10: 新しいiOSバージョンiPhone 7およびiPhone 7plusが導入され、iPhone 6sおよびiPhone 7plusと同じディスプレイ解像度、dpiなどを備えています。これまで、2015年の更新に関する変更は見つかりませんでした
2016年中旬にAndroidを更新: Apple-TouchリンクはGoogleで非推奨としてマークされ、そのデバイスではいつでもサポートされなくなるため、リストにAndroidデバイスを追加します
<!-- Android Devices High Resolution -->
<link rel="icon" sizes="192x192" href="icon-hd.png">
<!-- Android Devices High Resolution -->
<link rel="icon" sizes="128x128" href="icon.png">
アップデート2015 iOS 9: iOS 9およびiPad proの場合
<link rel="apple-touch-icon" sizes="167x167" href="touch-icon-ipad-pro.png">
新しいiPhone(6sおよび6s Plus)はiPhone(6および6 Plus)と同じサイズを使用し、新しいiPad proはサイズ167x167 pxの画像を使用しますが、その他の解像度は同じです。
アップデート2014 iOS 8:
iOS 8およびiPhone 6 plusの場合
<link rel="apple-touch-icon" sizes="180x180" href="touch-icon-iphone-6-plus.png">
iphone 6はiphone 4および5と同じ120 x 120 pxの画像を使用し、残りはiOS 7と同じです
2013 iOS7のアップデート:
iOS 7の場合、推奨解像度が変更されました:
他の解像度はまだ同じです
ソース:https : //developer.apple.com/ios/human-interface-guidelines/icons-and-images/app-icon/
<link rel="apple-touch-icon" href="icon.png">
github.com/h5bp/html5-boilerplate/blob/master/dist/...
これらのサイズ57x57、72x72、114x114、144x144を使用して、ドキュメントの冒頭でこれを行います。
<link rel="apple-touch-icon" href="apple-touch-icon-iphone.png" />
<link rel="apple-touch-icon" sizes="72x72" href="apple-touch-icon-ipad.png" />
<link rel="apple-touch-icon" sizes="114x114" href="apple-touch-icon-iphone4.png" />
これはすべてのAppleデバイスで見栄えがします。;)
sizes
属性を理解しないため、最後の値を使用します。したがって<link rel="apple-touch-icon" href="apple-touch-icon-iphone.png" />
、最後でなければなりません。また、ペジリオネアが言うように、iPad Retinaの新しいアイコンを144x144で追加できます。
apple-touch-icon-precomposed.png
、他のiDeviceに必要に応じてサイズを変更させることです。
iPad(第3世代)では、57x57、72x72、114x114、144x144の4つのアイコンサイズがあります。
網膜アイコンは標準アイコンのサイズの2倍であるため、実際に作成する必要があるのは、114 x 114と144 x 144の2つのアイコンだけです。網膜サイズのアイコンを対応する標準アイコンに設定することにより、iOSはそれに応じて拡大縮小します。
<!-- Standard iPhone -->
<link rel="apple-touch-icon" sizes="57x57" href="touch-icon-iphone-114.png" />
<!-- Retina iPhone -->
<link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone-114.png" />
<!-- Standard iPad -->
<link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad-144.png" />
<!-- Retina iPad -->
<link rel="apple-touch-icon" sizes="144x144" href="touch-icon-ipad-144.png" />
apple-touch-icon-precomposed.png
、他のiDeviceに必要に応じてサイズを変更させることです。
Appleのサイトのアイコンは152x152ピクセルです。
http://www.apple.com/apple-touch-icon.png
それがあなたの質問に答えることを願っています。
TL; DR:180 x 180 px @ 150 ppiで1つのPNGアイコンを使用し、次のようにリンクします。
<link rel="apple-touch-icon" href="path/to/apple-touch-icon.png">
2020-04の時点で、Appleからの正規の応答はiOSのドキュメントに反映されています。
正式には、仕様はこう述べています:
実際には、これらのサイズの違いはごくわずかなので、パフォーマンスの節約は非常にトラフィックの多いサイトでのみ問題になります。
トラフィックの少ないサイトでは、通常、1つのPNGアイコンを180 x 180 px @ 150 ppiで使用し、プラスサイズのデバイスを含め、すべてのデバイスで非常に良い結果を得ています。
私はしばらくの間iOSアプリの開発と設計を行っており、これはそこにある最高のiOSデザインチートシートです!
楽しんで :)!
更新: iOS 8以降、および新しいデバイス(iPhone 6、6 Plus、iPad Air)の場合は、この更新されたリンクを参照してください。
メタアップデート: Iphone 6s / 6s Plusの解像度はそれぞれiPhone 6/6 Plusと同じです
これは、記事の新しいバージョンの画像です。
Appleのサイト、Specifying a Webpage Icon for Web Clipの関連ドキュメント。
ドキュメントの先頭に何も入れる必要はありません。link要素を使用してアイコンが指定されていない場合、apple-touch-iconまたはapple-touch-icon-precomposed接頭辞が付いたアイコンがWebサイトのルートディレクトリで検索されます。
たとえば、デバイスの適切なアイコンサイズが57 x 57の場合、システムは次の順序でファイル名を検索します。
はい。サイズが一致しない場合、システムは再スケーリングします。ただし、アイコンの2つのバージョンを作成することをお勧めします。
サーバー上のユーザーエージェントによってiPadとiPhoneを区別できます。サーバーでスクリプトを記述したくない場合は、JavaScriptでアイコンを変更することもできます。
<link ref="apple-touch-icon" href="iPhone_version.png" />
...
if (... iPad test ...) {
$('link[rel="apple-touch-icon"]').href = 'iPad_version.png'; // assuming jQuery
}
これが機能するのは、Webクリップを追加したときにのみアイコンが照会されるためです。
(JavaScriptでiPhone≥4とiPhone≤3GSを区別する公的な方法はまだありません。)
はい、60x60を超えるサイズがサポートされています。簡単にするために、次の4つのサイズのアイコンを作成します。
1) 60x60 <= default
2) 76x76
3) 120x120
4) 152x152
ここで、次のようにHTMLにリンクとして追加することをお勧めします。
<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">
上記の4つのリンクを宣言するのではなく、1つのリンクを宣言することを選択できます。その場合、最大サイズ152x152
またはそれよりも大きいサイズを指定します196x196
。常に目的を変更するためにサイズを小さくします。必ず言及してくださいsize
。
リンクを1つも宣言しないことを選択することもできます。Appleは、このシナリオでは、最初にサーバールートを検索して、希望するサイズ(命名形式:)よりもすぐに大きいサイズをapple-touch-icon-<size>.png
探し、それが見つからない場合は、次にを探すと述べていdefault file:
apple-touch-icon.png
ます。サーバーへのブラウザーのクエリを最小限に抑えるため、リンクを定義することをお勧めします。
アイコンの必需品:
- use PNG, avoid interlaced
- use 24-bit PNG
- not necessary to use web-safe colors
iOS 7より古いバージョンでは、アイコンにエフェクトを追加したくない場合は-precomposed.png
、ファイル名に接尾辞を追加するだけです。(iOS 7はそれなしでもエフェクトを追加しません)。
この質問はWebアイコンに関するものだと思います。私は512x512でアイコンを指定してみましたが、iPhone 4シミュレーターでは(プレビューで)見栄えが良いですが、ホーム画面に追加すると、ピクセルがひどくなります。
良い面としては、iPadで大きなアイコンを使用した場合(まだ512x512のテストを使用している)、iPadの方が品質が良いように見えます。うまくいけば、iPhone 4のレンダリングはバグです。
これに関するバグをレーダーで公開しました。
編集:
私は現在、iPhone 4がリリースされたときに見栄えが良くなることを期待して、114x114アイコンを使用しています。iPhone 4が出たときにまだバグがある場合は、iPadのアイコンを最適化し(鮮明で72x72にサイズ変更しない)、古いiPhone用に縮小します。
以下のためにiPhoneやiPod touchの、そのメジャーアイコンを作成します。
57 X 57 pixels
114 X 114 pixels (high resolution @2X)
以下のためのiPad、対策そのアイコンを作成します。
72 x 72 pixels
144 X 144 pixels (high resolution @2X)