サイトやアプリを公開するとき、地味に面倒なのがアイコンの用意です。ブラウザのタブに出るfavicon、スマホのホーム画面に追加したときのアイコン、SNSでシェアされたときの画像——それぞれ求められるサイズや形式が違います。適当に1枚だけ用意すると、タブでは潰れて読めない、iOSのホーム画面では背景が黒くなる、といった問題が起きます。この記事では、faviconとアプリアイコンを一式そろえる手順を、元画像の準備から生成、書き出し、メタタグの設置まで順番に紹介します。
1. 小さく表示されても読める元画像を作る
まず最も大事なのが元画像の設計です。faviconはブラウザのタブで16〜32ピクセル程度でしか表示されません。この大きさでは、細い線や小さな文字はほぼ潰れて判別できなくなります。そのため、ロゴをそのまま縮小するのではなく、「小さくても認識できる要素」だけを取り出したシンプルなマークにするのが定石です。文字を入れるなら1〜2文字まで、線は太めに、色数は少なく、背景とのコントラストを高く——この4点を意識すると失敗しません。もう一つ重要なのが余白です。多くの環境でアイコンは角丸や円形に切り抜かれるため、四隅ぎりぎりまで要素を置くと切れてしまいます。中央に寄せて、周囲に1割程度の余白を確保しておくと、どの形に切り抜かれても破綻しません。まずは正方形（512×512以上）の元画像を1枚用意します。
2. favicon を生成する
元画像ができたら、favicon を生成します。Favicon Generator に画像をドロップすると、ブラウザ用の各サイズを書き出せます。現在の環境で必要になるのは、主にブラウザのタブ用の小さいサイズと、ブックマークや高解像度ディスプレイ用の少し大きいサイズです。従来は複数サイズを1つにまとめた .ico 形式が必須でしたが、現在の主要ブラウザはPNGにも対応しているため、PNGを複数用意する方法が一般的になっています。ただし、古い環境や一部の挙動を考慮して .ico も置いておくと確実です。生成したら、実際にブラウザのタブに表示させて、意図した形が判別できるかを必ず確認してください。この段階で「潰れて読めない」と分かったら、手順1に戻って元画像を単純化する方が早く解決します。
この手順で使うツール
Favicon Generator
絵文字・テキストから favicon PNG を即生成・ダウンロード
3. アプリ用の各サイズを一括で書き出す
Webだけでなく、スマホのホーム画面追加やデスクトップアプリの配布を考えるなら、さらに多くのサイズが必要になります。iOS用のapple-touch-icon（180×180が基準）、Androidやマニフェスト用の192×192・512×512、Windowsアプリ用のアイコンなど、用途ごとに要求サイズが異なります。アイコン一括リサイズを使うと、1枚の元画像から16〜512ピクセルまでの各サイズをまとめて書き出し、ZIPでダウンロードできます。1サイズずつ手作業で書き出すと、リサイズのたびに品質がばらついたり、サイズを取り違えたりしがちですが、一括処理ならその心配がありません。なお、iOSのホーム画面アイコンは透過部分が黒く塗られるため、背景を透明にせず不透明の色で塗りつぶしておくのが安全です。
この手順で使うツール
アイコン一括リサイズ
アイコン画像を各サイズに一括リサイズ
4. HTMLにメタタグを設置する
画像を用意しただけでは表示されません。HTMLのheadに、どのファイルをどの用途で使うかを記述します。基本は favicon 用の link rel="icon"、iOS用の link rel="apple-touch-icon"、そしてPWA向けの manifest への link です。加えて、テーマカラーを指定する meta name="theme-color" を入れておくと、モバイルブラウザのアドレスバーの色が揃い、統一感が出ます。Meta Tag Generator では、これらの基本的なメタタグに加えて、タイトルや説明文、OGPなどをまとめて生成できるので、抜けを防げます。設置後、キャッシュが強く効く領域のため、ブラウザに古いアイコンが残ることがあります。変更が反映されない場合は、キャッシュを消すか、ファイル名を変えて参照し直すと確実です。
この手順で使うツール
Meta Tag Generator
title / OGP / Twitter Card の meta タグを GUI で生成・コピー
5. 各環境で実際の見え方を確認する
最後に、実際の表示を確認します。チェックすべきなのは、ブラウザのタブ（小さく潰れていないか）、ブックマーク一覧、スマホのホーム画面に追加したときの見た目（角丸で切れていないか、背景が黒くなっていないか）、そしてSNSでシェアしたときのカードです。特にホーム画面アイコンは、iOSとAndroidで角丸の形が異なるため、両方で確認できると理想的です。また、ダークモードのブラウザでは、背景が濃い色のタブに暗いアイコンを置くと見えにくくなります。明暗どちらの背景でも判別できる配色になっているかも、この段階で見ておくと安心です。ここまで確認して問題がなければ、アイコン周りは完成です。
この手順で使うツール
OG Tag Preview
URLを入力してSNSシェア時のOGPプレビューを確認
まとめ
アイコンの用意は「小さくても読める元画像を作る → faviconを生成する → 各サイズを一括書き出しする → メタタグを設置する → 実環境で確認する」の流れで進めれば、抜けなく揃えられます。特に「16pxで潰れない単純さ」「切り抜きを想定した余白」「iOSでは透過を避ける」の3点は、後から作り直しになりやすいポイントなので、最初の設計段階で押さえておくと効率的です。