ロゴはすでにあります。必要なのは、そのロゴを、ブラウザが期待する小さなアイコンファイルの山、つまりfavicon.ico、特定サイズのいくつかのPNG、ウェブマニフェスト、そしてそれらをつなぐHTMLに変えることです。その変換は機械的で、何もインストールせずに1分ほどでできます。
落とし穴は、すべてのロゴが優雅に縮むわけではないことです。ですからこれは、速い道筋と、16ピクセルで潰れてしまうロゴの直し方の両方を扱います。
短い手順
- ロゴを正方形の画像で用意する。理想は512×512以上、透明か単色の背景で。
- ファビコンジェネレーターに放り込む。
- 生成されたセットをダウンロードし、ファイルをサイトのルートに置く。
- 提供されたHTMLスニペットを
<head>に貼る。
これで全部です。ジェネレーターはfavicon.ico、16・32・48・180・192・512のPNG、webmanifest、そして正確な<link>タグを出力するので、6つの画像を手で切り抜いたり、マニフェストの構文を推測したりしません。
まずロゴを準備する — 品質はここで勝ち負けが決まる
ファビコンはブラウザのタブで16×16に住みます。そのサイズを生き延びられないディテールは無駄です。ここで2分使えば、結果はどこでも鮮明に見えます。
正方形にする。 ファビコンは正方形です。横長のロゴはレターボックスにされるか潰されます。最も見分けやすい要素、たいていマークか1文字に切り抜き、正方形のフレームに中央配置しましょう。
ワードマークを落とす。 会社名を丸ごとはタブのサイズで判読できません。「Acme Corporation」は灰色の汚れになります。シンボルか1文字を残し、タブのタイトルに名前を担わせましょう。
両方のテーマに対してコントラストを確認する。 ブラウザのタブは明るいものと暗いものがあります。濃紺のアイコンは暗いタブで消え、淡いアイコンは明るいタブで消えます。マークが1つのフラットな色なら、その色が両方で読めることを確かめましょう。控えめな縁取りや小さな単色の背景チップが役立ちます。
余白を残す。 アイコンが端に詰まらないよう、正方形の内側に少し余白を足しましょう。あらゆる枠でよりバランスよく見えます。
大きく始める。 512×512（以上）の元画像は、ジェネレーターに縮小するきれいなディテールを与えます。小さなロゴを先に拡大すると、ぼやけを焼き込むだけです。
透明か単色の背景か？
どちらも機能します。欲しい見た目次第です。
- 透明は、タブやホーム画面の背景を透けさせます。きれいで現代的で、明暗の周囲に適応します。マークが独特の形のとき最適です。
- 単色の背景チップ（マークの後ろの色付き角丸四角）は、後ろに何があってもアイコンが読めることを保証します。ほとんどのアプリアイコンがこうしており、ロゴが細いか低コントラストなら安全な選択です。
迷ったら、ブランドカラーの単色チップが頑健な選択肢です。合った背景に消えることが決してありません。
ダウンロード後：ファイルの置き場所
ジェネレーターはファイルのセットとスニペットをくれます。配置のルールは2つでまかなえます。
favicon.icoはサイトのルート（/favicon.ico）に置きます。ブラウザとWindowsは、<link>タグがなくても名前を頼りにそこを探します。- それ以外は、HTMLスニペット内のパスが合っている限りどこに置いても構いません。ほとんどの人はすべてルートに置き、スニペットをそのまま貼ります。
あとは<head>のスニペットだけです。アイコンのリンク、apple-touch-icon、マニフェストの参照。貼り、デプロイし、強制更新すれば、タブにロゴが見えるはずです。
なぜブラウザでやるのか？
ロゴが決して端末から出ないからです。全工程、つまり画像を読み、あらゆる寸法にリサイズし、.icoを詰め、マニフェストを書くこと、それがCanvasを使ってブラウザ内でローカルに起きます。何もサーバーにアップロードされず、登録も透かしもなく、初回アクセスのあとツールはオフラインで動きます。まだ公開していないかもしれないブランド素材にとって、それを第三者のサーバーから遠ざけておくのが賢明な既定です。
ロゴが正方形で、高コントラストで、小さくても判読できれば、フルセットの生成は簡単な部分です。