ファビコンとは、ブラウザでWebサイトを閲覧しているときに、ブラウザタブの左上等に表示されるアイコンのことです。
何気なく目にすることが多いファビコンは、サイトの印象付けや認知に効果を発揮します。
弊社でも最近ファビコンをリニューアルいたしました。
スマートフォンが普及し、Webサイトの閲覧方法が多様化すると共に、ファビコンの設置方法や種類も多様化しています。
最低限、どのファビコンをサイトに設置すればいいんだろう…と悩んだことはありませんか？
今回は、基本的に必要なファビコンの設定とサイトに設置されているファビコンの簡単な確認方法をご紹介します！
基本のファビコン設定
ファビコンはPC・スマートフォンだけでなくブラウザによって少しずつサイズ等が異なります。
そのサイズ等の違いを合計すると２０種類以上。さすがにこれを全て設定するのは手間もかかる上に管理も大変です。
しかし、必ず全て用意する必要はありません。
通常のWebサイトで、あると安心できるファビコンは次の通り。これをhtmlの<head>タグ内に記述します。
この記述をもとに必要に応じて追加する形が良いと思います。
- <head>
- ~
- <link rel="icon" href="/favicon.ico" sizes="any">
- <link rel="apple-touch-icon" href="/apple-touch-icon.png">
- <link rel="icon" href="/icon.svg" type="image/svg+xml">
- <link rel="manifest" href="/manifest.webmanifest">
- ~
- </head>
そして準備するファイルは次の６種類。
・favicon.ico
・apple-touch-icon.png
・icon.svg
・manifest.webmanifest
・icon-512.png
・icon-192.png
ファイルは全てルートディレクトリに保存します。
基本のファビコン設定について詳しく解説
続いて基本のファビコン設定について、構成と準備するファイルを一つ一つ見ていきましょう。
1 .ico形式のファビコン
- <link rel="icon" href="/favicon.ico" sizes="any">
必要ファイルは 「favicon.ico」
Internet Explorer（IE）といった古いブラウザにも対応するための記述です。
ブラウザで他に用意したファビコンが対応できなかった場合も、最終的にこちらのファビコンが読み込まれます。
基本サイズは32×32px。.ico形式の画像です。複数は用意せず、基本は1つで大丈夫です。
2 アップルタッチアイコン
- <link rel="apple-touch-icon" href="/apple-touch-icon.png">
必要ファイルは 「apple-touch-icon.png」
ファビコン名称にもある通り、Apple製端末のタッチアイコン用の記述です。
Webクリップやホーム画面に追加した際にアイコンとして利用されます。
サイズは180×180pxがおすすめです。PNG形式の画像です。
他と異なりアイコン周りに多少の余白を設ける、背景色を入れることで見た目が良くなります。
公式ガイドラインには画像についてさらに詳しい解説があります。
興味のある方はぜひご確認ください。
3 SVG形式のファビコン
- <link rel="icon" href="/icon.svg" type="image/svg+xml">
必要ファイルは 「icon.svg」
ChromeやFireFoxといったモダンブラウザ用の記述です。
SVG形式の画像は拡大縮小しても画像品質が劣化しないベクター形式の画像です。
そのため、画像ファイル1つでブラウザごとに最適な状態でファビコンを表示できます。
名称は任意でわかりやすいものに設定します。
※また、SVG形式の画像が用意できない場合は、PNG形式の画像で代用します。
PNG形式の場合は、16×16px以上、256×256px程度を用意できるのが望ましいです。
4 Androidタッチアイコン
- <link rel="manifest" href="/manifest.webmanifest">
必要ファイルは 「icon-512.png と icon-192.png と manifest.webmanifest」
これはAndroid端末用の記述です。
ホーム画面追加時や、PWAの読み込み中に表示するためのアイコンとして利用されます。
サイズは512×512px と 192×192px です。PNG形式の画像です。
名称は任意でわかりやすいものに設定します。
また、別途必要な「manifest.webmanifest」はテキストエディタで下記のように記述して保存します。
- { "icons": [
- { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
- { "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" }
- ] }
基本のファビコン設定以外の指定を一部ご紹介
基本のファビコン以外の指定にも様々なものがあります。
例を一部ご紹介します。必要に応じて記述してください。
例１ Windows8 ピン留めサイトアイコン・タイトルカラー
- <meta name="msapplication-TileImage" content="/icon-144.png">
- <meta name="msapplication-TileColor" content="#ffffff">
Windows8やIE のサイトピン留め時に利用されるアイコンとタイトルカラーです。
Windows最新バージョンの11では利用されていない、IE はサポートが終了していることをふまえて必要な場合のみ記述することをおすすめします。
サイズは144px。PNG形式の画像です。また、タイトルカラーは任意で指定します。
例２ Safari用マスクアイコン
- <link rel="mask-icon" color="#ffffff" href="/mask-icon.svg">
Safariでページがピン留めされた時に利用されるアイコンです。
Safari12以降では通常のファビコンが利用できるようになっていることをふまえて必要な場合のみ記述することをおすすめします。
画像はSVG形式。サイトにあったカラーを指定します。
簡単な確認ツールのご紹介
サイトにファビコンを設置後は手持ちの端末等で確認します。
設置されているかまとめて確認したい時は、便利なオンラインツールを利用してください。
Check your faviconでは、サイトのURLを入力するだけで自分の設置状況を簡単に確認できます。
終わりに
ファビコンは適切に設置することでサイトの印象や認知に影響します。
ついつい設置を忘れてしまったり、大きさの割にちょっと手がかかりますが、きちんと設置することでより印象に残りやすいWebサイトになります。
この記事が、ファビコンについて今一度意識するきっかけになれば幸いです。
