favicon pipelineとは? あらゆるアイコンサイズを生成する

favicon pipelineは、1枚のソース画像を、ブラウザ、モバイルのホーム画面、各種プラットフォームがそれぞれ期待する多数のアイコンファイルとサイズへと変換します。

最新のサイトに必要なのは1つのfaviconだけではありません。ブラウザタブ、ブックマーク、モバイルのホーム画面、さまざまなプラットフォーム向けに、異なるサイズと形式のアイコン群が必要です。それらをすべて手作業で作成するのは面倒でミスが起きやすい作業です。favicon pipelineは、buildの一環として1枚のソース画像から完全なセットを生成し、それらの一貫性を保ちます。

なぜこれほど多くのアイコンが必要なのか

ブラウザタブ用の、定番の小さなfavicon。
高解像度ディスプレイ向けの、より大きなPNGアイコン。
iOSのホーム画面用のApple touch icon。
web manifestから参照されるmaskableアイコン。

pipelineが行うこと

1枚の高解像度ソースから、ツールは必要な各サイズと形式を生成し、それらを最適化し、それらを参照するHTMLタグやmanifestエントリを出力します。1つの入力から、一貫した完全なセットが生成されます。

manifestとの関係

web manifestで宣言されるPWAアイコンは、同じアイコンセットの一部です。manifestにも供給するfavicon pipelineは、インストールされたアプリのアイコンとブラウザのfaviconが同期し続けることを保証します。

同期を保つ

ロゴを変更したのに一部のアイコンしか更新しないと、ユーザーには不揃いなセットが見えてしまいます。buildで1つのソースからすべてのアイコンを生成すれば、再生成を単一の繰り返し可能なステップにすることで、そうしたずれを防げます。

CI/CDにおけるfavicon pipeline

buildでジェネレーターを実行するということは、すべてのdeployが、cacheのためにhash付きファイル名で参照される、一貫した最適化済みアイコンセットを出荷することを意味します。CIはさらに、HTMLとmanifestが参照するすべてのアイコンが実際に出力されたかを検証でき、アイコン欠落のリグレッションがユーザーに届く前に検出できます。

重要なポイント

favicon pipelineは、1つのソースから必要なすべてのアイコンサイズと形式を生成します。
ブラウザのfaviconとPWAのmanifestアイコンを同期させます。
CIはジェネレーターを実行し、参照されているすべてのアイコンが出力されたか検証できます。