ファビコン作成：ICO、PNGアイコン、マニフェスト

ファビコンは、ブラウザのタブ、ブックマーク、履歴、検索結果でサイト名の横に表示される小さなアイコンです。スマホでは、サイトを保存するとホーム画面に大きなバージョンが表示されます。わかりやすいアイコンがあれば、何十ものタブの中でもサイトを見つけやすく、プロらしく見えます。

場所によって必要なサイズと形式が違います。ブラウザは今もfavicon.icoを探し、Apple端末は180 pxのPNG、AndroidやインストールできるWebアプリはWebマニフェストのアイコンを読み込み、検索エンジンは48 px以上のアイコンを好みます。

必要なサイズ

ファビコンのサイズを一言ずつ説明すると、16と32 pxはブラウザのタブ、48 pxはWindowsと検索結果、180 pxはAppleタッチアイコン、192と512 pxはAndroidとWebアプリのマニフェスト用です。このツールはそのすべてに加え、ほかの用途向けに64・96・128・256・384 px版も作ります。

ロゴを追加します。理想は正方形で512×512ピクセル以上です。背景が透過したPNGかSVGがいちばんくっきり仕上がります。透過か単色の背景を選び、絵が端に触れているなら余白を足し、アプリ風のアイコンにしたいなら角を丸めます。プレビューには16・32・48・180 pxのアイコンが明るい背景と暗い背景の両方で表示されるので、実際のタブでの見え方を判断できます。

マニフェスト用にアプリ名とテーマカラーを入力し、「ファビコン一式をダウンロード」を押します。favicon.icoだけ、または512 pxのPNGだけをダウンロードすることもできます。

PNGから始める

PNGの画像からファビコンを作るなら、手持ちのいちばん大きなバージョンから始めましょう。大きな画像を縮小すれば小さなアイコンもくっきりしますが、小さな画像を拡大するとぼやけます。横長のロゴなら、16 pxでは文字が読めなくなるので、シンボルや頭文字だけを使うことを検討してください。

favicon.ico

favicon.icoファイルは、16・32・48 pxの画像を1つのファイルに収めるPNGからICOへの変換で作られます。最近のブラウザとWindowsはPNG圧縮のアイコンを読み込めるので、ファイルは小さく、輪郭もきれいなままです。

Apple端末

Appleタッチアイコンのサイズは180×180ピクセルです。iOSは透過部分を黒で塗りつぶすので、背景が透過の場合、このアイコンにはテーマカラーの背景が自動で付きます。

Androidとwebアプリ

site.webmanifestのアイコンは192と512 pxのPNGで、Android用のマスカブル版も含みます。Androidはアイコンを円や角丸の四角に切り抜くので、大事な部分はアイコンの中央80%以内に収めて、何も切れないようにしましょう。

パッケージを解凍し、ファイルをWebサイトのルートフォルダ（トップページと同じ場所）にアップロードします。次に、HTMLのコードをすべてのページのheadセクション、またはサイトのテンプレートにコピーします。このコードはICO、16と32 pxのPNG、Appleアイコン、マニフェストを読み込みます。

ホームページ作成サービスやCMSには、代わりにサイトアイコンの設定があることがよくあります。その場合は512 pxのPNGをそこにアップロードすれば、ほかのサイズはプラットフォームが自動で作ります。

困ったときは

アップロード後にファビコンが表示されないときは、ブラウザがキャッシュを使っている可能性があります。アイコンのURLを直接開いてから、ページをスーパーリロードするか、シークレットウィンドウで試してください。検索結果のアイコンが更新されるまで、検索エンジンでは数日から数週間かかることがあります。

シンプルに。16×16ピクセルでは、細い線や小さな文字は消えてしまいます。太いシンボル、1文字、またはロゴを簡略化したものを、強いコントラストで使いましょう。明るいプレビューと暗いプレビューの両方を確認してください。透過背景の暗いロゴは、ブラウザのダークテーマで見えなくなることがあります。背景色や明るい縁取りを付けるのはそのためにも有効です。

統一感も大切です。カラーピッカーで取得できるブランドと同じ色を使い、どのサイズでもひと目でわかるアイコンにしましょう。

画像はブラウザ内で処理され、アップロードされることはありません。SVGファイルは描画前にスクリプトと外部参照が取り除かれます。PNG、JPG、WebP、GIF、SVGの入力に対応しています。このツールは無料・回数無制限で、EnhancerPro のクレジットも使いません。

次のステップ

ロゴがピクセル画像しかないなら、画像からSVGへの変換ツールでベクター版を作れます。また、SVGからPNGへの変換ツールでベクターのロゴを好きなサイズで書き出せます。

ブラウザのタブ

パソコンのブラウザは、タブにたいてい16か32 pxのアイコンを表示し、高解像度の画面では32 px版を使います。ChromeとEdgeは、ショートカットや新しいタブのページに大きなPNGアイコンも使います。これらのサイズはとても小さいので、16 pxのプレビューを注意深く確認してください。ぼんやり見えるなら、絵を簡略化するか、余白を少し増やしましょう。

検索結果

検索エンジンは、モバイルでもパソコンでも検索結果のサイト名の横にファビコンを表示します。48 pxの倍数の正方形で、クローラーがアクセスできるアイコンが好まれます。生成されたコードのように、トップページのheadでアイコンを読み込むのが、見つけてもらいやすくする標準的な方法です。

ホーム画面

スマホのホーム画面にサイトが追加されると、iPhoneはAppleタッチアイコンを、Androidはマニフェストのアイコンを使います。どちらも背景色と少しの余白があるといちばんきれいに見え、システムが付ける角の丸みにシンボルが触れません。

ダークモード

ブラウザのダークテーマを使う人はたくさんいます。透過背景の黒いロゴはそこで消えてしまいます。ツールの暗いプレビューを見ればすぐにわかります。背景色、明るい縁取り、2色版のロゴを使えば、どこでもアイコンが見えます。

既存のアイコンを更新する

ファビコンを差し替えるときは、既存のリンクがそのまま使えるよう同じファイル名にしましょう。ブラウザはアイコンを強くキャッシュするので、再訪問者に新しいアイコンが表示されるまで時間がかかることがあります。HTMLのリンクに favicon.ico?v=2 のようなバージョンのクエリを付ければ、ブラウザに新しいファイルを取得させられます。

公開前のチェックリスト

公開前に4つ確認しましょう。favicon.icoがブラウザで あなたのドメイン/favicon.ico として開けること。HTMLのコードがトップページのheadにあること。Appleアイコンに背景色があり、iPhoneのホーム画面にサイトを追加したときにきれいに見えること。マニフェストの名前とテーマカラーがブランドと合っていること。これがそろえば、タブ、ブックマーク、検索結果、ホーム画面でアイコンが一貫して表示され、訪問者がひと目でサイトに気づけます。

元ファイルの保管

元のロゴとZIPはプロジェクトにまとめて保管しましょう。後で色を変えたりロゴをリニューアルしたりしても、同じ設定で1分で一式を作り直せて、すべてのサイズがそろったままです。使ったテーマカラーも記録しておけば、マニフェストとアイコンをまたブランドに合わせられます。ロゴ、設定、生成ファイルを整理したフォルダは、後でサイトを管理する人（未来の自分も含めて）の時間を節約します。