ファビコンはブラウザのタブやブックマークに表示される小さなアイコンです。ここではAstroでファビコンを設定する方法を紹介します。
ファビコン設定の手順
1.ファビコンファイルを用意する
- サイトを表す画像ファイルを用意します
-
形式: 一般的には
.icoが最も互換性が高いですが、.png(透過可) や.svg(ベクター形式) もよく使われます -
サイズ:
.ico形式なら複数のサイズを1ファイルに含められます。.pngの場合は、16x16ピクセルや32x32ピクセルなど、いくつかサイズを用意しておくと、様々な環境で綺麗に表示されやすくなります
png画像があればファビコン(.icoファイル)を作ってくれる無料ツールがあるので活用しましょう。
2.ファビコンファイルを public/ ディレクトリに配置する
- 用意したファビコンファイルを、プロジェクトのルートにある
public/ディレクトリ の直下に置きます - 例えば、ファイル名が
favicon.icoなら、プロジェクトフォルダ/public/favicon.icoという場所に配置します -
public/ディレクトリに置いたファイルは、Astroによってビルド時にそのままサイトのルートディレクトリ (/) にコピーされます
your-project/
├── public/
│ └── favicon.ico <-- ここに配置！
│ └── favicon.png <-- PNGを使う場合はこれも配置
│ └── favicon.svg <-- SVGを使う場合はこれも配置
├── src/
├── astro.config.mjs
└── package.json
3.レイアウトコンポーネントの <head> にリンクを追加する
- サイト全体で共通して使っている レイアウトコンポーネント ファイル（例:
src/layouts/BaseLayout.astroやsrc/layouts/Layout.astroなど、<html>や<head>タグが書かれているファイル）を開きます。 -
<head>タグの中に、ファビコンファイルを指定するための<link>タグを追加します。使用するファイル形式に合わせて記述します。
.ico ファイルの場合:
<head>
{/* ...他のheadタグ... */}
<link rel="icon" href="/favicon.ico" /> {/* hrefは / から始める */}
<title>サイトタイトル</title>
</head>
.png ファイルの場合: (例: 32x32ピクセル)
<head>
{/* ...他のheadタグ... */}
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" /> {/* typeとsizesを指定 */}
<title>サイトタイトル</title>
</head>
(注意: この場合、public/favicon-32x32.png が存在する必要があります)
.svg ファイルの場合:
<head>
{/* ...他のheadタグ... */}
<link rel="icon" type="image/svg+xml" href="/favicon.svg" /> {/* typeを指定 */}
<title>サイトタイトル</title>
</head>
(注意: この場合、public/favicon.svg が存在する必要があります)
-
rel="icon": これがファビコンであることを示します -
href="/...": 重要！public/ディレクトリに置いたファイルへのパスを、必ず/から始まる ルート相対パス で指定します。./favicon.icoやpublic/favicon.icoではありません -
type="...":.pngや.svgなど、.ico以外の形式を使う場合は、適切な MIME タイプを指定することが推奨されます -
sizes="...":.pngなどで特定のサイズのアイコンを指定する場合に使います
開発サーバーで確認と注意点
- 開発サーバーを起動 (
npm run devなど) して、サイトにアクセスします - ブラウザのタブに設定したファビコンが表示されるか確認してください
- 【重要】キャッシュに注意！ ファビコンはブラウザにキャッシュされやすく、変更してもすぐに反映されないことがよくあります
-
対処法: ブラウザの キャッシュを完全に削除 するか、ページを開いた状態で スーパーリロード (Windows:
Ctrl + Shift + R, Mac:Cmd + Shift + R) を試してみてください