サイトやアプリを公開するとき、地味に面倒なのがアイコンの用意です。ブラウザのタブに出るfavicon、スマホのホーム画面に追加したときのアイコン、SNSでシェアされたときの画像——それぞれ求められるサイズや形式が違います。適当に1枚だけ用意すると、タブでは潰れて読めない、iOSのホーム画面では背景が黒くなる、といった問題が起きます。この記事では、faviconとアプリアイコンを一式そろえる手順を、元画像の準備から生成、書き出し、メタタグの設置まで順番に紹介します。
1. 小さく表示されても読める元画像を作る
まず最も大事なのが元画像の設計です。faviconはブラウザのタブで16〜32ピクセル程度でしか表示されません。この大きさでは、細い線や小さな文字はほぼ潰れて判別できなくなります。そのため、ロゴをそのまま縮小するのではなく、「小さくても認識できる要素」だけを取り出したシンプルなマークにするのが定石です。文字を入れるなら1〜2文字まで、線は太めに、色数は少なく、背景とのコントラストを高く——この4点を意識すると失敗しません。もう一つ重要なのが余白です。多くの環境でアイコンは角丸や円形に切り抜かれるため、四隅ぎりぎりまで要素を置くと切れてしまいます。中央に寄せて、周囲に1割程度の余白を確保しておくと、どの形に切り抜かれても破綻しません。まずは正方形（512×512以上）の元画像を1枚用意します。
2. ロゴがまだ無いなら、文字か絵文字で仮の favicon を作る
公開を急いでいてロゴがまだ無い場合は、サイト名の頭文字1〜2文字や絵文字1つで仮の favicon を作っておくと、タブが無地のまま公開されるのを避けられます。Favicon Generator は文字・絵文字と背景色・文字色から 16・32・48・96・180px の PNG を作るツールです（画像を読み込む機能はありません）。16px の表示をその場で確かめられるので、「この色の組み合わせでタブに置いて読めるか」を試すのにも使えます。サイズの意味は、16・32 がブラウザのタブ、48・96 が Google の検索結果（Google は 48px の倍数を求めています）、180 が iOS のホーム画面です。すでにロゴの画像がある場合は、この手順は飛ばして手順3に進んでください。
この手順で使うツール
Favicon Generator
絵文字・テキストから favicon PNG を即生成・ダウンロード
3. 元画像から一式を書き出す（favicon.ico・apple-touch-icon・マニフェスト用）
必要なファイルは用途ごとに決まっています。タブ用の favicon.ico（16・32・48px を1つにまとめた形式）、Google の検索結果用の 96px、iOS のホーム画面用の apple-touch-icon（180×180）、Android・PWA のマニフェスト用の 192×192 と 512×512 です。アイコン一括リサイズに元画像をドロップして「サイト用の一式も入れる」を選んでおくと、ZIP の site フォルダに favicon.ico・favicon-32x32.png・favicon-96x96.png・apple-touch-icon.png・icon-192.png・icon-512.png が決まった名前で入ります。元画像が正方形でなくても引き伸ばさず、縦横比を保って中央に置きます。注意したいのは iOS で、apple-touch-icon の透明な部分は黒く塗られます。透過のロゴでも背景が黒くならないよう、ツールでは iOS 用アイコンの背景色を選べるようにしてあり、ほかのサイズは透過のまま書き出します。
この手順で使うツール
アイコン一括リサイズ
アイコン画像を各サイズに一括リサイズ
4. head にタグを書き、マニフェストを置く
画像を置いただけでは、iOS のホーム画面やマニフェストのアイコンは使われません。head に、どのファイルを何に使うかを書きます。必要なのは link rel="icon"（favicon.ico と PNG）、link rel="apple-touch-icon"、link rel="manifest"、それとアドレスバーの色を決める meta name="theme-color" です。手順3の ZIP には、この5種類のタグを並べた head.html と、192・512 のアイコンを登録した site.webmanifest が入っています。site.webmanifest の name・short_name はサイト名に、theme-color と theme_color・background_color はサイトの色に書き換えてから使ってください。画像ファイルはサイトのルートに置くと、タグのパスをそのまま使えます。なお、ブラウザは /favicon.ico を head に書かれていなくても取りに行くので、favicon.ico だけはルートに置いておくのが安全です。もう一つ、favicon はキャッシュが強く残ります。差し替えても変わらない場合は、ファイル名を変えるか ?v=2 のように付けて参照し直すと反映されます。
この手順で使うツール
アイコン一括リサイズ
アイコン画像を各サイズに一括リサイズ
5. 各環境で実際の見え方を確認する
最後に、実際の表示を確認します。チェックすべきなのは、ブラウザのタブ（小さく潰れていないか）、ブックマーク一覧、スマホのホーム画面に追加したときの見た目（角丸で切れていないか、背景が黒くなっていないか）、そしてSNSでシェアしたときのカードです。特にホーム画面アイコンは、iOSとAndroidで角丸の形が異なるため、両方で確認できると理想的です。また、ダークモードのブラウザでは、背景が濃い色のタブに暗いアイコンを置くと見えにくくなります。明暗どちらの背景でも判別できる配色になっているかも、この段階で見ておくと安心です。SNS のカードに出るのは favicon ではなく og:image の画像なので、公開後に OG Tag Preview で URL を入れ、カードの画像とタイトルが意図どおりかを確かめておきます。ここまで確認して問題がなければ、アイコン周りは完成です。
この手順で使うツール
OG Tag Preview
URLを入力してSNSシェア時のOGPプレビューを確認
まとめ
アイコンの用意は「小さくても読める元画像を作る →（ロゴが無ければ仮の favicon を作る）→ favicon.ico・180・192・512 を一式書き出す → head のタグとマニフェストを置く → 実環境で確認する」の流れで進めれば、抜けなく揃えられます。特に「16pxで潰れない単純さ」「切り抜きを想定した余白」「apple-touch-icon は透過にしない」の3点は、後から作り直しになりやすいポイントなので、最初の設計段階で押さえておくと効率的です。