TOP
>
COLUMN
>
ファビコン（favicon）の作り方と設定方法【2026年版】

2026.05.26

ファビコン（favicon）の作り方と設定方法【2026年版】

allmanage: 株式会社オールマネージからの情報発信コラムです！

ブラウザのタブやブックマークに表示される小さなアイコン「ファビコン」は、サイトの認知度を高める重要な要素です。この記事では、デザイン初心者でもすぐに実践できるファビコンの作り方と、WordPress・HTMLそれぞれの設定方法を2026年のベストプラクティスに沿って解説します。

ファビコンとは？どこに表示されるか

ファビコン（favicon）とは「favorites icon（お気に入りアイコン）」を略した言葉で、Webサイトを識別するための小さなアイコンのことです。

ファビコンが表示される主な場所

ファビコンは想像以上に多くの場所で表示されています。

ブラウザのタブ — 複数タブを開いているときにサイトを識別できる
ブックマーク・お気に入り — 登録したサイトを一目で判別できる
ブラウザのアドレスバー — URLの左側に小さく表示される
スマートフォンのホーム画面 — サイトをホーム追加したときにアプリアイコンとして使われる
Google検索結果 — モバイル検索ではサイトURLの横にファビコンが表示される

ファビコンが設定されていないサイトはデフォルトのグレーアイコンになり、ブランドの信頼感を損ないます。小さな要素ながら、ユーザーがサイトを認識しやすくなる重要なUI要素です。

ファビコンの歴史と現在の仕様

ファビコンはもともとInternet Explorerが導入した仕様で、.ico 形式の16×16ピクセルアイコンとして使われていました。しかし現在は.ico以外にPNG・SVGなど複数形式が主流となり、高解像度ディスプレイへの対応も求められます。

2026年現在、主流ブラウザはすべてPNGファビコンをサポートしており、最小限の対応であれば512×512pxのPNG1枚から始めることができます。

ファビコン作成の基本ルール（サイズ・形式・デザインの注意点）

ファビコンを作る前に、サイズと形式のルールを確認しておきましょう。

推奨サイズ一覧

用途	サイズ	形式
一般的なブラウザタブ	32×32px / 16×16px	PNG / ICO
高解像度・Google検索表示	192×192px	PNG
iOSホーム画面アイコン	180×180px	PNG
Androidホーム画面アイコン	192×192px / 512×512px	PNG
PWA（プログレッシブWebアプリ）	512×512px	PNG

最低限の対応として「32×32px」と「192×192px」の2種類を用意するのがおすすめです。

実務では512×512pxの高解像度PNGを1枚用意しておき、各ツールで自動的に縮小変換するフローが効率的です。

ファビコンのデザイン原則

ファビコンは非常に小さく表示されるため、一般的なバナーやロゴと異なるデザインの工夫が必要です。

シンプルさが最重要。 複雑なデザインは16px・32pxに縮小すると潰れて見えなくなります。ロゴの頭文字1文字や、シンボルマークを抽出して使うのが一般的です。

背景色の扱いに注意する。 透過PNG（背景透明）にするか、ブランドカラーの背景色を使うかを決めておきましょう。白背景のファビコンはブラウザの白いタブに溶け込んで見えなくなることがあります。

正方形で作成する。 ファビコンは正方形で表示されます。横長・縦長のロゴをそのまま使うと余白が生まれ、アイコンが小さく見えます。正方形にトリミングしてからデザインしましょう。

視認性を確認する。 16px程度に縮小した状態で見たときに、ブランドカラーや特徴的な形がわかるかどうかをチェックします。

無料ツールでファビコンを作る方法

デザインツールを持っていない方でも、無料のWebサービスを使えば簡単にファビコンを作成できます。

RealFaviconGenerator を使った作成手順

RealFaviconGenerator（https://realfavicongenerator.net/）は最もよく使われているファビコン生成ツールです。1枚の画像をアップロードするだけで、各デバイス・OS向けのアイコンセットとHTMLコードを自動生成してくれます。

STEP 1: 元画像を用意する

最低でも512×512pxの正方形画像（PNG推奨）を用意します。ロゴデータがある場合はSVGかPNGを使いましょう。

STEP 2: ツールにアクセスして画像をアップロードする

RealFaviconGeneratorにアクセスし、「Select your Favicon image」ボタンをクリックして画像をアップロードします。

STEP 3: 各デバイス向けの設定を確認する

アップロード後、以下の設定画面が表示されます。

