スキップしてメイン コンテンツに移動

2021年決定版はこれ! アイコン編("apple-touch-icon"と"icon"と"icons")編

  1. 2021年決定版はこれ! ICOファビコン、タッチアイコン、スプラッシュ画面をきっちり押さえて圧倒的おもてなし！
  2. ファビコン(favicon.ico)編
  3. アイコン編("apple-touch-icon"と"icon"と"icons")編
    1. <link rel="apple-touch-icon">と<link rel="icon">の概要
    2. 推奨タグ(暫定版)
    3. 参考記事
  4. スプラッシュ画面("apple-startup-image")編

3.1 <link rel="apple-touch-icon">と<link rel="icon">の概要

タッチアイコン

  1. Android 9 の Chrome ブラウザからホーム画面に追加する。
  2. Chrome ではタッチアイコンは144pxが使われる。Firefox では512pxが使われる。

デスクトップショートカット

  1. Windows 10 の Chrome ブラウザからデスクトップにショートカットを作成する。
  2. Chrome ではタブのアイコンは32pxが表示されている。ダイアログには36pxのアイコンが使われている。
  3. Windows 10 の IE11 でデスクトップにショートカットを作成する。全てのアイコンに32pxが表示されている。
  4. PaleMoon と Firefox のタブのアイコンは16pxが表示されている。Firefox はリロードの後に192pxになることがある。

Windows 10 で Chrome ブラウザからデスクトップにショートカットを追加したスクリーンショット。デスクトップ上で右クリックメニューの表示から、大アイコンを選ぶと256pxが、中アイコンを選ぶと48pxが、小アイコンを選ぶと36pxがそれぞれ表示された。

スタート画面のタイル

  1. Microsoft Edge 91.0.864.41 でその他のツール > スタート画面にピン留めするを選択。
  2. 確認のダイアログでは36pxが使われている。
  3. もう一度、OS の UI で確認が表示される。
  4. スタート画面のタイルは、中サイズ、小サイズ、どちらのサイズでも256pxが表示された。

アプリビュー

Windows 10 の IE11 からアプリビューに追加した場合、32pxが表示されている。Chrome からインストーすると36pxが表示される。

サポートの歴史

リリース日ブラウザとバージョンサポート
Opera 7<link rel="icon"> をサポート(*5)
Firefox 2<link rel="icon"> をサポート(*2)
Safari 3.1, Chrome 4<link rel="icon"> をサポート。ICO と PNG の両方が利用可能な場合、ICO のマッチしたサイズが適切であれば、PNG よりも ICO を使用します。(*2)
IE 11<link rel="icon"> をサポート(*2)
2007/11/12iOS 1.1.3<link rel="apple-touch-icon"> をサポート
2008/07/11iOS 2.0<link rel="apple-touch-icon-precomposed"> をサポート
2010/01/12Android 2.1<link rel="apple-touch-icon-precomposed"> をサポートする。（stackoverflowに関する一部の話では、一部のHTCスマートフォンではまったく機能しない可能性があります）(*1)
2010/03/20Android 2.2<link rel="apple-touch-icon"> をサポートする。
2010/11/22iOS 4.2sizes 属性をサポートする。
2012/06/27?Chrome for Android 18?AOSP が 2.x からサポートしていることから、Android 版で最初の18から "apple-touch-icon" をサポートしているかもしれない。ちなみに4.0以降にインストールできる。
2013/09/18iOS 7タッチアイコンの特殊効果の廃止。
2013/11/14Chrome for Android 31標準の <link rel="icon"> をサポートする。A2HS をサポートする。
Android 4.4複数のフォーマットが利用可能な場合、サイズに関係なく、最後にロードされたフォーマットを使用します（事実上ランダムに選択します）。(*4)
Chrome 39ウェブマニュフェストの "icons" をサポート(*3)
  1. Getting Android to Recognize Apple Touch Icons
  2. Can I Use > HTML element: link: rel: icon
  3. Can I Use > manifest: icons
  4. Can I Use > PNG favicons
  5. Jonathan T. Neal > Understand the Favicon

3.2 推奨タグ(暫定版)

PNG アイコン

<link rel="icon"> では、最初に指定されていたアイコンを使用するブラウザ、最期に指定されていたアイコンを使用するブラウザが、それぞれある為、妥当なサイズを最初と最後で指定します。 

