apple-touch-icon.pngはiPadとiPhoneでどのサイズにするべきですか?


134

Apple touchのアイコンは60x60よりも大きいですか?サポートされている場合、iPadとiPhoneにはどの寸法を使用すればよいですか?




最良の答えは、AppleのWebサイトで見てみましょう:Appleデベロッパ
Ruub

1
このツールは、サポートされているすべてのサイズのアイコンとページに含めるマークアップを作成するためのものです。 iconifier.net
agarcian

回答:


145

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の場合、推奨解像度が変更されました:

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

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

  • 57 x 57ピクセルのデフォルト
  • RetinaなしのiPadでは76 x 76 px

ソース:https : //developer.apple.com/ios/human-interface-guidelines/icons-and-images/app-icon/


30
私は彼らがSVGをサポートし、このがらくたで終わればいいのにと思います。しかし、答えてくれてありがとう!
Steven Vachon、2015年

2
更新が大好きです...この回答を超関連性の高いものにします!
Chris Allinson、2015年

1
それの価値HTML5定型レポ人気との戦いテストされたが、1つだけのキャッチオールアイコンの使用をお勧めしていることを指摘<link rel="apple-touch-icon" href="icon.png"> github.com/h5bp/html5-boilerplate/blob/master/dist/...
jackocnr

また、Androidデバイスをサポートするための現代的なアプローチは、マニフェストファイルを使用して、そこに自分のアイコン(複数可)を指定することです:developers.google.com/web/fundamentals/app-install-banners -このアプローチはまた、HTML5ボイラープレートで使用されていますレポ:github.com/h5bp/html5-boilerplate/blob/master/dist/...
jackocnr

それをテストしました。iPhone Xでは、Githubアイコンの横にあるアイコンが少しぼやけて見えます。:/
kaiserkiwi

117

これらのサイズ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デバイスで見栄えがします。;)


8
リンゴからのサポートマニュアル:developer.apple.com/library/safari/#documentation/...
ジムGeurts

6
ただし、sizes属性は有効なHTMLではありません。

8
古いiOSデバイスはsizes属性を理解しないため、最後の値を使用します。したがって<link rel="apple-touch-icon" href="apple-touch-icon-iphone.png" />、最後でなければなりません。また、ペジリオネアが言うように、iPad Retinaの新しいアイコンを144x144で追加できます。
appmattus

5
ios7以降、推奨サイズが変更されました:114×114-> 120×120、144x144-> 152x152(網膜)
Cody Django

4
@CodyとHTML5Boilerplateが現在採用しているアプローチは、152x152アイコンのみを使用してそれを呼び出しapple-touch-icon-precomposed.png、他のiDeviceに必要に応じてサイズを変更させることです。
Blazemonger 2013年

94

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" />

私はこの方法が一番好きです。
Caleb Jares 2012

この方法は、非常にシンプルです。
PaulSkinner 2012

1
したがって、2つの画像のみを作成し、デバイスを2倍に縮小できるようにします。可愛い。

9
iOS7以降、推奨サイズが変更されました:114×114-> 120×120、144x144-> 152x152(網膜)
Cody Django

4
@CodyとHTML5Boilerplateが現在採用しているアプローチは、152x152アイコンのみを使用してそれを呼び出しapple-touch-icon-precomposed.png、他のiDeviceに必要に応じてサイズを変更させることです。
Blazemonger 2013年

34

Appleのサイトのアイコンは152x152ピクセルです。
http://www.apple.com/apple-touch-icon.png

それがあなたの質問に答えることを願っています。


1
この。または144x144(予想されるiPad Retina解像度)。それらのすべては、将来のために少し先を計画しながら、より低い解像度のiPhone / iPadサイズに縮小されたように見えます。
DOOManiac

6
2013年10月の時点で、現在のサイズは152x152であり、デバイスごとに変化しないようです(とにかく私のラップトップとiphone4の間ではありません)
Wick

17

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のドキュメントに反映されています

正式には、仕様はこう述べています:

  • iPhone 180px×180px(60pt×60pt @ 3x)
  • iPhone 120px×120px(60pt×60pt @ 2x)
  • iPad Pro 167px×167px(83.5pt×83.5pt @ 2x)
  • iPad、iPad mini 152px×152px(76pt×76pt @ 2x)

実際には、これらのサイズの違いはごくわずかなので、パフォーマンスの節約は非常にトラフィックの多いサイトでのみ問題になります。

