Webサイトを作ったとき、ブラウザのタブに表示される小さなアイコン（ファビコン）を設定していますか？ファビコンはサイトの顔とも言える重要な要素です。この記事では、ファビコンの基礎知識から無料ツールを使った作成・設置方法まで、ステップごとにわかりやすく解説します。

ファビコンとは

ファビコン（favicon）とは、ブラウザのタブ・アドレスバー・ブックマーク・スマートフォンのホーム画面などに表示されるアイコン画像です。

名前は「favorites icon」に由来しており、Internet Explorerでブックマーク（お気に入り）に追加したときに表示されたアイコンがその起源です。現在はあらゆるブラウザ・デバイスでサポートされており、SEOや離脱率にも間接的に影響します。

ファビコンの役割
  • ブラウザのタブで自サイトを識別しやすくする
  • ブックマーク・ホーム画面でのブランド認知を高める
  • プロフェッショナルな印象を与える

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

ファビコンには複数のサイズが必要です。用途によって使い分けられます。

ファイル名 サイズ 用途
favicon.ico16/32/48px（ICO）ブラウザタブ・ブックマーク（全般）
favicon-16x16.png16×16pxブラウザタブ（小）
favicon-32x32.png32×32pxブラウザタブ（標準）
apple-touch-icon.png180×180pxiOS ホーム画面アイコン
android-chrome-192x192.png192×192pxAndroid ホーム画面アイコン
android-chrome-512x512.png512×512pxAndroid スプラッシュ画面

これらを1つずつ手作りするのは大変ですが、0-TOOLsのファビコン作成ツールなら一括生成してZIPダウンロードできます。

ファビコン作成ツール — 無料で今すぐ試せます

テキスト・画像からICO/PNGを一括生成。データはサーバーに送信されません。

ファビコンを作成する →

無料ツールで作成する手順

ステップ1 — モードを選択する

ツールには2つのモードがあります。

  • テキストから作成：サイト名の頭文字など1〜2文字を入力し、背景色・文字色・形状・フォントを設定してオリジナルのアイコンを作成します。
  • 画像から作成：既存のロゴ画像（PNG/JPG/SVGなど）をアップロードして各サイズに変換します。

ステップ2 — デザインを調整する（テキストモード）

テキストモードでは以下の設定が可能です。

  • 文字：1〜2文字まで。サイト名の頭文字やロゴ文字が一般的です。
  • 背景色 / 文字色：カラーピッカーで自由に選択。ブランドカラーに合わせましょう。
  • 形状：四角・角丸・円の3種類。角丸や円はiOSアイコンらしい印象になります。
  • フォント：ゴシック・明朝・等幅の3種類。

ステップ3 — 生成してダウンロード

「ファビコンを生成する」ボタンをクリックすると、全サイズのPNG・ICOファイルが生成されます。「ZIPをダウンロード」で以下がまとめてダウンロードされます。

  • favicon.ico（16/32/48pxを内包）
  • favicon-16x16.png / favicon-32x32.png / favicon-48x48.png
  • favicon-64x64.png / favicon-128x128.png
  • apple-touch-icon.png（180px）
  • android-chrome-192x192.png / android-chrome-512x512.png
  • site.webmanifest
  • head-code.html（HTMLの埋め込みコード）

HTMLへの設置方法

ZIPを解凍したら、すべてのファイルをサイトのルートディレクトリ（index.htmlと同じ場所）に配置します。その後、以下のコードを<head>タグ内に追加します。

<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

このコードはZIPに含まれるhead-code.htmlにも入っています。ツール上の「HTMLコードをコピー」ボタンでワンクリックでコピーすることもできます。

設置後の確認方法
  • ブラウザでサイトを開き、タブにアイコンが表示されるか確認
  • スマートフォンでホーム画面に追加してアイコンを確認
  • キャッシュが残っている場合は Ctrl+Shift+R（強制リロード）で更新

きれいなファビコンを作るコツ

シンプルなデザインにする

ファビコンは最小16×16pxという非常に小さなサイズで表示されます。複雑なデザインは潰れてしまうため、文字1〜2文字やシンプルなシンボルマークが最適です。

コントラストを高くする

背景色と文字色のコントラスト比を高めると、小さなサイズでも視認性が上がります。例えば白背景に濃い青文字、または濃い緑背景に白文字などです。

正方形の画像を使う

画像モードを使う場合、縦横比が1:1（正方形）の画像が最もきれいに仕上がります。非正方形の場合は余白ができます。

高解像度の画像を入力する

512px以上の画像をアップロードするとダウンサンプリング時に品質が保たれます。

よくある質問

faviconはICOとPNGどちらが良い？
現代のサイトではPNGが推奨されます。ただしIE11以前の古いブラウザ対応のためfavicon.icoも合わせて配置するのがベストプラクティスです。linkタグの記述順序でモダンブラウザはPNGを優先します。
favicon.icoはルートに置かないといけませんか？
favicon.icoはWebサーバーのルートディレクトリ（/）に置くのが慣習です。一部のブラウザやツールがlinkタグなしでも/favicon.icoを自動取得しようとするためです。PNGはlinkタグで任意のパスを指定できます。
Apple Touch Iconとは何ですか？
iPhoneやiPadでWebサイトをホーム画面に追加したときに表示されるアイコンです。apple-touch-icon.png（180×180px）をルートに配置し、<link rel="apple-touch-icon">をheadに記述します。
site.webmanifestは必要ですか？
PWAやAndroid端末でサイトをホーム画面に追加したときのアイコン・テーマカラーを設定するファイルです。必須ではありませんが、Androidユーザー体験向上のために配置を推奨します。

まとめ

ファビコンはサイトのブランドを示す小さくても重要な要素です。必要なサイズをすべて揃えるのは手間がかかりますが、0-TOOLsのファビコン作成ツールを使えばテキスト入力や画像アップロードだけで一括生成・ZIPダウンロードができます。

すべての処理はブラウザ内で完結するため、画像データがサーバーに送信される心配もありません。ぜひお気軽にお試しください。

ファビコン作成ツールを今すぐ試す

テキスト・画像からICO/PNG/Apple Touch Iconを一括生成。完全無料・登録不要。

ファビコンを作成する →