<!-- Other browsers -->
<link rel="icon" type="image/png" href="icon/032x032.png" sizes="32x32">
<link rel="icon" type="image/png" href="icon/192x192.png" sizes="192x192">
<link rel="icon" type="image/png" href="icon/048x048.png" sizes="48x48">
<link rel="icon" type="image/png" href="icon/096x096.png" sizes="96x96">
<link rel="icon" type="image/png" href="icon/016x016.png" sizes="16x16">

<!-- for iOS 4.2+ -->
<link rel="apple-touch-icon" href="icon/180x180.png" sizes="180x180">
<link rel="apple-touch-icon" href="icon/167x167.png" sizes="167x167"> <!-- *1 --> 
<link rel="apple-touch-icon" href="icon/152x152.png" sizes="152x152">
<link rel="apple-touch-icon" href="icon/144x144.png" sizes="144x144">
<link rel="apple-touch-icon" href="icon/120x120.png" sizes="120x120">
<link rel="apple-touch-icon" href="icon/114x114.png" sizes="114x114">
<link rel="apple-touch-icon" href="icon/076x076.png" sizes="76x76">
<link rel="apple-touch-icon" href="icon/072x072.png" sizes="72x72">
<link rel="apple-touch-icon" href="icon/060x060.png" sizes="60x60">
<link rel="apple-touch-icon" href="icon/057x057.png" sizes="57x57">
<!-- for iOS 2.0+, AOSP 2.1+ -->
<link rel="apple-touch-icon-precomposed" href="icon/057x057.png">
<!-- for iOS 1.2.2+, AOSP 2.2+ -->
<link rel="apple-touch-icon" href="icon/057x057.png">
  1. 167サイズは「Safari Web Content Guide」でだけ記述を見つけた。

manifest.jsonの"icons"プロパティ

{
    "name"             : "/*__APP_TITLE__*/",
    "short_name"       : "/*__APP_TITLE_SHORT__*/",
    "start_url"        : "./?a2hs=1",
    "display"          : "fullscreen",
    "theme_color"      : "/*__THEME_COLOR__*/",
    "background_color" : "/*__BACKGROUND_COLOR__*/",
    "description"      : "/*__DESCRIPTION__*/",
    "icons"            : [
        {
            "src"   : "icon/512x512.png",
            "sizes" : "512x512",
            "type"  : "image/png"
        },{
            "src"   : "icon/384x384.png",
            "sizes" : "384x384",
            "type"  : "image/png"
        },{
            "src"   : "icon/256x256.png",
            "sizes" : "256x256",
            "type"  : "image/png"
        },{
            "src"   : "icon/192x192.png",
            "sizes" : "192x192",
            "type"  : "image/png"
        },{
            "src"   : "icon/144x144.png",
            "sizes" : "144x144",
            "type"  : "image/png"
        },{
            "src"   : "icon/096x096.png",
            "sizes" : "96x96",
            "type"  : "image/png"
        },{
            "src"   : "icon/072x072.png",
            "sizes" : "72x72",
            "type"  : "image/png"
        },{
            "src"   : "icon/048x048.png",
            "sizes" : "48x48",
            "type"  : "image/png"
        },{
            "src"   : "icon/036x036.png",
            "sizes" : "36x36",
            "type"  : "image/png"
        }
    ]
}

3.3 参考記事

本記事執筆の際に参考にしたオリジナルは英文の記事です。

タッチアイコンについて知りたいこと全て

2011年3月2日

「タッチアイコン」は、モバイルデバイスやタブレットのファビコンです。それらを Web ページに追加するのは簡単で、HTML を使用してこれがどのように機能するかをすでに知っていると思います。 

<!-- In its simplest form: -->
<link rel="apple-touch-icon" href="apple-touch-icon.png">

Apple が標準の <link rel=icon> を実装しないだけでなく、代わりにもっと冗長な独自のリンク関係を考え出すことを選択したのは残念です。ただし、Android 用 Chrome v31+ はこの構文をサポートしています。次のように使用します。 

<link rel="icon" sizes="196x196" href="apple-touch-icon.png">

そのような HTML が見つからない場合、Chrome for Android は代わりに Apple タッチアイコンにフォールバックします。更新：Chrome 30+では、これは当てはまりません。通常返される404ページがすべてのモバイル帯域幅使用量の3〜4％を消費していたため、apple-touch-icon-* が自動的にフェッチされなくなりました。ただし、当面は、適切な <link> HTML が存在する場合でもダウンロードされます。