トラフィックの少ないサイトでは、通常、1つのPNGアイコンを180 x 180 px @ 150 ppiで使用し、プラスサイズのデバイスを含め、すべてのデバイスで非常に良い結果を得ています。


16

私はしばらくの間iOSアプリの開発と設計を行っており、これはそこにある最高のiOSデザインチートシートです!

楽しんで :)!

この画像はその記事からです:)

更新: iOS 8以降、および新しいデバイス(iPhone 6、6 Plus、iPad Air)の場合は、この更新されたリンクを参照してください

メタアップデート: Iphone 6s / 6s Plusの解像度はそれぞれiPhone 6/6 Plusと同じです

これは、記事の新しいバージョンの画像です。

iOS 8および2014年半ばのデバイス情報


6

Appleのサイト、Specifying a Webpage Icon for Web Clipの関連ドキュメント。

ドキュメントの先頭に何も入れる必要はありません。link要素を使用してアイコンが指定されていない場合、apple-touch-iconまたはapple-touch-icon-precomposed接頭辞が付いたアイコンがWebサイトのルートディレクトリで検索されます。

たとえば、デバイスの適切なアイコンサイズが57 x 57の場合、システムは次の順序でファイル名を検索します。

  • apple-touch-icon-57x57-precomposed.png
  • apple-touch-icon-57x57.png
  • apple-touch-icon-precomposed.png
  • apple-touch-icon.png

はい。ただし、この質問はiphone4とipadの新しい(大きい)アイコンに関するものです。
cherouvim

ヘッダーで何かを指定する必要はありませんが、それでも良い方法です。たとえば網膜のiPadの144x144バージョンを見逃し、ピクセルサイズのないアイコンがない場合、モバイルSafariはサイトのプレビューのみを表示するようにフォールバックしますが、最適ではないがより優れた、より小さなバージョンを使用する可能性があります。
Rafael Bugajewski、2012年

他のプラットフォームもそれらを使用するため(Android、ChromeOS、Blackberryなど)、ヘッダーに指定しないことは非常に悪い考えです
レミグルモー

5

はい。サイズが一致しない場合、システムは再スケーリングします。ただし、アイコンの2つのバージョンを作成することをお勧めします。

  • iPad — 72x72。
  • iPhone(≥4)— 114x114。
  • iPhone≤3GS— 57x57 —可能であれば。

サーバー上のユーザーエージェントによって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を区別する公的な方法はまだありません。)


1
iPhone 4の解像度は明らかにiPhone 3の解像度よりも2倍に拡大されているので、そのためのアイコンサイズとしてはおそらく114x114が適切な選択でしょう。
JAB

@JAB:アイコンに境界線が追加されているため、iPhone≤3GSでの実際のアイコンサイズは59x60です。その場合、114x114は少しずれている可能性があります。
kennytm

iPhone 4+の境界線は、解像度ごとに同じ量でスケーリングされていませんか(サイズごとに同じ幅に見えるようになっていますか)?
JAB

@JAB:あるはずです。私はチェックしませんでした。
kennytm

すべてのあなたのアイデア/アドバイスをありがとう。3つのバージョンを作成する場合、各デバイスを適切なサイズでターゲットにするにはどうすればよいですか?私が何かを欠いていて、PNGが異なるサイズを入れることができるコンテナ形式でない限り?
ハリー

2

はい、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はそれなしでもエフェクトを追加しません)。


1

この質問はWebアイコンに関するものだと思います。私は512x512でアイコンを指定してみましたが、iPhone 4シミュレーターでは(プレビューで)見栄えが良いですが、ホーム画面に追加すると、ピクセルがひどくなります。

良い面としては、iPadで大きなアイコンを使用した場合(まだ512x512のテストを使用している)、iPadの方が品質が良いように見えます。うまくいけば、iPhone 4のレンダリングはバグです。

これに関するバグをレーダーで公開しました。

編集:

私は現在、iPhone 4がリリースされたときに見栄えが良くなることを期待して、114x114アイコンを使用しています。iPhone 4が出たときにまだバグがある場合は、iPadのアイコンを最適化し(鮮明で72x72にサイズ変更しない)、古いiPhone用に縮小します。


0

以下のためにiPhoneiPod touchの、そのメジャーアイコンを作成します。

    57 X 57 pixels
    114 X 114 pixels (high resolution @2X)

以下のためのiPad、対策そのアイコンを作成します。

    72 x 72 pixels
    144 X 144 pixels (high resolution @2X)
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.