すべての環境に対応する無料のファビコン生成ツール

ファビコンは、あらゆるプラットフォームと端末でウェブサイトを表す小さなアイコンです。ブラウザーのタブ、ブックマークの一覧、履歴のメニュー、プログレッシブウェブアプリのランチャー、そして 2019 年からは Google のモバイル検索結果でサイト名の横に直接表示されます。占める面積は小さいものの、ファビコンはブランドの認知と利用者の信頼に大きな役割を果たします。

Google のドキュメントでは、検索結果にファビコンを表示するには有効なファビコンが必要だと明記されています。ファビコンのないページには汎用の地球アイコンが表示され、視覚的な独自性が失われて、ブランドのアイコンを設定している競合と比べてクリック率が下がることがあります。Google 検索セントラルのガイドには、ファイルは 48 ピクセルの倍数で、正方形であり、Googlebot がアクセスできる必要があるという具体的な要件が示されています。

ファビコンが SEO とブランディングに重要な理由

利用者がスマートフォンで Google の検索結果を眺めるとき、ファビコンは最初に目に入る視覚要素の 1 つです。分かりやすく見覚えのあるアイコンはその場でブランドを想起させ、既定のアイコンのままの競合の中で自分の掲載結果を目立たせて、クリック率を高めます。

検索以外でも、ファビコンはブランドに触れ続ける接点になります。開いているタブにはすべてあなたのアイコンが表示されます。ブックマークの項目にも表示されます。利用者がサイトをスマートフォンのホーム画面に追加すると、Apple Touch Icon や Android Chrome のアイコンが、アプリのような姿として使われます。これらを用意していないサイトは、未完成で信頼しにくい印象を与えます。

プログレッシブウェブアプリ（PWA）は、正しく設定されたファビコンに全面的に依存します。ウェブアプリマニフェストは複数の解像度のアイコンファイルを参照します。それがなければインストールの案内が表示されないことがあり、ホーム画面でも正しく表示されません。

必要なファビコンのサイズ

完全なファビコンの実装は 4 つの主な用途をカバーし、それぞれに決まったサイズが必要です。

ブラウザー用のファビコンには 16×16 と 32×32 ピクセルの ICO または PNG を使います。タブ、アドレスバー、ブックマークのメニューに表示されます。32×32 は Windows のタスクバーのショートカットにも使われます。

Apple Touch Icon には 180×180 ピクセルの PNG が必要です。利用者がサイトをホーム画面に追加したとき、iOS はこれを使います。用意していないと、Safari は代わりにページのスクリーンショットを使い、見栄えはほとんどよくありません。

Android Chrome のアイコンには、ウェブアプリマニフェストで参照する 192×192 と 512×512 ピクセルの PNG が必要です。PWA のインストールと「ホーム画面に追加」の機能を支えます。512×512 は起動画面にも使われます。

Windows のタイルには、Microsoft のスタートメニューのタイルなど Windows との連携のために 150×150 ピクセルの PNG を使います。任意の browserconfig.xml ファイルを置けば、タイルの色も指定できます。

Sorank の無料のファビコン生成ツールは、1 枚の元画像からこれらのサイズをすべて作ります。一度アップロードすれば、すべての形式を含む一式をダウンロードできます。

理想的な元画像の作り方

512×512 ピクセル以上の正方形の画像から始めてください。SVG 形式は品質を落とさずに拡大縮小できるので理想的ですが、高解像度の PNG でも同じように使えます。

大切なのは単純さです。ファビコンは非常に小さく表示されるため、細かい要素は消えてしまいます。効果的なファビコンは、大胆な形、強いコントラスト、最小限の要素でできています。Twitter の鳥、GitHub の猫、YouTube の再生ボタンのように、16 ピクセルでもすぐに分かるものを思い浮かべてください。

写真や、文字の入ったロゴ全体は避けてください。文字が使えるのは、太い書体の 1 文字だけの場合です。多くのブランドは頭文字だけ、あるいはロゴマークを簡略化したものを使っています。

PNG のファビコンには透過の背景を使ってください。ブラウザーのテーマが明るくても暗くても、アイコンがきれいに見えます。ICO 形式は 1 つのファイルに複数のサイズを収められるため、古いブラウザー向けの確実な代替になります。

正しい HTML でのファビコンの設置

ファビコンのファイルを生成したら、ページの <head> 部分に正しいタグを記述する必要があります。必須のタグは次のとおりです。

<link rel="icon"> タグはメインのファビコンを指定します。最新のブラウザーは PNG をそのまま扱えます。<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> のように書きます。

<link rel="apple-touch-icon"> タグは iOS のホーム画面用アイコンを指定します。Apple の端末はこの rel 属性をそのまま探します。sizes 属性は 180x180 にするのが最適です。

<link rel="manifest"> タグはウェブアプリマニフェストを結び付けます。マニフェストには Android Chrome 用アイコンのサイズと用途が記載されます。PWA への対応に欠かせません。

Windows のタイルには、<meta name="msapplication-TileImage"> タグでタイルの画像を指定します。<meta name="msapplication-TileColor"> でタイルの背景色も指定できます。

本ツールは、これらのタグをそのまま貼り付けられる HTML コードとして提供します。コードをサイトの head 部分にコピーし、生成されたファイルをルートディレクトリにアップロードすれば、すべての環境に対応できます。

2026 年のファビコンのベストプラクティス

ファビコンはブランドの世界観と一致させてください。アイコンには、ロゴやサイトのデザインと同じ色と表現を使います。あらゆる接点で一貫していれば、時間とともにブランドの認知が積み上がります。

複数のブラウザーと端末でファビコンを確認してください。Chrome、Firefox、Safari、Edge は、それぞれファビコンの描画がわずかに異なります。適切なサイズを配信していないと、あるブラウザーでは鮮明でも別のブラウザーではぼやけて見えることがあります。

対応している環境では SVG のファビコンを使ってください。最新のブラウザーは <link rel="icon" type="image/svg+xml"> による SVG のファビコンを受け付けます。SVG はどのサイズでも崩れず、ダークモードのメディアクエリにも対応するため、利用者のシステム設定に合わせてアイコンを変えられます。

ファビコンを更新したらキャッシュを破棄してください。ブラウザーはファビコンを強くキャッシュします。アイコンを変更したら、バージョンのクエリ文字列を付けるか、ファイル名を変えて、新しいものを取得させます。

最後に、サイトのルートの /favicon.ico に ICO の代替を必ず置いてください。HTML の記述にかかわらず、この既定のパスを探すブラウザーやツールがまだあります。用意しておけば、どの環境でもブランドのアイコンが欠けることはありません。