Apple は、iOS 1.1.3以降タッチアイコンをサポートしています。 奇妙なことに、Android 2.1以降でも apple-touch-icon をサポートしています（いくつかの癖があります）。

カスタムタッチアイコンを指定していない Web ページの場合、代わりにページのサムネイルスクリーンショットが使用されます。Android にはデフォルトのアイコンがあり、一部のシステムでは、ファビコンが利用可能な場合はファビコンにフォールバックします。

ファンシーな効果

iOS は、アイコンにいくつかの視覚効果を自動的に追加して、ホーム画面の組み込みアイコンと調整します（アプリケーションアイコンの場合と同様）。 具体的には、iOS は次を追加します。

  • 丸い角
  • 影を落とす
  • 反射する輝き

iOS 2.0以降では、precomposed キーワードを使用して、これらの効果の追加を防ぐことができます。 

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

rel 属性は HTML でスペースで区切られた値のリストを受け入れるため、理論的には、追加の <link> 要素を必要とせずに iOS 1のエフェクトを追加して通常のアイコンにフォールバックできるはずです。 

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

しかし、実際にはそのようには機能しません。スペースで区切られた値の手法を使用している場合、iOS 4.2は宣言全体を無視しているようです。

常に事前に作成されたアイコンを使用することをお勧めします。アイコンを完全に制御でき、Android 2.1がサポートする唯一の種類のアイコンです。iOS 7以降、タッチアイコンに特殊効果は適用されなくなったため、iOS 7以降のみを気にする場合は、precomposed を使用する必要はありません。

さまざまなアイコンサイズ

iOS ヒューマンインターフェイスガイドラインの[アイコンと画像サイズ]セクションには、次のアイコンを作成する必要があると記載されています。

  • 1×ディスプレイを備えた iPad および iPad Mini モデルの76×76ピクセルのサイズのもの。
  • iPhone 4s、iPhone 5、iPhone 6(2倍のディスプレイを備えている)の場合、120×120ピクセルのサイズのもの。
  • 2倍ディスプレイを備えた iPad および iPad Mini モデルの場合は152×152ピクセルのサイズのもの。
  • iPhone 6 Plus(3倍のディスプレイ)用に180×180ピクセルのサイズのもの。

更新（2013年6月）：iOS 7の時点で、Retina ディスプレイ iPhone の推奨タッチアイコンサイズは114×114ピクセルから120×120ピクセルに増加しました。Retina ディスプレイ iPad のアイコンサイズは、144×144ピクセルから152×152ピクセルに増加しました。この投稿はそれを反映するように更新されました。

更新（2014年9月）：iOS 8とiPhone 6 Plus がリリースされたため、この投稿はもう一度更新されました。

1つの高解像度アイコンを作成し、それをすべてのデバイスに使用することは完全に可能です。実際、これは Apple がそれを行う方法です。画面が小さい、またはディスプレイの解像度が低いデバイスは、アイコンのサイズを自動的に変更します。欠点は、これらのデバイスが大きな高品質の画像をロードする一方で、はるかに小さなファイルでも同様に機能することです。これは帯域幅を浪費し、サイトがホーム画面に追加されるたびにエンドユーザーのパフォーマンスに悪影響を及ぼします。

幸い、iOS 4.2では、sizes 属性を使用して、デバイスの解像度ごとに複数のアイコンを指定できます。 

<!-- For non-Retina (@1× display) iPhone, iPod Touch, and Android 2.1+ devices: -->
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png"><!-- 57×57px -->
<!-- For the iPad mini and the first- and second-generation iPad (@1× display) on iOS ? 6: -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon-72x72-precomposed.png">
<!-- For the iPad mini and the first- and second-generation iPad (@1× display) on iOS ? 7: -->
<link rel="apple-touch-icon-precomposed" sizes="76x76" href="apple-touch-icon-76x76-precomposed.png">
<!-- For iPhone with @2× display running iOS ? 6: -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-icon-114x114-precomposed.png">
<!-- For iPhone with @2× display running iOS ? 7: -->
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="apple-touch-icon-120x120-precomposed.png">
<!-- For iPad with @2× display running iOS ? 6: -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="apple-touch-icon-144x144-precomposed.png">
<!-- For iPad with @2× display running iOS ? 7: -->
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="apple-touch-icon-152x152-precomposed.png">
<!-- For iPhone 6 Plus with @3× display: -->
<link rel="apple-touch-icon-precomposed" sizes="180x180" href="apple-touch-icon-180x180-precomposed.png">
<!-- For Chrome for Android: -->
<link rel="icon" sizes="192x192" href="touch-icon-192x192.png">

