【Web制作基礎】ファビコンとは？作り方・サイズ・HTML設定

技術

公開日: 2026/04/02

※この記事にはプロモーションを含みます

はじめに

「ブラウザのタブに表示される小さなアイコン、どうやって設定するの？」と気になっている方に向けて、この記事ではファビコンについて基本から解説します。

ファビコンはWebサイトの「顔」 とも言えるアイコンです。設定することでサイトのブランドイメージが高まり、ユーザーが複数のタブを開いている中でも自分のサイトをすぐに見つけてもらえるようになります。反対に設定していないと、ブラウザのデフォルトアイコンが表示され、サイト全体の完成度が低く見えてしまいます。

この記事では、ファビコンの意味・適切なサイズ・無料で作れるおすすめツール・HTMLへの設定方法まで、実装できるレベルでわかりやすく解説します。コードサンプルもありますので、ぜひ最後まで読んでみてください。

ファビコンとは？役割と重要性をわかりやすく解説

ファビコン（favicon）とは

ファビコンの定義

ファビコン（favicon） とは、Webサイトを識別するための小さなアイコン画像のことです。“favorite icon（フェイバリット・アイコン）” を略した言葉で、1999年にMicrosoft Internet Explorerが初めて採用したことで広まりました。

ファビコンは以下の場所に表示されます。

ブラウザのタブ（各タブの左端）
ブラウザのアドレスバー左側
ブックマーク・お気に入り一覧
スマートフォンのホーム画面（アイコンとして保存した場合）
検索結果ページ（Googleの検索結果のサイト名の横）

このように、ファビコンはWebサイトを視覚的に識別するための重要な要素であり、サイトの「顔」として機能します。

ファビコンがWebサイトに与える影響

ファビコンを設定することには、デザイン面・UX面の両方でメリットがあります。

ブランド認知の向上

ブラウザで多くのタブを開いているとき、タイトル文字が隠れても、ファビコンがあればユーザーがすぐにサイトを識別できます。企業ロゴをファビコンとして使用することで、ブランドの露出機会が増えます。

サイトの信頼感と完成度の向上

ファビコンが設定されたサイトは、設定されていないサイトに比べて 「きちんと作られたサイト」という印象を与えます。特にポートフォリオサイトや企業サイトでは、細部の作り込みが信頼感に直結します。

ユーザビリティの向上

複数のタブを開いて作業するユーザーにとって、ファビコンは「どのタブがどのサイトか」を瞬時に判断する手がかりになります。ファビコンのないサイトはブラウザのデフォルトアイコンが表示されるため、他のサイトと区別がつきにくくなります。

ファビコンがないとどうなるか

ファビコンを設定していないと、ブラウザはデフォルトのアイコン（白紙のページアイコンや地球儀のアイコンなど）を表示します。これにより、以下のような問題が起こりえます。

複数のタブを開いたときにサイトを見分けにくい
ブックマークしたときにアイコンがなく識別性が低下する
サイト全体の完成度・プロフェッショナル感が下がる
Googleの検索結果でサイト名の横にアイコンが表示されない

Webサイトを公開する前に、ファビコンの設定はぜひ完了させておきましょう。

ファビコンの適切なサイズと形式

基本サイズと推奨サイズ一覧

ファビコンには複数のサイズが存在します。デバイスや表示場所によって最適なサイズが異なるため、複数のサイズを用意してマルチデバイス対応することが推奨されています。

サイズ	用途
16×16px	ブラウザのタブ・アドレスバー（標準サイズ）
32×32px	ブラウザのタブ（高解像度・Retina対応）
48×48px	Windowsのタスクバー・デスクトップショートカット
180×180px	iOSのホーム画面アイコン（Apple Touch Icon）
192×192px	AndroidのホームスクリーンアイコンおよびPWA用
512×512px	PWA（プログレッシブWebアプリ）のスプラッシュ画面

最低限必要なのは 16×16px と 32×32px の2種類ですが、スマートフォン対応も考慮するなら 180×180px（Apple Touch Icon）も用意することをおすすめします。

