ファビコンは1つの場所だけで通用すればいいわけではない。ブラウザタブ、ブックマーク、iOSのホーム画面、そしてAndroidにインストールされたPWAのアイコンまで、それぞれの場面で異なるサイズと形式のファイルが求められる。
漢字一文字がファビコンとして機能する理由
アルファベット圏では頭文字1文字を色付き背景に乗せてロゴ代わりにする手法がよく使われるが、日本語ブランドの場合は漢字一文字（例えば「和」「音」「花」）がそのまま意味を持つロゴになる点が特徴的だ。ひらがなやカタカナに比べて画数が多い漢字でも、16×16ピクセルまで縮小すると線が潰れて判別しにくくなるため、なるべく画数の少ない漢字を選ぶのが実務上のコツになる。
<head>内の<link>タグの役割
各アイコン形式は、寸法を示すsizes属性とともに、それぞれ<link rel="icon">や<link rel="apple-touch-icon">タグでリンクされ、ブラウザは用意されたセットの中から表示コンテキストに最も適したものを選ぶ。
PWA向けのWeb App Manifest
プログレッシブウェブアプリにはさらに、JSON形式でアイコン一式・アプリ名・テーマカラーを列挙したsite.webmanifestファイルが必要だ — サイトがアプリとしてインストールされる際、Androidはまさにそこからホーム画面用のアイコンを取得する。
なぜ必要なのか
- 1枚の元画像から、必要なサイズのアイコン一式を生成する。
- <head>に貼り付けるための<link>タグのHTMLコードをすぐに手に入れる。
- モバイル端末のホーム画面に追加されたときにサイトが正しく表示されるか確認する。