ここでは、いくつかの簡単なルールが適用されます。

  • デバイスの推奨サイズに一致するアイコンがない場合は、推奨サイズよりも大きい最小のアイコンが使用されます。
  • 推奨サイズよりも大きいアイコンがない場合は、最大のアイコンが使用されます。
  • 複数のアイコンが適切な場合は、precomposed キーワードを持つアイコンが使用されます。

しかし、それはより複雑になります。iOS の4.2未満は、単に sizes 属性を無視するため、上記のコードスニペットは次のように解釈されます。 

<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png"><!-- 57×57px -->
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-72x72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-76x76-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-114x114-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-120x120-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-144x144-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-152x152-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-180x180-precomposed.png">

これらのシステムでは、ドキュメントの最後の値のみが使用されます。この場合、それが最大のアイコンです。見方によっては、アイコンの順序を逆にした方がよい場合があります。 

<!-- For Chrome for Android: -->
<link rel="icon" sizes="192x192" href="touch-icon-192x192.png">
<!-- For iPhone 6 Plus with @3× display: -->
<link rel="apple-touch-icon-precomposed" sizes="180x180" href="apple-touch-icon-180x180-precomposed.png">
<!-- For iPad with @2× display running iOS ? 7: -->
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="apple-touch-icon-152x152-precomposed.png">
<!-- For iPad with @2× display running iOS ? 6: -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="apple-touch-icon-144x144-precomposed.png">
<!-- For iPhone with @2× display running iOS ? 7: -->
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="apple-touch-icon-120x120-precomposed.png">
<!-- For iPhone with @2× display running iOS ? 6: -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-icon-114x114-precomposed.png">
<!-- For the iPad mini and the first- and second-generation iPad (@1× display) on iOS ? 7: -->
<link rel="apple-touch-icon-precomposed" sizes="76x76" href="apple-touch-icon-76x76-precomposed.png">
<!-- For the iPad mini and the first- and second-generation iPad (@1× display) on iOS ? 6: -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon-72x72-precomposed.png">
<!-- For non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png"><!-- 57×57px -->

このように、古い iOS バージョンは、最大のアイコンではなく最小のアイコンをダウンロードします。そのため、sizes 属性（iOS 4.2以降）をサポートしていない限り、すべてのデバイスに最大のアイコンを強制する代わりに、@sizes がサポートされていない限り最小のアイコンを提供するようになりました。つまり、現在、グレースフルデグラデーションではなくプログレッシブエンハンスメントを使用しています:)

疑わしい場合は、常にこのスニペットを使用してください。ほぼすべての iOS バージョンとデバイス、および可能な限り多くの異なる Android バージョンをサポートしているため、サイトにタッチアイコンを追加するための最も堅牢な方法です。

Android 2.3(Gingerbread)を実行している Nexus One でこれをテストしてもらいましたが、@sizes もサポートされていないようです。ただし、動作は古い iOS バージョンとは異なります。最後の <link> 要素の @href 値を使用する代わりに、rel="apple-touch-icon" または rel="apple-touch-icon-precomposed" で最初の <link> 要素の値を使用します。上記のコードスニペットの場合、これが利用可能な最大のアイコンです。

更新(2013年3月)：Android デバイスでさらにいくつかのテストをクラウドソーシングしました。提案されたスニペットを使用すると、Galaxy Nexus の Android 4.1.xと4.2.xはどちらも、デフォルトの Android ブラウザを使用してブックマークを追加している限り、57×57pxのアイコンを取得します。Chrome 内からブックマークすると、タッチアイコンが無視されます。これは Chrome 27で修正されています。このバグは、Android 4.0.xを実行している Samsung I9100 Galaxy SII デバイスにも存在します。 更新（2013年7月）：このコミットの時点で、Chrome for Android はデフォルトで apple-touch-icon(-precomposed).png を要求しなくなりました（つまり、そのようなアイコンが HTML ソースから参照されていない場合）。

