ファビコンとは何ですか？それは何のためですか？
ファビコンは、ブラウザのタブ、ブックマーク、検索結果のスニペットに表示されるバッジ（アイコン）です。
Faviconは、Webアプリケーションで重要な役割を果たします。検索結果でのサイトの外観を改善し、サイトの認知度を高め、ユーザーがブックマークやタブで目的のページをすばやく見つけるのに役立ちます。
さらに、ユーザーはサイトのページを電話のホーム画面に追加したり、Webアプリケーションとして保存したりできます。この場合、ファビコンを使用すると、他の多数のアプリケーションの中からサイトをすばやく見つけることができます。
ファビコンに使用するフォーマットは何ですか？
以前は、ICOがメインフォーマットとして使用されていました。このフォーマットの特徴は、その多次元性です。このファイルには、いくつかのアイコンサイズを保存できます。ICOはPNG形式に置き換えられました。ICOは引き続きサポートされていますが、最近のほとんどのブラウザーは、より軽量なPNGアイコン形式を選択しています。一部のブラウザはICOファイルで正しいアイコンを選択できないため、低解像度のアイコンが誤用されます。
この記事ではどのプラットフォームをカバーしますか？
- クラシックデスクトップブラウザ
- Android Chrome
- iOSサファリWebクリップ
- マックOS
- ウィンドウズ
クラシックデスクトップブラウザ
クラシックデスクトップから始めましょう。
先に述べたように、ICOフォーマットは今日では時代遅れですが、これはあなたがそれを忘れる必要があるという意味ではありません。 ICO形式では、アイコンを保存して、ファビコンを正しく表示できる場合があります。たとえば、IE 11より前では、PNG形式はサポートされていません。したがって、IE10以下のバージョンでは、古いICO形式を使用する必要があります。この場合、ICO形式とPNG形式を次のように組み合わせて使用することをお勧めします。
<link type="image/x-icon" rel="shortcut icon" href="…/favicon.ico">
<link type="image/png" sizes="16x16" rel="icon" href="… /favicon-16x16.png">
<link type="image/png" sizes="32x32" rel="icon" href="…/favicon-32x32.png">
<link type="image/png" sizes="96x96" rel="icon" href="…/favicon-96x96.png">
<link type="image/png" sizes="120x120" rel="icon" href="…/favicon-120x120.png">マルチサイズのICOアイコンを作成するには、icoconvertコンバータサービスを使用できます。アイコンを生成するときは、16x16、32x32、48x48（最高解像度のアイコン）の寸法を選択します。
PNGアイコンのサイズは、16x16、32x32、96x96、120x120です。なぜ120x120アイコンなのですか？Yandex Helpは、このサイズのアイコンを使用できることを通知します。rel（リソースタイプ）
の値に注意を払うと、ほとんどのブラウザーでアイコンが考慮され、IEブラウザーでショートカットアイコンが考慮されます。
Android Chrome
Androidは、192x192のPNGアイコンが表示されることを期待しています。アルファチャネル（透明度）をお勧めします。
<link type="image/png" sizes="192x192" rel="icon" href="…/android-icon-192x192.png">Android Chromeは、Webアプリマニフェストに依存しています。どのサイトでも、マニフェストを使用して一部のアイコンにリンクできます。
マニフェストファイル自体はjson形式であり、次の行で宣言されています。
<link rel="manifest" href="…/manifest.json">Android Chromeのマニフェストファイルは、RealFaviconGeneratorサービスを使用して生成できます。
{
"name": "My Application",
"short_name": "App",
"description": "Application OK",
"lang": "ru-Ru",
"start_url": "/",
"scope": "/",
"display": "standalone",
"theme_color": "#ffffff",
"background_color": "#ffffff",
"icons": [
{
"src": "\/res\/img\/icons\/android-icon-72x72.png",
"sizes": "72x72",
"type": "image\/png",
"density": "1.5"
},
{
"src": "\/res\/img\/icons\/android-icon -96x96.png",
"sizes": "96x96",
"type": "image\/png",
"density": "2.0"
},
{
"src": "\/res\/img\/icons\/android-icon-144x144.png",
"sizes": "144x144",
"type": "image\/png",
"density": "3.0"
},
{
"src": "\/res\/img\/icons\/android-icon-192x192.png",
"sizes": "192x192",
"type": "image\/png",
"density": "4.0"
},
{
"src": "\/res\/img\/icons\/android-icon-512x512.png",
"sizes": "512x512",
"type": "image\/png"
}
]
}アイコンのサイズは次のとおりです。PNG形式で72x72、96x96、144x144、192x192、512x512、透明度を推奨します。アイコンは透明な背景を持つことができるので、色はマニフェスト使用して指定することができるBACKGROUND_COLOR。
電話でユーザーがブラウザページをホーム画面に保存するオプションがあることはキャンセルする必要があります。それは単にあなたのサイトのページへのリンクになり、android-icon-192x192.pngという名前のアイコンがプルアップされます。これはあなたのコードで宣言されています。
マニフェストをサイトに接続すると、ページを開くときに、サイトをアプリケーションとして保存するように求められる場合があります。この場合、同じアイコンを視覚的に宣言できます（android-icon-192x192.png）または、ニーズに合わせてアプリケーションのアイコンを再設計し、マニフェストで適切な寸法で宣言します。
iOSサファリWebクリップ
iOS Safariは、アップルタッチアイコンが表示されることを期待しています。これは180x180のPNGアイコンであり、アルファチャネルはありません（透明度はありません）。アイコンの角は自動的に丸められるため、アップルタッチアイコンを簡単に作成できます。
IOSユーザーは、ホーム画面にサイトを追加することもでき、アプリのように見えます。このようなリンクはアイコンとして表示され、Webクリップと呼ばれます。
次のアイコンサイズは、iPhoneやiPadなどのさまざまなデバイスをサポートするように設計されています。
<link sizes="57x57" rel="apple-touch-icon" href="…/apple-touch-icon-57x57.png">
<link sizes="60x60" rel="apple-touch-icon" href="…/apple-touch-icon-60x60.png">
<link sizes="72x72" rel="apple-touch-icon" href="…/apple-touch-icon-72x72.png">
<link sizes="76x76" rel="apple-touch-icon" href="…/apple-touch-icon-76x76.png">
<link sizes="114x114" rel="apple-touch-icon" href="…/apple-touch-icon-114x114.png">
<link sizes="120x120" rel="apple-touch-icon" href="…/apple-touch-icon-120x120.png">
<link sizes="144x144" rel="apple-touch-icon" href="…/apple-touch-icon-144x144.png">
<link sizes="152x152" rel="apple-touch-icon" href="…/apple-touch-icon-152x152.png">
<link sizes="180x180" rel="apple-touch-icon" href="…/apple-touch-icon-180x180.png">コードで、rel = "apple-touch-icon"属性を追加し、sizesを使用してサイズを指定します。
サイトにデバイスの推奨サイズであるサイズのアイコンがない場合は、最も近い大きいアイコンが使用されます。メインのアップルタッチアイコンは180x180アイコンです。他のデバイスはアイコンを混在させることができます。
アイコンを作成するときは、パディングを忘れないでください。それらはすべての側面で少なくとも4pxでなければなりません。これは、iOSアプリのアイコンの角が丸くなっているため、アイコンがクリッピングしないようにするためです。アップルタッチアイコンを
探しているのはiOSデバイスだけではないことに注意してください..。Android Chromeなどの一部のブラウザでは、他の高解像度PNGアイコンよりも一般的であるため、アップルタッチアイコンを使用する場合があります。
マックOS
Mac OSでは、状況はまったく異なります。ユーザーがサイトをデスクトップに保存しようとすると、サイトアイコンの代わりに、htmlコードを含むページのスクリーンショットが表示されます。
アイコンを追加するには、SVG形式を使用する必要があります。これにより、アイコンマスクを作成できます。このアイコンは、Safariでタブを固定すると表示されます。
<link color="#e52037" rel="mask-icon" href="…/safari-pinned-tab.svg">コードにrel = "mask-icon"属性を追加する必要があります。SVGアイコン自体は黒である必要があります。アイコンの色は、color = "＃e52037"属性で設定されます。
SVGアイコンは、モノクロの固定タブ（フォーカスなし）で使用されます。ホバー（固定タブ-フォーカス）すると、アイコンは「color」属性を持つ色でペイントされます。「color」属性の色もタッチバーに渡されます。
アイコンを作成するときは、既存のシャドウをすべて削除し、フラットでシンプルにする必要があります。「Union」および「Flatten」操作を使用して、アイコンを単一のオブジェクトに簡略化できます。これらの操作は、Figmaで簡単に適用できます。
マスクアイコンの作成に目を閉じると、ブラウザにはサイトのドメインの最初の文字が表示されるだけです。
ウィンドウズ
Windowsの場合、うまくいくには少し手間がかかります。
IE10以前のバージョンでは、PNGがサポートされていなかったため、ICO形式を使用する必要があります。
IE11とWindows8.1の登場により、サイトをライブタイルとして固定できるようになりました。小さいタイルの場合はデフォルトのファビコンが使用されますが、大きいタイルと広いタイルの場合は特定のサイズの画像を設定する必要があります。これは、サイトマークアップにメタデータタグを追加するか、browserconfig.xml（ブラウザ構成ファイル）を作成することで実行できます。
大きなタイルのWebサイトマークアップにメタデータタグを追加する例：
<meta name="msapplication-TileImage" content="…/mstile-144x144.png">
<meta name="msapplication-square70x70logo" content="…/mstile-70x70.png">
<meta name="msapplication-square150x150logo" content="…/mstile-150x150.png">
<meta name="msapplication-wide310x150logo" content="…/mstile-310x310.png">
<meta name="msapplication-square310x310logo" content="…/mstile-310x150.png">この行で、タイルの背景色を指定します。
<meta name="msapplication-TileColor" content="#2b5797">Webサイトの名前を指定できます。
<meta name="application-name" content="My Application">browserconfig とは何ですか？これは、MetroUIに対応するさまざまなアイコンをリストしたXMLドキュメントです。
マークアップにbrowserconfigファイルを含めるには、次の行を先頭に追加します。
<meta name="msapplication-config" content="…/browserconfig.xml">ファイル自体は次のようになります。
<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
<msapplication>
<tile>
<square70x70logo src="…/mstile-70x70.png"/>
<square150x150logo src="…/mstile-150x150.png"/>
<square310x310logo src="…/mstile-310x310.png"/>
<wide310x150logo src="…/mstile-310x150.png"/>
<TileColor>#ffc40d</TileColor>
</tile>
</msapplication>
</browserconfig>browserconfigのファイルは、異なるタイルサイズの画像を定義します。
高ピクセル密度の画面をサポートするには、より大きな画像サイズを使用することをお勧めします。
次のリストは、さまざまなサイズを使用するためのガイドラインを示しています。
- 小-70x70（推奨サイズ：128x128）
- 中-150x150（推奨サイズ：270x270）
- ワイド-310x150（推奨サイズ：558x270）
- 大-310x310（推奨サイズ：558x558）
たとえば、70x70の画像の場合、推奨サイズは128x128です。これは、背景が透明な128x128の画像を作成する必要があることを意味し、その名前はmstile-70x70になります。残りの寸法についても同じようにします。
ファビコンの準備
アイコンをサイトのルートフォルダに追加する前に、アイコンを準備する必要があります。アイコンの元のサイズはそれほど大きくありませんが、品質の低下を最小限に抑えて圧縮できます。
たとえば、私の場合、すべての画像の重みは200kbでしたが、圧縮後は50kbでした。画像の品質はほとんど変わりません。便利な画像圧縮サービスを利用できます。iloveimgを使用しました。
結論
ウェブサイトのマークアップの接続シーケンス：
<link type="image/x-icon" rel="shortcut icon" href="…/favicon.ico">
<link type="image/png" sizes="16x16" rel="icon" href="… /favicon-16x16.png">
<link type="image/png" sizes="32x32" rel="icon" href="…/favicon-32x32.png">
<link type="image/png" sizes="96x96" rel="icon" href="…/favicon-96x96.png">
<link type="image/png" sizes="120x120" rel="icon" href="…/favicon-120x120.png">
<link type="image/png" sizes="192x192" rel="icon" href="…/android-icon-192x192.png">
<link sizes="57x57" rel="apple-touch-icon" href="…/apple-touch-icon-57x57.png">
<link sizes="60x60" rel="apple-touch-icon" href="…/apple-touch-icon-60x60.png">
<link sizes="72x72" rel="apple-touch-icon" href="…/apple-touch-icon-72x72.png">
<link sizes="76x76" rel="apple-touch-icon" href="…/apple-touch-icon-76x76.png">
<link sizes="114x114" rel="apple-touch-icon" href="…/apple-touch-icon-114x114.png">
<link sizes="120x120" rel="apple-touch-icon" href="…/apple-touch-icon-120x120.png">
<link sizes="144x144" rel="apple-touch-icon" href="…/apple-touch-icon-144x144.png">
<link sizes="152x152" rel="apple-touch-icon" href="…/apple-touch-icon-152x152.png">
<link sizes="180x180" rel="apple-touch-icon" href="…/apple-touch-icon-180x180.png">
<link color="#e52037" rel="mask-icon" href="…/safari-pinned-tab.svg">
<meta name="msapplication-TileColor" content="#2b5797">
<meta name="msapplication-TileImage" content="…/mstile-144x144.png">
<meta name="msapplication-square70x70logo" content="…/mstile-70x70.png">
<meta name="msapplication-square150x150logo" content="…/mstile-150x150.png">
<meta name="msapplication-wide310x150logo" content="…/mstile-310x310.png">
<meta name="msapplication-square310x310logo" content="…/mstile-310x150.png">
<meta name="application-name" content="My Application">
<meta name="msapplication-config" content="…/browserconfig.xml">
<link rel="manifest" href="…/manifest.json">
<meta name="theme-color" content="#ffffff">コードの最後の行「theme-color」を使用すると、アドレスバーと通知バーを任意の色でペイントできます。コンテンツ値は色を設定します。RealFaviconGenerator
を使用して、Webサイトのアイコンを確認します。このサービスは、さまざまなプラットフォームでアイコンがどのように表示されるかを示し、どこでどのような問題が発生する可能性があるかを示します。
さらに、このサービスは、必要なサイズ、アイコン形式、およびコードを生成できます。ただし、さまざまなデバイスで正しく表示するには、推奨されるすべてのサイズが存在するかどうかソースコードを確認する必要があります。