ファイル形式（ICO・PNG・SVG）の違いと選び方

ファビコンに使えるファイル形式は主に3種類あります。

ICO形式

.ico 形式は、ファビコンの標準形式として長く使われてきた形式です。1つのファイルに複数のサイズ（16px・32px・48pxなど）を内包できる点が特徴です。古いブラウザを含めた広い互換性があります。

PNG形式

.png 形式は、現代のブラウザでファビコンとして広く使われています。ファイルサイズが小さく、透明背景（アルファチャンネル）にも対応しています。モダンなブラウザであればICOの代替として問題なく使えます。

SVG形式

.svg 形式はベクター形式であるため、どんなサイズでも画質が劣化しません。ただし、対応ブラウザが限られており（SafariやIEが非対応）、単体での使用は現時点では推奨されません。PNGと組み合わせて使うことが多いです。

実務では、PNG（または複数サイズのICO）をメインに使い、必要に応じてSVGを補完的に追加するアプローチが一般的です。

マルチサイズ対応の考え方

現代のWeb制作では、PC・スマートフォン・タブレットの各デバイスでファビコンが適切に表示されるよう、マルチサイズ対応を行うことが標準的です。

最小構成として、以下の3種を用意することをおすすめします。

favicon.ico（16px・32px含むマルチサイズICO）
apple-touch-icon.png（180×180px）
icon-192.png（192×192px）

後述する RealFaviconGenerator などのツールを使えば、元画像から自動でマルチサイズのファビコンセットを生成できます。

ファビコンを無料で作れるおすすめツール4選

RealFaviconGenerator

RealFaviconGenerator（リアルファビコンジェネレーター）は、ファビコン作成に特化したオンラインツールです。PNG画像をアップロードするだけで、ICO・PNG・SVGの各形式とマルチサイズのファビコンセットを自動生成し、HTMLへの記述コードまで出力してくれます。

特徴をまとめると以下の通りです。

iOS・Android・Windows・macOS向けのアイコンを一括生成
ブラウザ上でのプレビュー確認が可能
HTMLの設置コードをそのままコピーして使える
完全無料で使用できる

ファビコンを初めて設定する方には、最初の選択肢としてRealFaviconGeneratorをおすすめします。

Favicon.io

Favicon.io（ファビコン・アイオー）は、テキスト・絵文字・既存の画像から簡単にファビコンを作れるシンプルなオンラインツールです。

テキスト（文字）からアイコンを生成する機能が便利
背景色・フォント・文字色をブラウザ上でカスタマイズできる
ダウンロードしたZIPファイルにICOとPNG両方が含まれる
完全無料で使用できる

ロゴ画像がなくても、サイトの頭文字などをアイコンにしたい場合に重宝します。

Canva（キャンバ）

Canva（キャンバ）は豊富なテンプレートとグラフィック素材を備えたオンラインデザインツールです。ファビコン作成に特化したツールではありませんが、アイコン素材を組み合わせてデザインし、PNG形式で書き出すことができます。

デザインのカスタマイズ自由度が高く、ブランドカラーに合わせたオリジナルアイコンを作りたい方に向いています。無料プランでも十分な機能が使えます。

Figma（フィグマ）

Figma（フィグマ）は、UIデザインの現場で広く使われているデザインツールです。アートボードのサイズを512×512pxなどに設定してアイコンをデザインし、PNG形式で書き出してファビコンとして使うことができます。

すでにFigmaでサイトのモックアップを作成している場合は、同じファイル内でファビコンも合わせて作成すると効率的です。ブランドの一貫性を保ちながらデザインできます。

ファビコンをHTMLに設定する方法

基本的な記述方法（linkタグ）

ファビコンはHTMLの <head> タグ内に <link> タグを記述することで設定します。

最も基本的な記述方法は以下の通りです。

<head>
  <link rel="icon" href="/favicon.ico" type="image/x-icon">
