アイコンとブラウザの色

最新のブラウザでは、アイコンやアドレスバーの色などの特定のコンポーネントを簡単にカスタマイズできます。また、カスタム タイルなどの追加も可能です。これらの簡単な調整により、エンゲージメントを高め、ユーザーをサイトに呼び戻すことができます。

Paul Bakaus

最新のブラウザでは、アイコンやアドレスバーの色などの特定のコンポーネントを簡単にカスタマイズできます。また、カスタム タイルなどの追加も可能です。このような簡単な調整で、エンゲージメントを高め、ユーザーをサイトに呼び戻すことができます。

優れたアイコンとタイルを提供する

ユーザーがウェブページにアクセスすると、ブラウザは 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 のメタテーマ カラー

Android 版 Chrome のテーマカラーを指定するには、メタテーマカラーを使用します。

<!-- Chrome, Firefox OS and Opera -->
<meta name="theme-color" content="#4285f4">

Safari 固有のスタイル設定

Safari では、ステータスバーのスタイルを設定したり、起動時の画像を指定したりできます。

起動イメージを指定する

デフォルトでは、Safari は読み込み中に空白の画面を表示し、複数回の読み込み後にアプリの以前の状態のスクリーンショットを表示します。これを防ぐには、rel=apple-touch-startup-image を指定したリンクタグを追加して、明示的な起動画像を表示するように Safari に指示します。次に例を示します。

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

画像は、対象デバイスの画面の特定のサイズにする必要があります。そうでない場合、画像は使用されません。詳しくは、Safari Web Content Guidelines をご覧ください。

このトピックに関する Apple のドキュメントは少ないですが、デベロッパー コミュニティは、高度なメディアクエリを使用して適切なデバイスを選択し、正しい画像を指定することで、すべてのデバイスをターゲットにする方法を見つけました。tfausak の gist に掲載されている、有効なソリューションを以下に示します。

ステータスバーの外観を変更する

デフォルトのステータスバーの外観は、black または black-translucent に変更できます。black-translucent を使用すると、ステータスバーは全画面表示コンテンツを押し下げるのではなく、その上にフローティング表示されます。これにより、レイアウトの高さは増えますが、上部が遮られます。必要なコードは次のとおりです。

<meta name="apple-mobile-web-app-status-bar-style" content="black">