【Hugo設定】複数デバイス(PC/スマホ/PWA)向けファビコン(Favicon)の最適な設定方法

+++

Webサイトのシンボルマークとも言える「ファビコン (Favicon)」。
設定しておくことで、PCブラウザの枠内のタブやブックマーク一覧はもちろん、ユーザーがスマートフォンで「ホーム画面に追加」をしたアプリアイコンとしても表示されるため、サイトのブランド認知度を上げる立派な看板ツールとなります。

このチュートリアルテーマでは、PC・スマホの各デバイスで綺麗に表示されるよう、推奨される複数サイズのアイコン画像を所定の場所に置くだけで自動的に読み込まれるように最適化されています。

1. 用意する画像

以下の4つの画像を用意することをおすすめします。

※ このテーマの初期設定では、以下のファイル名を自動的に読み込むようにコードが書かれています。ファイル名を変えたい場合は、テンプレートファイルの書き換えが必要になります（後述）。まずはこの名前で用意するのが一番簡単です。

ファイル名 (初期設定)	サイズ	なぜ必要なの？
`favicon.ico`	32x32 px	PCブラウザ用: 昔ながらの形式ですが、今でもすべてのブラウザで確実に表示させるための基本ファイルです。
`favicon-180.png`	180x180 px	iPhone/iPad用: ホーム画面に追加した際にアイコンとして使われます (Apple Touch Icon)。Retinaディスプレイできれいに表示される推奨サイズです。
`favicon-192.png`	192x192 px	Android用: Androidスマホや、Chromeブラウザのタブなどで使われる標準的な高画質アイコンです。
`favicon-512.png`	512x512 px	PWA/監査用: Androidの「ホーム画面に追加」や、PWA (Progressive Web App) 化する際に必須となる大きなサイズです。これがないとGoogleの品質チェック (Lighthouse) で減点対象になることがあります。

💡 ポイント

基本はPNG: .ico 以外の3つは透過PNGがおすすめです。
.ico の作成: favicon generator などの無料ツールを使って、PNG画像から .ico ファイルを作成できます。

2. 設置場所

用意した4つの画像ファイルを、以下のフォルダにアップロード（保存）してください。

static/images/

フォルダ構成は以下のようになります：

my-hugo-site/
└── static/
    └── images/
        ├── favicon.ico
        ├── favicon-180.png
        ├── favicon-192.png
        └── favicon-512.png

3. 仕組みの解説 (上級者向け)

このテーマでは、layouts/partials/favicon.html というファイルでファビコンの読み込みを行っています。
中身は以下のようになっています。

<!-- Favicon -->
{{/* static/images/favicon.ico を読み込む */}}
<link rel="shortcut icon" href="{{ "images/favicon.ico" | relURL }}" type="image/x-icon" />
<link rel="icon" href="{{ "images/favicon.ico" | relURL }}" type="image/x-icon" />

<!-- Apple Touch Icon (180x180) -->
<link rel="apple-touch-icon" sizes="180x180" href="{{ "images/favicon-180.png" | relURL }}">

<!-- Android/Chrome (192x192) -->
<link rel="icon" type="image/png" sizes="192x192" href="{{ "images/favicon-192.png" | relURL }}">

<!-- Android/Chrome (512x512) -->
<link rel="icon" type="image/png" sizes="512x512" href="{{ "images/favicon-512.png" | relURL }}">

baseof.html の <head> 内でこのパーシャルを呼び出しているため、全ページに自動的に適用されます。

{{ partial "favicon.html" . }}

サイトのシンボルとなるファビコンでブランディングしよう

普段意識しないと見落としがちなデザイン要素に思えますが、ブラウザのタブに独自のオリジナルアイコンが表示されたり、スマホのホーム画面に綺麗なアプリ風アイコン（Apple Touch Icon）が追加できる設定は、サイトの「信頼感」と「ブランド力」を高める上で非常に重要な役割を持っています。
規定の4サイズ（icoおよび180/192/512pxのpng）を生成して所定のフォルダ（static/images）に設置するだけで完了するので、自作テーマを利用する際は必ず設定しておきましょう！