ファビコン（favicon）作成方法と設定について

しまこ

ブラウザのタブなどに表示されるfavicon（ファビコン）を正しく理解していますか？
今回は、favicon（ファビコン）について作成方法や記述方法などを詳しくご説明したいと思います。

ファビコンとは？

Webブラウザでページを開いた時、タブに表示されるアイコンの事です。
タブブラウザで複数のタブを開いた時に、ファビコンはページを識別する時の目印となります。
そのほかにも、スマートフォンでWebページを使用ブラウザの「お気に入り」や「ホーム画面」に設定した際にも表示されます。

ファビコン作成の注意点

何より優先することはシンプルなデザインにすることです。
ファビコンは小さく表示されるので、細かい複雑なデザインにしてもほとんど見えません。
ユーザーに判別してもらいにくくなり、ファビコンの意味を成さない状態になります。
どの程度シンプルにすれば良いのか、他サイトのファビコンを見ながら研究してみましょう。

また、ファビコンもアイコンも基本的に正方形で表示されるので、画像は正方形で作成します。
それぞれのパーツは長方形などでも問題ありませんが、この点を前提と意識しておいてください。
更に、Apple製品ではiOSやSafariの際、ファビコンの角が丸く表示されます。サイズいっぱいのデザインだと、角が削れて見た目が崩れてしまいます。
デザインする時には余白を作っておくのが大事です。

ファビコンの作成方法

ファビコン（favicon）は一般的に「16px × 16px」のサイズで使用されることが多いです。
ですが、表示される場所によっては「32px × 32px」や「24px × 24px」で使用されることもあります。

そのため、複数サイズの画像をひとつのファイルにまとめることができる「.ico形式」に変換し使用しましょう。
「.ico形式」の画像ファイルを使用することで、HTMLに記述する際に設定の手間が省けます。

ファビコン作成ツール

ファビコンを簡単に作成することができるツールについていくつかご紹介します。他にも、便利なツールはありますので、ぜひご自身でも調べてみてください。

ファビコンの設置方法

表示ブラウザが「Chrome・IE11・Firefox・Safari・Opera・Edge」の場合、以下のコードをHTMLのヘッダー部分に記述します。

<link rel="apple-touch-icon" sizes="180x180" href="./favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="./favicon/favicon-32x32.png">

使用するのは「favicon.ico」と「apple-touch-icon-180×180.png」の2つです。
画像の置き場所は状況やホームページの環境に応じて変更ください。

また、この書き方ではInternet Explorer8以前には対応できません。
現在、新しく作るホームページではほとんど対応が必要なケースはありませんが、もしInternet Explorer8以前への対応が必要な場合は、一行目を以下の通りに書き換えてください。

Windows8/10の設定

<meta name="msapplication-TileColor" content="#da532c">

msapplication-TileColorというのは、タイル部分の背景色になります。　任意のカラーコードで設定します。

Safariのページピンアイコン設定

<link rel="mask-icon" href="./favicon/safari-pinned-tab.svg" color="#5bbad5">

作成したsvg画像をこちらで読み込みます。svgは自動生成された「favicons.zip」に入っていないので、個別に書き出ししてください。

AndroidのGoogle推奨設定

<link rel="icon" type="image/png" sizes="16x16" href="./favicon/favicon-16x16.png">
<link rel="manifest" href="./favicon/site.webmanifest">

manifest.jsonのファイルは自動生成した「favicons.zip」に入っています。

<meta name="theme-color" content="#ffffff">

こちらはAndroidのChromeでのみ反映される「タブのテーマカラー」の設定です。
任意の色に設定できます。
何もしないより他のホームページと差別化できるので、細かい部分ですが是非設定してみましょう。
こちらもカラーコードで自由に設定ができます。

ユーザーの目をひくファビコンを設定することで、SEO効果の期待できますので、しっかりと理解して、どこまで対応するのかを判断し、潜在層の獲得のためにも正しく設置しておくことが重要です。

コラム