Desktop Browser — ブラウザタブ用。背景色の設定が可能
iOS / iPadOS — ホーム画面追加時のアイコン設定
Android Chrome — Android向けのマニフェスト設定
Windows Metro — Windowsタイルの設定（スキップ可）
Safari Pinned Tab — Safariのピン留めタブ用SVGアイコン設定

基本はデフォルトのままで問題ありませんが、iOSの「App icon background」でブランドカラーを設定するとホーム画面でより映えます。

STEP 4: 「Generate your Favicons and HTML code」ボタンを押す

設定を確認したらページ下部のボタンをクリックしてアイコンセットを生成します。

STEP 5: ダウンロードしてファイルを設置する

生成されたZIPファイルをダウンロードします。中に含まれるのは以下のファイルです。

favicon.ico
favicon-16x16.png
favicon-32x32.png
apple-touch-icon.png（180×180px）
android-chrome-192x192.png
android-chrome-512x512.png
site.webmanifest

これらをWebサイトのルートディレクトリ（/直下）に設置します。

Canva を使った作成方法

Canva（https://www.canva.com/）は日本語対応のデザインツールです。ファビコンのテンプレートは少ないですが、「カスタムサイズ」で512×512pxのキャンバスを作成し、ロゴや文字を配置してPNGでダウンロードすることができます。

Canvaで作成したPNGをRealFaviconGeneratorに読み込ませるフローが、デザインの自由度とファイル生成の効率を両立させる方法としておすすめです。

favicon.io を使った方法

favicon.io（https://favicon.io/）は、以下の3つのアプローチでファビコンを生成できる便利なツールです。

テキストからアイコンを生成 — 文字・フォント・背景色を指定するだけ
画像からアイコンを生成 — PNGなどをアップロードして変換
絵文字からアイコンを生成 — 絵文字を選んで即座に生成

シンプルなサイトや個人ブログであれば、テキストから文字1文字のファビコンを作る方法が手軽です。

WordPressでファビコンを設定する方法

WordPressはバージョン4.3以降から管理画面からファビコンを設定できるようになっています。プラグインなし・コード不要で設定が完了します。

管理画面から設定する手順

STEP 1: WordPress管理画面にログインする

ダッシュボードの左メニューから「外観」→「カスタマイズ」の順にクリックします。

STEP 2: サイト基本情報を開く

カスタマイザーが表示されたら、左パネルの「サイト基本情報」をクリックします。

STEP 3: サイトアイコンを設定する

「サイトアイコン」の項目に「画像を選択」ボタンがあります。ここから画像をアップロードします。

WordPressは512×512px以上の正方形画像を推奨しています。アップロード後にトリミング画面が表示された場合は、そのままの正方形でOKです。

STEP 4: 公開して確認する

設定後に右上の「公開」ボタンをクリックして保存します。ブラウザのタブをリロードするとファビコンが反映されていることを確認できます。

キャッシュが残っているとファビコンが更新されて見えないことがあります。ブラウザのキャッシュをクリアしてから確認しましょう。

ブロックテーマでの設定方法（WordPress 5.9以降）

WordPress 5.9以降に導入されたブロックテーマ（Twenty Twenty-Three以降など）では、上記のカスタマイザーではなく「外観」→「エディター」→「スタイル」→「ロゴ・アイコン」からサイトアイコン（ファビコン）を設定できます。

クラシックテーマとブロックテーマで設定パスが異なるため、使用しているテーマの種類を確認してから操作してください。カスタマイザーに「サイト基本情報」が見当たらない場合は、ブロックテーマを使用している可能性があります。

テーマによっては独自の設定方法がある

WordPressテーマによっては、カスタマイズ画面のデザインが異なる場合があります。「サイト基本情報」の項目が見当たらない場合は、テーマの設定画面（テーマオプション）を確認してください。また、ファビコン用の専用設定項目がテーマオプション内に用意されているケースもあります。

functions.php やプラグインを使う場合

テーマの都合でカスタマイザーから設定できない場合は、add_site_icon_url フィルターを使う方法もありますが、通常の用途ではカスタマイザーからの設定で十分です。

【2026年最新版】WordPressのセキュリティ対策21選！初心者でも今日からできる強化方法

HTMLでファビコンを設置する方法（コード例付き）

WordPressを使わない静的サイトやHTML直書きのサイトでは、<head> タグ内にfavicon用の <link> タグを記述します。

2026年現在のベストプラクティス

