SVG Icon Generator

ファビコン完全ガイド：SVGアイコンジェネレーターで作るオリジナルアイコン

公開日：2026年6月1日 ／ 最終更新：2026年6月1日

ファビコンとは？基本から押さえよう

ウェブサイトを開いたとき、ブラウザのタブやブックマークに表示される小さなアイコンを「ファビコン（favicon）」と呼びます。"favorite icon"の略で、もともとはIEがお気に入り登録時に使い始めたのがルーツです。

ファビコンは「あってもなくても同じ」と思われがちですが、実はSEOとUXの両面で重要な役割を持っています。

SEOへの影響：Googleは検索結果ページのタイトル横にファビコンを表示します。ファビコンが設定されていないと、デフォルトのグレーのアイコンが表示され、クリック率（CTR）に影響することがあります。

UXへの影響：ユーザーが複数のタブを開いているとき、ファビコンはサイトを識別する唯一の視覚的手がかりになります。オリジナルのアイコンがあると、ブランドの認知度向上にも繋がります。

ファビコン形式の種類と違い：.ico・.png・.svg

ファビコンには主に3つの形式があります。それぞれ特徴が異なるので、用途に合わせて選びましょう。

.ico（ICO形式）

もっとも古くから使われている形式で、IE（Internet Explorer）の時代から標準的に使われてきました。1つのファイルに複数のサイズ（16×16、32×32、48×48など）を格納できるのが特徴です。古いブラウザへの対応が必要な場合は、.icoが安心です。

.png（PNG形式）

透過（アルファチャンネル）をサポートしており、現代のブラウザはほぼすべて対応しています。ファビコン用途では favicon-32x32.png や favicon-16x16.png といった複数サイズを用意するのが一般的です。

.svg（SVG形式）

ベクター形式のため、どんなサイズに拡大・縮小しても劣化しません。Chromeをはじめとする最新のブラウザで対応が進んでいます。ダークモードへの対応が<style>タグ内でできるのも強みです。ただし、古いブラウザでは表示されないため、.icoや.pngとの併用が推奨されます。

SVGアイコンジェネレーターでのファビコン作成：3ステップ

SVGアイコンジェネレーター（icon.chizmotools.com） を使えば、コードやデザインソフトの知識がなくても、オリジナルアイコンをブラウザ上で無料で作成できます。

ステップ1：アイコンをデザインする

ツールを開き、使いたい図形やシンボルを選択します。色・サイズ・スタイルを自由に調整できます。サイト全体のカラーに合わせたアイコンを作ると、ブランドとして統一感が出ます。

SVGアイコンジェネレーターでアイコンをデザインしている画面

ステップ2：SVGをダウンロードする

デザインが決まったら「ダウンロード」ボタンを押して、SVGファイルを保存します。このファイルをそのまま.svgファビコンとして使うこともできますし、.icoや.pngに変換することもできます。

ステップ3：必要に応じて変換・配置する

SVGをダウンロードしたら、プロジェクトに合わせた形式に変換し、適切な場所に配置します。変換方法は次のセクションで詳しく解説します。

❌ よくある間違い：拡張子を変えるだけではダメ！

ここが最重要ポイントです。

「.svgのファイルをfavicon.icoにリネームすればOK」は大きな間違いです。

ファイルの拡張子を .ico に変えても、中身のデータ形式はSVGのまま。ブラウザはファイルの中身を読み込んで形式を判断するため、拡張子だけ変えても認識されません。結果として、ファビコンが表示されないか、壊れたアイコンが表示されることになります。

✅ 正しい変換方法

SVGを.icoに変換するには2つの方法があります。

【方法1】SVGアイコンジェネレーターから直接ダウンロード（最もかんたん）

SVGアイコンジェネレーター には ICOダウンロード機能が搭載されています。デザインが完成したら「ICOダウンロード」ボタンを押すだけで、16px・32px・48pxの3サイズをまとめた favicon 対応の.icoファイルが一括生成されます。外部ツールへの移動は不要で、デザインからダウンロードまでを1か所で完結できます。

SVGアイコンジェネレーターのICOダウンロードボタン

【方法2】外部ツールで変換（他のSVGを使う場合）

SVGアイコンジェネレーター以外で作成したSVGを変換したい場合は、以下の外部ツールが使えます。

いずれの方法も「ファイル形式そのものを変換する」という点が重要です。拡張子のリネームとは根本的に異なる処理であることを覚えておきましょう。

Next.jsでのファビコン設定方法

Next.js（App Router）を使っている場合、ファビコンの配置と設定は非常にシンプルです。

基本：app/ディレクトリに配置するだけ

app/ディレクトリ直下に以下のファイルを置くと、Next.jsが自動的に認識して<head>に適切なタグを挿入してくれます。

app/
├── favicon.ico          ← これだけでも動く
├── icon.svg             ← SVGアイコン（省略可）
├── apple-icon.png       ← Apple Touch Icon（省略可）
└── ...

最低限 favicon.ico を app/ 直下に置けば完了です。public/ への設置はApp Routerとの競合が起きる場合があるため、app/ への配置が推奨されます。

複数形式を使う場合

より幅広いブラウザ・デバイスに対応したい場合は、layout.tsxのmetadataに明示的に記述します。

// app/layout.tsx
import type { Metadata } from 'next'

export const metadata: Metadata = {
  icons: {
    icon: [
      { url: '/favicon.ico', sizes: '48x48' },
      { url: '/icon.svg', type: 'image/svg+xml' },
    ],
    apple: '/apple-icon.png',
  },
}

複数サイズ対応について

ファビコンは表示される場所によって必要なサイズが異なります。最低限押さえておきたいのは以下のサイズです。

前述した favicon.io や RealFaviconGenerator を使えば、SVGから全サイズを一括生成できるため、1つずつ手動でリサイズする必要はありません。

まとめ

ファビコンはたった数十ピクセルのアイコンですが、ブランドの信頼感やSERPでのクリック率に影響する大切な要素です。

今回のポイントをおさらいします。

関連ツール