ファビコン(favicon)を理解する

長くWebに触れていながら「GET ... favicon.ico 404 (Not Found)」等のfaviconのエラーを無視し続けてきました。なんだかよくわからないし、あってもなくてもいいオプション的なものという認識からだと思います。

今回、AndroidのGoogle ChromeでBloggerのページを「ホーム画面に追加」設定をした際に表示させるリンク画像を作りたいと思い、ようやくそれについて理解しましたので忘れないよう書き残しておきます。

ファビコンとは

MDNではFaviconをWebサイトのアドレス部に表示される16×16ピクセルのGIFまたはPNG、ICO形式の画像だとしています。また、現代のブラウザではそれはSSL通信を示すアイコンに置き換えられているとも説明しています。

語源はWikipedia:「Favicon」では「Favorite」と「Icon」の合成語だそうです。

要するに単なるアイコンです。

サイズとフォーマット

ファビコンをとりつきにくくしている要因にサイズとフォーマットの乱立があります。

先のWikipediaのリンク先にもありましたが、ファビコンは「お気に入り」にリストする際のアイコンとしてIE5の拡張機能として生まれたもので、現在では標準化されたものの後方互換のため様々な形式が残っています。また近年の環境にあわせて加わったものもあり、サイズやフォーマットは統一されていません。

ためしにfreefavicon.comで、ファビコンを生成してダウンロードしてみたところ、次のようなサイズとフォーマットがありました。

PNG形式画像で次のサイズ別にファイルが用意されていました。

• 16x16px
• 24x24px
• 32x32px
• 48x48px
• 57x57px
• 64x64px
• 72x72px
• 114x114px
• 120x120px
• 144x144px
• 152x152px
• 512x512px

またICO形式画像では、ひとつのファイルの中に次の複数のサイズが用意されていました。

• 16x16px
• 32x32px
• 48x48px
• 64x64px

複数のサイズを含んだアイコンファイルの確認は「おきらく!アイコンエディタ」を利用させていただきました。ありがとうございました。動作OSにWindows10が載っていませんでしたが筆者の環境(Pro-32bit)ではインストールでき複数サイズの入ったICOファイルを読みだすことができました。

サイズの話に戻りますが、同様の別のサイト 「favicon generator」ではさらに多くの種類が出てきました。

表示環境によるファイルフォーマットの対応状況はWikipedia:favicon#File format supportに載っています。

設定方法

ファビコンを設置する際の基本的な記述方法は次の通りです。これをhead内に記述します。複数指定しておけばブラウザが最適なアイコンを採用してくれますが、それが失敗した場合は一番最後のアイコン設定が採用されます。

Aには画像ファイルへのリンクを指定します。絶対パスでも相対パスでもいいですが、絶対パスの際はドメインが表示するサイトと一緒である必要があります。また、Google Chromeではリテラシーに反する画像はファビコンとして表示されないそうです。

BにはAのリンクファイルとの関係性を設定します。ほかにもあるようですがGoogleガイドに設定できる値が載っています。通常のアイコンなら「icon」、iPhoneやAndroid用のリンク用のアイコンなら「apple-touch-icon」とすればいいでしょう。「shorcut icon」は古いバージョンのIE、「apple-touch-icon-precomposed」は古いバージョンのiOSの互換用設定となっています。

CにはMIMEタイプ(IANA メディアタイプ)を指定します。

Dには画像のサイズを設定します。たとえば、"16x16"、"32x32"とします。(xは小文字のエックスです)、ICOファイルを指定する場合はサイズは不要です。

これらも環境によって指定可能かどうかが変わってきます。Wikipedia:favicon#How to use等で確認ができます。

可能性のあるものすべてを記述するか、主なものだけにするかなどそれらは各々のサイトのポリシーによると思いますが、一例としては次のようになります。

SVGフォーマット

近年のブラウザではファビコンにSVGファイルを指定できるようになっています。画像をドットで表すGIFやPNGなどのラスタ形式とは違って、SVGは画像を式で表すベクタ形式のファイルです。

細かな描写には向きませんが、拡大縮小しても形が失われません。これを用いると少ない記述で、大きさの変化に対応できます。しかし、さきほどのHow to useにあるように、Safariに対しては通常の形では対応していません。SafariでSVG形式を使うにはrelの値にmask-iconという特殊なを指定します。この設定の最も悩ましいところは1色でしか表現できないことです。デフォルトで黒1色のアイコンとなりますが、オプションのcolorでその色を指定できます。

SVGファイルを利用する場合のタイプは「image/svg+xml」としsizesの指定は不要です。

SVGの作成方法

ベクタ形式の画像を作成できる有名なアプリにAdobe Illustratorがあります。また、無料ソフトにはInkscapeやLibre-Office Drawがあります。

Libre-Office Drawで作成するには次のようにします。

図形やフォントワーク等でアイコンを構成してください。通常の画像を挿入した場合はSVGの特性を生かせないので注意してください。もし画像としてアイコンを作成してありそれを使いたい場合は、Inkscapeの「ビットマップのトレース」等の機能使ってください。

アイコンができたら、「ファイル」→「エクスポート」を選択し「ファイルの種類」をSVGにして保存します。

Bloggerでファビコンの設定

Bloggerでは残念ながらSVG形式のファビコンが利用できません。SVG画像をアップロードできないのに加え、できたとしてもファイルが置かれる場所はBloggerのドメインとは違うためです。

ただ通常の形式なら対応可能です。メニューの「設定」→「基本設定」より「ファビコン」を選択し、画像をアップロードします。

すると今までBloggerのアイコンだったルートディレクトリのfavicon.icoが書き変わります。

ただしこれはブラウザのタブやアドレスバーに表示されるファビコンにのみ有効です。また、プレビュー時もアイコンは反映されません。

デスクトップ用のリンク画像(apple-touch-icon)の指定の方は、Android10+Google Chromeの環境でしか調べていませんが、同じドメインという縛りがないようです。PNG画像をBloggerにアップロードした際に表示される絶対アドレスをlinkタグに指定してみたところ意図したようにアイコンが変化しました。

ちなみにGoogle ChromeからAndoridのデスクトップにショートカットを作るには、右上の点 から「ホーム画面に追加」を押します。

もし追加を押してもショートカットが作成されない場合はGoogle Chromeアプリに「ストレージ」アクセス「権限」が設定されていない可能性があります。