HTMLは見ません

HTML でアイコンが指定されていない場合、iOS Safari は Web サイトのルートディレクトリで、apple-touch-icon または apple-touch-icon-precomposed プレフィックスが付いたアイコンを検索します。たとえば、デバイスの適切なアイコンサイズが57×57ピクセルの場合、iOS は次の順序でファイル名を検索します。

  1. apple-touch-icon-57x57-precomposed.png
  2. apple-touch-icon-57x57.png
  3. apple-touch-icon-precomposed.png
  4. apple-touch-icon.png

そうです。iOS の場合、解像度固有のアイコンを複数使用する場合でも、HTML を使用してサイトにタッチアイコンを追加する必要はありません。すべての HTML ページにある独自の <link rel="apple-touch-icon"> 要素のボートロードにアディオスと言ってください。 アイコンのさまざまなバージョンを作成し、正しいファイル名を使用してルートに配置するだけです。(favicon.ico、誰か？)

では、何が必要ですか？

  • 非 Retina iPhone および iPod Touch（@1xディスプレイ）の場合は、apple-touch-icon-57x57-precomposed.png または apple-touch-icon-57x57.png。
  • iPad mini および iOS≦6 の第1世代および第2世代 iPad（@1xディスプレイ）の場合は、apple-touch-icon-72x72-precomposed.png または apple-touch-icon-72x72.png。
  • iPad mini および iOS≧7 の第1世代および第2世代 iPad（@1xディスプレイ）の場合は、apple-touch-icon-76x76-precomposed.png または apple-touch-icon-76x76.png。
  • apple-touch-icon-114x114-precomposed.png または apple-touch-icon-114x114.png for iPhone 4 +（@2xディスプレイ付き）iOS≦6;
  • iOS≧7 の iPhone 4 +（@2xディスプレイ付き）の場合は、apple-touch-icon-120x120-precomposed.png または apple-touch-icon-120x120.png。
  • iPad 3+の場合は apple-touch-icon-144x144-precomposed.png または apple-touch-icon-144x144.png（@2xディスプレイ付き）。
  • iPad 3+の場合は apple-touch-icon-152x152-precomposed.png または apple-touch-icon-152x152.png（@2xディスプレイ付き）。
  • iPhone 6 Plus の場合は apple-touch-icon-180x180-precomposed.png または apple-touch-icon-180x180.png（@3xディスプレイ付き）。
  • touch-icon-192x192.png for Chrome for Android;
  • 他のすべて（おそらく Apple 以外のデバイスを含む）のフォールバックとしての apple-touch-icon-precomposed.png および apple-touch-icon.png。

互換性を最大化するために、apple-touch-icon.png と apple-touch-icon-precomposed.png の両方を含めることをお勧めします。iOS 1と BlackBerry OS 6は、事前に作成されたアイコンをサポートしていません。(Android 2.1は合成済みアイコンのみをサポートしていることに注意してください。)ファイルを複製する必要がないように、書き換えルールを使用できます。

残念ながら、HTML なしのアプローチは、ネイティブの Android ブラウザ(2.3 Gingerbread, 3 Honeycomb, 4.1 Jelly Bean でテスト済み)では機能しませんが、4.2 Jelly Bean のデフォルトブラウザで機能するとの報告があります。 私はまだ BlackBerry OS 6をテストすることができませんでした。必要に応じて、私の Web サイトでこの手法をテストできます。このページのブックマークをホーム画面に保存して、カスタムタッチアイコンが表示されるかどうかを確認します。あなたが見つけたものを私に知らせてください！

概要

では、どのテクニックを使用するのでしょうか？それはあなた次第です。

  • Android のサポートが必須の場合は、HTML を使用する必要があります。「さまざまなアイコンのサイズ」セクションにある最後のコードスニペットを使用することをお勧めします。
  • iOS だけが気になる場合は、HTML を使用しないアプローチを使用することを強くお勧めします。
  • 怠惰で、Android、レガシー iOS バージョン、またはパフォーマンスをあまり気にしない場合は、180×180pxのアイコンを1つ使用して、apple-touch-icon-precomposed.png という名前を付けて、あなたのウェブサイトのルートに配置します。
, 編集
コメントを投稿