</head>

PNGファイルを使う場合は type 属性を変更します。

<head>
  <link rel="icon" href="/favicon.png" type="image/png">
</head>

ファイルのパスはサイトのルートディレクトリに置く場合は /favicon.ico のように記述し、特定のフォルダに置く場合は /images/favicon.ico のように絶対パスで指定します。

マルチデバイス対応の実装コード

iOSのホーム画面アイコンやAndroid向けのPWAアイコンにも対応させる場合は、以下のコードを <head> 内に追加します。

<head>
  <!-- 通常のファビコン（16px・32px） -->
  <link rel="icon" type="image/x-icon" href="/favicon.ico">

  <!-- PNG形式のファビコン（32px） -->
  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">

  <!-- Apple Touch Icon（iOSホーム画面用・180px） -->
  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

  <!-- Android・PWA用（192px） -->
  <link rel="icon" type="image/png" sizes="192x192" href="/icon-192.png">
</head>

RealFaviconGeneratorを使うと、このようなマルチデバイス対応のコードを自動で生成してくれます。

設定が反映されないときの対処法

ファビコンを設定したのにブラウザに表示されない場合は、以下を確認しましょう。

ブラウザキャッシュのクリア

ブラウザはファビコンをキャッシュ（一時保存）するため、設定を変更しても古いアイコンが表示され続けることがあります。ブラウザのキャッシュをクリア（Ctrl+F5 または Cmd+Shift+R）してから再度確認してください。

ファイルパスの確認

href に記述したファイルパスが正しいか確認してください。ファイル名の大文字・小文字の違いや、ディレクトリの位置のズレが原因となることがあります。

ファイル形式とMIMEタイプの確認

ICOファイルを使う場合は type="image/x-icon"、PNGの場合は type="image/png" と記述されているか確認してください。ICOとPNGで type 属性の値が異なる点に注意してください。

ファビコン作成・設定のよくある疑問

ファビコンのサイズは何px？

最低限用意すべきサイズは 16×16px と 32×32px の2種類です。スマートフォンのホーム画面への対応も考慮するなら、180×180px（Apple Touch Icon）も追加しましょう。

RealFaviconGeneratorのようなツールを使えば、512×512px程度の元画像から各サイズを自動生成できるため、まず高解像度の画像を1枚用意することをおすすめします。

ファビコンが表示されない原因は？

主な原因として以下が挙げられます。

<head> タグ内に <link> タグが記述されていない
ファイルのパスが間違っている
ブラウザのキャッシュに古いアイコンが残っている
ファイル形式と type 属性が一致していない
サーバーがICOファイルを正しいMIMEタイプで配信していない

順番に確認することで、大半の原因は特定できます。

SVGファビコンは使えるか？

SVGファビコンはChromium系ブラウザ（Chrome・Edgeなど）では使えますが、SafariやFirefox（一部）での対応が限定的です。現時点では単独での使用よりも、ICOやPNGのバックアップと組み合わせて使うことをおすすめします。

<!-- SVGをメインに、ICOをバックアップとして使う例 -->
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="icon" href="/favicon.ico" sizes="any">

まとめ

ファビコンとは、ブラウザのタブやブックマークに表示されるWebサイト専用の小さなアイコンのことです。設定することでサイトの識別性・信頼感・ブランドイメージが向上し、サイト全体の完成度を高める効果があります。

推奨サイズは16px・32pxを基本とし、スマートフォン対応には180pxのApple Touch Iconも用意しましょう。作成にはRealFaviconGeneratorやFavicon.ioなどの無料オンラインツールが便利で、HTMLの <head> 内にlinkタグを数行追加するだけで設定できます。

Web制作の基礎からしっかり学びたい方には、WEBMASTERS のオンラインスクールがあります。HTMLやCSS、ファビコンのような細部の実装まで、現役エンジニアが実務を意識した指導を行っています。無料カウンセリングも実施していますので、ぜひお気軽にご相談ください。

この記事を
シェアする！