ファビコンを作成

アイコン1つが9つのファイルになった理由

一式に含まれる各ファイルは、それぞれ特定の何かがそのファイルだけを読み込むために存在します。16・32・48を収めたfavicon.icoは、今でもブラウザがサイトのルートで最初に探すファイルであり、古いソフトウェアの多くが最初に確認するファイルです。favicon-16x16.pngとfavicon-32x32.pngは、今のブラウザがタブ用に優先するファイルです。ちょうどのサイズのPNGは拡大縮小より見た目がよいからです。180ピクセルのapple-touch-icon.pngはiOSがホーム画面に置くアイコンです。透過に対応していないため、四隅が黒くならないよう単色の背景に合成しています。android-chrome-192x192.pngと512x512.pngは、インストールされたプログレッシブウェブアプリがランチャーアイコンとスプラッシュ画面に使うもので、site.webmanifestで指定します。

大きなPNGを1つ用意してすべてに使い回すのは最もよくある手抜きですが、どこでもうまくいきません。ブラウザは16ピクセルを描くために0.5 MBをダウンロードし、iOSは透過のルールを無視してロゴを黒い四角の上に置き、ランチャーアイコンはプラットフォームが適用するマスクで切り取られます。一式が面倒なのは、読み込む側がそれぞれ細かく要求するからにほかなりません。

HTMLスニペットは画像と同じくらい重要です。ブラウザはこれらのファイルのほとんどを自分では見つけられません。慣例で見つかるのはルートのfavicon.icoだけなので、linkタグでつなぐ必要があり、マニフェストにも専用のタグが要ります。スニペットはルート相対パスを使っているため、ファイルをウェブのルートに置けばそのまま動作します。サブフォルダーに置く場合は、スニペットとマニフェストの両方のパスを調整してください。

まず16ピクセルでの見え方を前提にデザインしましょう。そのサイズで表現できるのは1つの形とせいぜい2色です。文字もグラデーションも細部も入らず、ロゴタイプ全体などはもってのほかです。512ピクセル以上の正方形ではっきりした高コントラストの元画像、またはSVGを使うと、最もきれいな一式になります。プレビューでは16pxの表示を良く見せず正直に表示します。後でがっかりするのはそのサイズだからです。正方形でない元画像は、トリミングや引き伸ばしではなく透明な余白で正方形に補われます。

ほかの目的には

ここで生成する一式は、実用上必要な最新の基本セットです。Windowsのタイル画像、Safariのピン留めタブ用マスクアイコン、Microsoftのbrowserconfig、古いAppleのサイズなど、細かいものまですべて必要なら、RealFaviconGeneratorが対応しており、公開後のサイトもチェックしてくれます。これはこのツールにはできない、本当に便利な機能です。

ビルドパイプラインで使うなら、アイコンを手作業で作ること自体がそもそも向いていません。favicons、pwa-asset-generator、sharpをベースにしたフレームワーク用プラグインなら、デプロイのたびに1つの元ファイルから一式を生成するので、ロゴを変えたときにアイコンだけ古いまま残る、ということが起きません。実際には必ずそうなるものです。