<head>
  <!-- 汎用ファビコン（ブラウザタブ・アドレスバー） -->
  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">

  <!-- iOS・iPadOSのホーム画面アイコン -->
  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

  <!-- Androidホーム画面・Chrome用のWebアプリマニフェスト -->
  <link rel="manifest" href="/site.webmanifest">

  <!-- フォールバック用ICOファイル（古いブラウザ向け） -->
  <link rel="shortcut icon" href="/favicon.ico">
</head>

各タグの役割：

rel="icon" — 現代のブラウザ用の標準ファビコン指定。sizes 属性でサイズを明示します
rel="apple-touch-icon" — iPhone・iPad でホーム画面に追加したときのアイコン
rel="manifest" — Android ChromeやPWA向けのWebアプリマニフェストファイル
rel="shortcut icon" — 古い仕様との後方互換のためのICOファイル

site.webmanifest の内容

site.webmanifest はJSON形式のテキストファイルです。RealFaviconGeneratorで生成した場合は自動作成されますが、手動で作る場合は以下の内容を参考にしてください。

{
  "name": "サイト名",
  "short_name": "サイト名",
  "icons": [
    {
      "src": "/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone"
}

theme_color はAndroid Chromeのアドレスバーの色に影響します。ブランドカラーを設定するとより統一感が出ます。

SVGファビコン（最新の対応方法）

2026年現在、Chrome・Firefox・Edgeはベクター形式のSVGファビコンをサポートしています。SVGにすると任意の解像度で綺麗に表示される利点があります。

<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="icon" href="/favicon.png" type="image/png"><!-- フォールバック -->

macOSのSafari 16以降はデスクトップのタブでSVGファビコンに対応済みですが、iOS/iPadOSのSafariは未対応のため、PNGファイルとの併記によるフォールバックは引き続き必要です。個人ブログや技術サイトでは採用が進んでいますが、業務用サイトではPNG形式を基本とする構成が無難です。

古いIEブラウザはサポートが終了しているため、IE向けの特殊な設定（X-UA-Compatible メタタグやconditional commentsによる分岐）は不要です。

スマホ・OGPアイコンへの対応

ファビコンと混同されやすいですが、スマートフォンとSNSシェアには別途対応が必要な場合があります。

apple-touch-icon の重要性

apple-touch-icon は iOSおよびiPadOSでサイトをホーム画面に追加したときに使われるアイコンです。指定しない場合、iOSはWebページのスクリーンショットをアイコンとして使用するため、見た目が崩れることがあります。

推奨サイズは 180×180px のPNGです。

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

デザインのポイントは、iOSが角丸や光沢エフェクトを自動で付けてくれるため、正方形の状態（角丸なし）で作成することです。

Android Chrome のホーム画面アイコン

AndroidのChromeでホーム画面に追加した場合は、site.webmanifest に記述した icons の画像が使われます。最低でも 192×192px のPNG、できれば 512×512px も用意しておくと高解像度端末でも綺麗に表示されます。

OGP画像との違い

OGP（Open Graph Protocol）はSNSでシェアされたときにリンクカードに表示されるサムネイル画像の仕様です。ファビコンとは別物で、<meta property="og:image"> タグで指定します。OGPについて詳しくは以下の記事を参照してください。

OGPとは？設定方法・画像サイズ・確認ツール完全ガイド

テーマカラーとブランディング

<meta name="theme-color"> を設定すると、AndroidのChromeブラウザのアドレスバーやタスクスイッチャーの色を変えることができます。

<meta name="theme-color" content="#2563eb">

ブランドカラーを設定しておくと、サイト全体のブランディングがスマートフォン上でも一貫します。

ファビコン設定後に確認すべきポイント

設定が完了したら、以下のポイントを確認しておきましょう。

ブラウザでの表示確認

複数のブラウザ（Chrome・Firefox・Safari・Edge）でサイトを開き、タブにファビコンが表示されているかを確認します。キャッシュが残っている場合は強制リロード（Windowsは Ctrl+F5、Macは Cmd+Shift+R）で更新してください。

スマートフォンでの確認

実機のiPhone・Androidでサイトにアクセスし、ホーム画面に追加してアイコンが正しく表示されるか確認します。

RealFaviconGenerator の検証ツール

RealFaviconGeneratorは「Check your favicon」という検証ツールも提供しています。URLを入力するだけで各デバイス・ブラウザでのファビコン表示状態をチェックできます。

Googleの検索結果にファビコンが反映されるまでには数日〜数週間かかることがあります。すぐ反映されなくても焦る必要はありません。

SEOへの影響

ファビコン自体が直接的なSEOランキング要素になることはありませんが、Google検索結果のモバイル表示でファビコンが表示されることでクリック率（CTR）に影響する可能性があります。また、ファビコンが正しく設定されているサイトはユーザーの信頼感にもつながります。サイトのSEO・UX改善に取り組む際は、ファビコン設定もチェックリストに加えておきましょう。

SEOとユーザーエクスペリエンス（UX）の関係を徹底解説｜Core Web Vitals・INP対応の最新ガイド【2026年版】

【2026年版】大阪のweb制作会社おすすめ比較｜失敗しない選び方を地元制作会社が解説

よくある質問

Q. ファビコンのサイズは何ピクセルで作ればいいですか？

A. 最低限は32×32pxと192×192pxの2種類を用意するのがおすすめです。実際の制作では512×512pxの高解像度PNG1枚を用意し、RealFaviconGeneratorなどのツールで各サイズに自動変換すると効率的です。

Q. ファビコンを設定したのにブラウザに反映されません。なぜですか？

A. ブラウザのキャッシュが原因であることがほとんどです。Ctrl+F5（MacはCmd+Shift+R）で強制リロードするか、ブラウザのキャッシュをクリアしてから再度確認してください。

Q. .icoファイルと.pngファイル、どちらを使えばいいですか？

A. 2026年現在は.pngを推奨します。ほぼすべての主要ブラウザがPNGに対応しており、作成・編集のしやすさでも優れています。.icoファイルは古いブラウザへのフォールバックとしてrel="shortcut icon"で補完的に設置するのがベストプラクティスです。

Q. WordPressでファビコンを設定するのにプラグインは必要ですか？

A. 必要ありません。WordPress 4.3以降は管理画面の「外観」→「カスタマイズ」→「サイト基本情報」からプラグインなしでファビコンを設定できます。なお、WordPress 5.9以降のブロックテーマ（Twenty Twenty-Three以降など）では「外観」→「エディター」→「スタイル」→「ロゴ・アイコン」から設定します。

Q. ファビコンはSEOに影響しますか？

A. ファビコン自体が直接的なSEOランキング要素になるとは言われていませんが、Google検索のモバイル表示でファビコンが表示されることでクリック率（CTR）に影響する可能性があります。設定しておくことでサイトの信頼感も向上します。

Q. SVGのファビコンは使えますか？

A. macOSのSafari 16以降はデスクトップのタブでSVGファビコンに対応済みです。ただしiOS/iPadOSのSafariは未対応のため、SVGを使う場合はPNGもあわせて設定するフォールバック対応が必要です。Chrome・Firefox・Edgeはすでにフルサポートしています。業務用サイトではPNG形式を基本とすることをおすすめします。

【2026年版】大阪のweb制作会社おすすめ比較｜失敗しない選び方を地元制作会社が解説

まとめ

ファビコンの作り方と設定方法を改めて整理します。

作成 — 512×512pxの正方形PNGを用意。Canvaや既存ロゴデータから作成できる
変換 — RealFaviconGeneratorに読み込んで各サイズ・形式のアイコンセットを生成する
設置 — WordPressなら管理画面から1分で設定完了。HTMLサイトは <head> 内に数行のコードを記述する
確認 — 複数ブラウザ・スマートフォンで表示を確認。キャッシュクリアを忘れずに

2026年現在のベストプラクティスは「PNG + apple-touch-icon + webmanifest」の3点セットです。IE対応の古い設定は不要になっているので、既存のサイトでIE向けの記述がある場合はこの機会に整理してみてください。

ファビコンはサイトの第一印象を作る小さなアイコンですが、丁寧に設定することでブランドの信頼感やユーザーの使いやすさが向上します。ホームページ制作やリニューアルの際には、ぜひ最初から正しく設定しておきましょう。

WEB制作.comでは、大阪を拠点にホームページ制作からSEO対策まで一貫してサポートしています。ファビコン設定を含むホームページ制作のご相談は、お気軽にお問い合わせください。

canonicalタグとは？URLの正規化でSEO評価を集中させる設定方法【2026年版】

WEB DESIGN & DEVELOPMENT

大阪でホームページ制作をご検討の方へ

集客・ブランディングに強いWebサイトを、大阪の専門チームがご提案！
まずはお気軽に無料相談からどうぞ

無料で相談する