最新のブラウザでは、アイコン、アドレスバーの色、さらにカスタムタイルの追加など、特定のコンポーネントを容易にカスタマイズできます。このようなシンプルな調整によって、サイトの使用頻度やリピート率が高まります。
最新のブラウザでは、アイコン、アドレスバーの色、さらにカスタムタイルの追加など、特定のコンポーネントを容易にカスタマイズできます。このようなシンプルな調整によって、サイトの使用頻度やリピート率が高まります。
優れたアイコンとタイルを提供する
ユーザーがウェブページにアクセスすると、ブラウザは HTML からアイコンを取得しようとします。ブラウザのタブ、最近使ったアプリの切り替え機能、新しい（または最近アクセスした）タブページなど、アイコンは多くの場所に表示されます。
高品質の画像を提供するとサイトを認識しやすくなるため、ユーザーが容易にサイトを見つけることができます。
すべてのブラウザに完全に対応するには、いくつかのタグを各ページの <head> 要素に追加する必要があります。
<!-- icon in the highest resolution we need it for -->
<link rel="icon" sizes="192x192" href="icon.png">
<!-- reuse same icon for Safari -->
<link rel="apple-touch-icon" href="ios-icon.png">
<!-- multiple icons for IE -->
<meta name="msapplication-square310x310logo" content="icon_largetile.png">
Chrome と Opera
Chrome と Opera では icon.png を使用します。これはデバイスによって必要なサイズにスケーリングされます。自動スケーリングを防ぐには、sizes 属性を指定して追加のサイズを指定することもできます。
Safari
Safari では、rel 属性 apple-touch-icon を持つ <link> タグを使用して、ホーム画面のアイコンを指定します。
<link rel="apple-touch-icon" href="touch-icon-iphone.png">
apple-touch-icon には、180 ピクセルまたは 192 ピクセルの正方形の不透明な PNG が最適です。
sizes 属性を使用して複数のバージョンを含めることはおすすめしません。
これまで iOS 版 Safari では、視覚効果の追加を避けるために -precomposed キーワードが考慮されていましたが、iOS 7 以降では必要なくなりました。
Internet Explorer と Windows Phone
Windows 8 の新しいホームスクリーンでは、固定サイトの 4 種類のレイアウトをサポートするために、4 つのアイコンが必要です。特定のサイズをサポートしない場合は、関連するメタタグを省略できます。
<meta name="msapplication-square70x70logo" content="icon_smalltile.png">
<meta name="msapplication-square150x150logo" content="icon_mediumtile.png">
<meta name="msapplication-wide310x150logo" content="icon_widetile.png">
Internet Explorer のタイル
Microsoft の「固定サイト」と回転「ライブタイル」は、他の実装をはるかに超えており、このガイドの範囲外です。詳しくは、MSDN のライブタイルの作成方法をご覧ください。
ブラウザ エレメントの色
さまざまな meta 要素を使用して、ブラウザとプラットフォームの要素をカスタマイズできます。一部のプラットフォームやブラウザでのみ動作するものもありますが、これらを使用するとユーザー エクスペリエンスが大幅に向上します。
Chrome、Firefox OS、Safari、Internet Explorer、Opera Coast では、メタタグを使用して、ブラウザに加えてプラットフォームのエレメントの色を設定できます。
Chrome と Opera 用の meta タグによるテーマ カラー
Android 版 Chrome のテーマカラーを指定するには、メタテーマカラーを使用します。
<!-- Chrome, Firefox OS and Opera -->
<meta name="theme-color" content="#4285f4">
Safari 固有のスタイル
Safari ではステータスバーのスタイルを指定し、起動画像を設定することができます。
起動画像を指定する
デフォルトでは、Safari は読み込み中に空白の画面を表示し、複数の読み込み後に、アプリの前の状態のスクリーンショットを表示します。これを防ぐには、Safari が明示された起動画像を表示するように、rel=apple-touch-startup-image でリンクタグを追加します。例:
<link rel="apple-touch-startup-image" href="icon.png">
画像は、対象デバイスの画面に固有のサイズにするか、そうでなければ使用されません。詳しくは、Safari のウェブ コンテンツ ガイドラインをご覧ください。
Apple のドキュメントではこのトピックはほとんど取り上げられませんが、開発者コミュニティでは、高度なメディア クエリを使用して、すべての端末を対象にする方法を考案しました。これによって適切なデバイスを選択し、正しいイメージを指定することができます。tfausak の gist の好意により、ここに具体的な解決策を示します。
ステータスバーの外観を変更する
デフォルトのステータスバーの外観は、black または black-translucent に変更できます。black-translucent では、ステータスバーがフルスクリーン コンテンツの上に押し下げられるのではなく、フロート表示されます。レイアウトの高さは高くなりますが、上部が見えなくなります。必要なコードは以下のとおりです。
<meta name="apple-mobile-web-app-status-bar-style" content="black">
black-translucent を使用したスクリーンショット
black を使用したスクリーンショット