ファビコンを作成・設定する方法
投稿日：2026/01/26
Webサイトにファビコンを設定すると、ブラウザのタブ・ブックマーク・スマホ表示などでサイトの認識性が大きく向上します。
本記事では、以下の内容を解説します。
- ファビコンの基本知識
- 画像ファビコンの作成方法
- SVGファビコンの作成方法（画像不要）
- HTMLへの設定方法
- Laravelプロジェクトでの配置例
ファビコンとは？
ファビコン（favicon）は、以下の場所に表示される小さなアイコンです。
- ブラウザのタブ
- ブックマーク一覧
- スマホのホーム画面（PWA）
- 履歴・検索結果
視認性が高く、ブランド認知にも重要な要素です。
ファビコンの主な形式
| 形式 | 特徴 | おすすめ用途 |
|---|---|---|
| PNG / ICO | 互換性が高い | 一般的なWebサイト |
| SVG | 軽量・高解像度 | モダンブラウザ向け |
| Base64 / HTML | 画像不要 | 実験・検証用途 |
画像ファビコンを作成する方法
方法① デザインツールで作成
以下のツールを利用すると簡単に作成できます。
- Figma
- Canva
- Illustrator
推奨サイズ：
- 512×512（元画像）
- 32×32 / 48×48（書き出し）
方法② オンラインジェネレーターを使用
ICOや複数サイズを自動生成できます。
- favicon generator系サイト
SVGファビコンを作成する（画像不要）
SVGなら、コードだけでファビコンを作成できます。
サンプルSVG
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<rect width="100" height="100" rx="20" fill="#0f172a"/>
<text x="50" y="62" text-anchor="middle" font-size="52" fill="#38bdf8">
★
</text>
</svg>
このファイルを favicon.svg として保存します。
HTMLにファビコンを設定する方法
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="icon" href="/favicon.png" sizes="32x32">
複数指定するとブラウザ互換性が向上します。
Laravelでの配置例
public/
├── favicon.svg
├── favicon.png
└── index.php
Bladeテンプレート（例：resources/views/layouts/app.blade.php）の <head> に追加します。
<link rel="icon" href="{{ asset('favicon.svg') }}" type="image/svg+xml">
キャッシュが反映されない場合の対処
- ブラウザのスーパーリロード
- シークレットモードで確認
- ファイル名を変更（favicon-v2.svg など）
まとめ
- ファビコンはサイトの視認性・ブランド力を向上させる
- SVGなら画像なしで作成可能
- Laravelでは
public配下に配置してheadに設定するだけ - キャッシュ対策を忘れない