【HTML】
iPhoneのホーム画面アイコンはファビ
コンとは別物
（apple-touch-icon）

by

PCのChromeでタブにアイコンを出すだけなら、HTMLに一行書けば済みます。

<link rel="icon" href="favicon.ico">Code language: HTML, XML (xml)

rel="icon" は「このページの代表アイコン」をブラウザに伝える属性です。
ChromeなどPCブラウザはこれを読んでタブにアイコンを表示します。1

ところが、iPhoneで「ホーム画面に追加」したときのアイコンは、この指定を参照しません。

関連記事

1. iOS Safariが見ているもの

iOS Safariはホーム画面アイコンの取得に rel="apple-touch-icon" という別の属性を使います。
指定がないと、Safariはページのスクリーンショットからアイコンを自動生成しようとします。
結果としてぼんやりした画面キャプチャがアイコンになるため、見栄えが崩れます。2

<link rel="apple-touch-icon" sizes="180x180" href="./apple-touch-icon.png">Code language: HTML, XML (xml)

sizes="180x180" は画像が180ピクセル四方であることをブラウザに伝えます。
iPhoneの高解像度ディスプレイはホーム画面アイコンに大きめの画像を要求するので、GoogleのLighthouseも180×180または192×192ピクセルを推奨しています。3

2. 2種類を並べる理由

PCタブとiPhoneホーム画面の両方に対応したいなら、次のように2行書きます。

<link rel="icon" type="image/x-icon" href="./favicon.ico">
<link rel="apple-touch-icon" sizes="180x180" href="./apple-touch-icon.png">Code language: HTML, XML (xml)

1行目の type="image/x-icon" はMIMEタイプで、ファイルの種類をブラウザに伝えます。
ICO形式のファビコンを指定するときに付ける属性です。
href="./favicon.ico" の ./ はHTMLファイルと同じ階層を指します。

2行目はiPhoneとiPad向けです。
Appleのドキュメントでも apple-touch-icon を使ってホーム画面アイコンを指定する方法が説明されており、端末に合うサイズが自動選択されます。
なお、apple-touch-icon.png という名前でサイトのルートディレクトリに置いておくと、HTMLでの指定がなくてもiOSが自動的に検出します。4

3. ICOファイルをapple-touch-iconに使わないほうがいい理由

apple-touch-icon に favicon.ico をそのまま指定することは技術的には可能です。
ただし、Appleの例示では常にPNG画像が使われており、ICO形式はPCブラウザ向けのフォーマットなのでiOSが適切に処理しない場合があります。
180×180ピクセルのPNGを別途用意するほうが確実です。5

4. まとめ

指定表示される場所
rel="icon"PCブラウザのタブ・ブックマーク
rel="apple-touch-icon"iPhoneのホーム画面

「ブラウザのタブに出るアイコン」と「iPhoneのホーム画面に出るアイコン」は仕様上まったく別のものです。
両方きちんと表示させるには、ファイルも属性の指定も分けて書く必要があります。

  1. ファビコンはもともとMicrosoftのInternet Explorerがブックマーク（お気に入り）のアイコンとして導入し、2000年にW3CがHTML 4.0仕様として採択しました。2001年以降は各ブラウザのタブ表示に広まっています。 – The 2022 Guide to FavIcons for Nearly Everyone and Every Browser
  2. Lighthouseの調査によると、apple-touch-iconのチェックを通過しているサイトは全体の32%にとどまっています。多くのサイトがホーム画面アイコンへの対応を見落としている状況です。 – Apple Touch Icon for Website Tips — DOZRO
  3. 180×180ピクセルはiPhone 6 Plus以降のRetinaディスプレイを持つほぼすべての現行iPhoneに対応するサイズです。サイズが複数ある場合、iOSは端末に最も近いサイズを自動選択し、ぴったりのサイズがない場合は推奨サイズより大きいアイコンの中で最も小さいものを使います。 – Configuring Web Applications – Apple Developer
  4. ルート自動検出は便利ですが、Appleの仕様変更でリクエストされるファイル名が変わる可能性があります。明示的なlinkタグを書いておくほうが、ファイルの置き場所や命名を自由に管理できます。 – Use Apple touch icon – webhint documentation
  5. ICO形式はMicrosoftが開発したコンテナ形式で、16×16・32×32・48×48ピクセルなど複数サイズの画像を1ファイルにまとめて格納できます。すべてのブラウザが対応している反面、iOS向けには設計されていないフォーマットです。 – favicon.ico: File Format, Required Sizes and How to Create