デザイナーから新しいブランドアイデンティティが届きました。ワードマーク、独立したアイコンマーク、そしてフルカラーシステムが揃った、洗練された SVG です。そのマークをサイトの head に流し込み、タブをリロードすると、16x16 ではなんだかぼやけた塊にしか見えない。ブランドロゴ向けの favicon ジェネレーターには、単なるリサイズ以上のことが求められます。極端に小さいスケールでも、マークのシルエットを保ち続ける必要があるのです。
Mzu favicondl は、その変換パイプラインを 1 か所で完結させます。Photoshop や ImageMagick、そして中途半端な ICO スクリプトを併用する代わりに、ブランドマークをアップロードすれば、HTML・manifest・Apple Touch へのデプロイまで一気に揃ったアイコンパッケージを取得できます。
なぜブランドロゴは favicon スケールで崩れるのか
ブランドマークは 32px〜512px のサイズを前提にデザインされています。一方、favicon はブラウザタブで 16x16、ブックマークバーでは最小 8x8 まで縮小されます。そのスケールでは、2px 未満の線は消え、アンチエイリアスのかかったカーブはつぶれ、付属テキストは判読不能になります。
WHATWG 仕様では rel="icon" がアイコンリソースをリンクする標準メカニズムとして定義されていますが、どのファイル形式やサイズが極小ダウンサイジングに適しているかは規定されていません。その判断は、そして責任は、あなたとジェネレーター側に委ねられています。
Mzu favicondl の使い方
ワークフローはシンプルです。ソースアセットをアップロードし、出力サイズを選び、ICO・PNG・Apple Touch 各種を含む zip パッケージをダウンロードします。
- ブラウザで Mzu favicondl を開きます。
- ブランドマークを SVG（推奨）、PNG、または JPEG でアップロードします。
- 出力サイズを選択します。最低限必要なのは 16x16、32x32、180x180 です。
- 背景の扱いを設定します。透過、ブランドカラー、またはアダプティブから選べます。
- 生成されたパッケージをダウンロードし、ファイルをプロジェクトに配置します。
出力サイズをすべて通してもベクター形状が保たれるため、SVG を起点にすることを推奨します。ラスター画像をソースにすると、大きいアイコンを生成する際にアップスケールが必要になり、高 DPI ディスプレイ上で目に見える劣化が出やすくなります。PNG のマークしかない場合は、画像から favicon を作る方法を解説した ガイド で、事前のソース準備手順を確認できます。
ブランド用途で重要な機能
汎用 favicon ジェネレーターは、すべてのアイコンを同じ扱いで処理します。Mzu favicondl では、既存のアイデンティティシステムにアイコンを合わせたいときに効く、ブランド専用オプションを用意しています。
背景の制御
多くのブランドマークは白い背景では問題なく見えますが、Safari の着色タブ背景や Chrome のダークモードツールバーでは崩れて見えます。ジェネレーターでは、透明部分をブランドのプライマリカラーで塗りつぶしたり、SVG メディアクエリを使ってライト/ダーク両方のバリアントを書き出したりできます。
マルチサイズ ICO 出力
レガシーな ICO ファイルは、複数の解像度を 1 つのコンテナに格納します。Mzu favicondl は 16x16、32x32、48x48 を単一の favicon.ico にまとめます。ICO は WHATWG の rel="icon" 定義に基づき、古いブラウザで今でも自動要求されるフォーマットです。
Apple Touch と manifest バリアント
iOS のホーム画面には 180x180 の透過なし PNG が必要です。Android の Web manifest では 192x192 と 512x512 のバリアントと、maskable セーフゾーンが求められます。ジェネレーターはこれらを 1 回のダウンロードで出力するため、2 つ目のツールを使う必要はありません。
ブランド一貫性を保つためのプロのヒント
- まず 16x16 で確認する。 そのサイズで判読できなければ、どんなに HiDPI スケールしても救えません。favicon ではなく、マークを設計し直しましょう。
- 細部にこだわりすぎない。 極細の線、グラデーション、小さなテキストは 32px 以下では潰れます。生成前に取り除いてください。
- セーフゾーンに余白を取る。 ブラウザはアイコンの端を予測できない形でクロップします。コアとなるマークはキャンバスの中央 80% 内に収めてください。
- ブランドカラーを正確に合わせる。 ジェネレーターのスポイトを使うか、16 進数値を直接ペーストしてください。RGB で 1 ずれただけでも、タブ strip では目立ちます。
- ダークモード用 SVG を生成する。 SVG 内で
prefers-color-schemeメディアクエリを使えば、ユーザーがテーマを切り替えた際に自動で色をスワップできます。
サイトへの組み込み方
パッケージをダウンロードしたら、HTML の head に明示的な rel="icon" タグでリンクします。
<link rel='icon' type='image/svg+xml' href='/favicon.svg'><link rel='icon' type='image/png' sizes='32x32' href='/favicon-32x32.png'><link rel='icon' type='image/x-icon' href='/favicon.ico'><link rel='apple-touch-icon' sizes='180x180' href='/apple-touch-icon.png'>複数のアイコンを配信するときは、記述順が影響します。ブラウザはパースした最後の rel="icon" 宣言を採用するため、優先したい形式（通常は SVG）を後ろに置いてください。これは WHATWG の rel="icon" 仕様 の優先順位パターンに沿っています。
成果物の検証
公開前に必ずセルフチェックを行ってください。シークレットウィンドウでサイトを開き（多くの favicon キャッシュを回避できます）、以下を確認します。
- ライト UI とダーク UI 双方でのブラウザタブの 16x16 表示。
- ブラウザが対応する最小サイズでのブックマークバー表示。
- iOS と Android での「ホーム画面に追加」プレビュー。
- Google 検索結果スニペット。Google はガイドライン上、8x8 ピクセル以上の正方形 favicon を必須としています。
クロスプラットフォームを網羅的に確認したい場合は、favicon 互換性テストのチェックリスト を一通り実行してください。開発環境では問題なく見えても本番で壊れる、ダークモード不備、SVG パースのクセ、キャッシュ問題などを拾い上げられます。
ブランドロゴ向けの favicon ジェネレーターに求められているのは、単なるリサイズではありません。本来のデザイナーが想定していなかった極端なスケールでも、ブランドのアイデンティティを保つことです。Mzu favicondl は、出力フォーマット、背景制御、ブランド志向のオプションを一通り揃え、タブ strip でもブランドらしさを失わない favicon を公開するための機能を提供します。