有効な apple-touch-icon が指定されていません
bookmark_borderbookmark
コレクションでコンテンツを整理
必要に応じて、コンテンツの保存と分類を行います。
iOS Safari のユーザーがプログレッシブ ウェブアプリ(PWA)をホーム画面に追加すると、表示されるアイコンは Apple タップアイコンと呼ばれます。ページの <head>
に <link rel="apple-touch-icon" href="/example.png">
タグを追加すると、アプリで使用するアイコンを指定できます。ページにこのリンクタグがない場合、iOS はページ コンテンツのスクリーンショットを撮影してアイコンを生成します。つまり、アイコンをダウンロードするように iOS に指示すると、より洗練されたユーザー エクスペリエンスが実現します。
Lighthouse の Apple タップアイコンの監査が失敗する仕組み
Lighthouse は、<head>
に <link rel="apple-touch-icon" href="/example.png">
タグがないページを報告します。
Lighthouse は、アイコンが実際に存在するかどうか、アイコンのサイズが正しいかどうかはチェックしません。
Apple タップアイコンを追加する方法
ページの <head>
に <link rel="apple-touch-icon" href="/example.png">
を追加します。
<!DOCTYPE html>
<html lang="en">
<head>
…
<link rel="apple-touch-icon" href="/example.png">
…
</head>
…
/example.png
は、アイコンの実際のパスに置き換えます。
優れたユーザー エクスペリエンスを提供するために、次の点に注意してください。
- アイコンのサイズは 180x180 ピクセルまたは 192x192 ピクセル
- 指定したアイコンのパスが無効
- アイコンの背景が透明でない
リソース
特に記載のない限り、このページのコンテンツはクリエイティブ・コモンズの表示 4.0 ライセンスにより使用許諾されます。コードサンプルは Apache 2.0 ライセンスにより使用許諾されます。詳しくは、Google Developers サイトのポリシーをご覧ください。Java は Oracle および関連会社の登録商標です。
最終更新日 2024-04-16 UTC。
[[["わかりやすい","easyToUnderstand","thumb-up"],["問題の解決に役立った","solvedMyProblem","thumb-up"],["その他","otherUp","thumb-up"]],[["必要な情報がない","missingTheInformationINeed","thumb-down"],["複雑すぎる / 手順が多すぎる","tooComplicatedTooManySteps","thumb-down"],["最新ではない","outOfDate","thumb-down"],["翻訳に関する問題","translationIssue","thumb-down"],["サンプル / コードに問題がある","samplesCodeIssue","thumb-down"],["その他","otherDown","thumb-down"]],["最終更新日 2024-04-16 UTC。"],[],[]]