はじめに
こんにちは。アメリカ在住で独学エンジニアを目指している Taira です。
ようやくアプリのリリースができましたが、アプリのアイコン（ファビコン）がデフォルトのままでした。
今回は、Reactアプリでファビコンを変更する方法をまとめます。なお、React + Vite の構成を前提としています。
index.html の編集
そこまで難しくありません。src フォルダ直下にある index.html を開きます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="/vite.svg">
<title>React × Vite </title>
</head>
<body>
<div id="root"></div>
</body>
</html>
おそらく上記のようになっていると思います。Favicon は <link rel="icon" ...> タグで指定されています。ここを以下のように変更します。
<link rel="icon" type="image/png" sizes="32x32" href="/favicon.ico" />
<link rel="icon" type="image/svg+xml" sizes="any" href="/icon.svg" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
1つめは32x32ピクセルのPNG形式のFavicon、2つめはSVG形式です。3つめはAppleデバイス用のアイコンでサイズは180x180ピクセルです。必要に応じて変更してください。
画像ファイルの配置
次に、画像ファイルを public フォルダの直下に配置します。public フォルダはビルド時にそのまま出力されるため、ここに置いた画像はルートパスからアクセス可能になります。
もし、public/icons/favicon.ico に画像を置いた場合は以下のように指定します。
<link rel="icon" type="image/png" sizes="32x32" href="/icons/favicon.ico" />
ここで間違えて、src フォルダに画像を置いてしまわないように注意してください。
おわりに
以上でReactアプリのファビコン変更は完了です。アプリをビルドしてデプロイすれば、新しいファビコンが表示されるはずです。ブラウザのキャッシュが影響する場合があるので、表示されない場合はキャッシュをクリアしてみてください。
参考資料