ファビコンジェネレーター

単一のアイコンファイルは、ブラウザのタブでは16ピクセル、モバイルのホーム画面では180ピクセル、Androidのアプリドロワーでは最大512ピクセル、そしてWindowsのタスクバーのサムネイルにも対応しなければなりません — 解像度のルール、比率の扱い、背景の合成が根本的に異なる表面であり、どれも1つの理想的な元解像度を共有していません。歴史的にこのため、サイトはあらゆる場所でぼやけて見える低解像度の`favicon.ico`だけを送るか、モバイルとPWAのアイコンを完全にスキップするかのどちらかでした。1つのソースからすべてのサイズを生成し、まとめてパッケージ化することが、アイコンをどこかで許容できて他では間違っているのではなく、すべての場所で同時に鮮明かつ正確に見せる方法です。

Webマニフェストは関連するが異なる理由で存在します: それはAndroidとデスクトップのChromiumブラウザが「アプリをインストール」を提供し、インストール後にサイトを独自のアイコンと名前で表示できるようにするものです — 汎用の地球儀アイコンのブックマークとしてではなく。ファビコンとPWAアイコンはプラットフォームの異なる部分によって管理されているため、ここではシンプルなアイコンセットとマニフェストの両方が一緒に生成されます。

ブラウザのタブは、ファビコンの中で最も小さく、最も頻繁に見られるレンダリングであり、容赦がありません: 16×16ピクセルでは、1つの目立つ形にせいぜい2つ分のスペースしかなく、1文字か1数字を超えるテキストのスペースはほとんどありません。通常のサイズでは洗練されて見える複数要素を持つ完全なロゴは、タブサイズでは判別不能な染みになりがちです。それを認識可能にしていた細部が、レンダリングする残りのピクセルを単純に持たないためです。

最も信頼できる元画像は、無地または透明な背景の上の1つのグリフ、モノグラム、またはシンプルなアイコンで、生成される各サイズがきれいな縮小になるよう、理想的には512×512以上で提供されるものです。既存のロゴが複雑な場合、通常は全体のセットを縮小して一貫性を保つことを期待するよりも、モノグラム、シンボル、際立つ形など、1つの認識可能な要素を抽出または単純化する方が良い結果になります。

透明な背景のファビコンは、ブラウザタブのライトテーマとダークテーマの両方にきれいに適応します。これはデザイン自体がそれを必要としない限り正しい選択です。しかし一部の行き先はまったく透明度を使えません — 特にApple用タッチアイコンは、独自の角丸マスクが適用される前にiOSによって単色の背景の上に合成されます。そのため透明なソースは、他のどのiOSアプリも持つきれいなアイコンではなく、黒の上に浮かぶロゴを生成してしまいます。デフォルトの白や黒のままにするのではなく、ブランドカラーに合わせた単色の背景を事前に選ぶことで、アイコンが一部の表面でだけ正しいのではなく、すべての表面で意図的に見えるようになります。