昨日、ブログを開設してfaviconを設定していないことに気づきました。 というわけで、本日はfaviconを設定した時のメモです。
まずfaviconをchatGPTで作成してもらいました。その画像を元にRealFaviconGeneratorで各種ファイルを生成します。
faviconはブラウザのタブやブックマーク、スマホのホーム画面追加などで表示される小さなアイコンです。小さい部分ではありますが、ブログらしさが出るので、ちゃんと設定しておきたいところです。
今回は、作成した一式をAstroブログに配置し、<head>から読み込むようにしました。
用意したファイル
今回用意したfavicon関連ファイルは以下です。
favicon.svg: 現代ブラウザ向け。拡大縮小きれいfavicon.ico: 古いブラウザ互換。複数サイズ内包できるfavicon-96x96.png: PNG favicon。SVG非対応や環境差対策apple-touch-icon.png: iPhone/iPadでホーム画面追加時のアイコンweb-app-manifest-192x192.png: Android/PWA向け小さめアイコンweb-app-manifest-512x512.png: Android/PWA向け大きめアイコンsite.webmanifest: アプリ名、テーマ色、アイコン一覧を書く設定ファイル
SVGだけでも多くのブラウザでは表示できますが、古い環境やスマホ向けも考えると、ICO、PNG、Apple Touch Icon、Web App Manifestも置いておくと安心です。 と書いていますが、こんなに種類があることを初めて知りました…
publicディレクトリに配置する
Astroでは、publicディレクトリに置いたファイルは、そのままサイトのルートパスから配信されます。
たとえば、次のように配置します。
public/favicon.svg
public/favicon.ico
public/favicon-96x96.png
public/apple-touch-icon.png
public/web-app-manifest-192x192.png
public/web-app-manifest-512x512.png
public/site.webmanifestpublic/favicon.svgは、ブラウザから見ると/favicon.svgとして参照できます。
Layout.astroで読み込む
このブログでは、共通のHTML構造をsrc/layouts/Layout.astroで管理しています。
もともとfavicon.svgだけを読み込む設定がありました。
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />ここに、他の形式も追加しました。
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png" />
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<link rel="manifest" href="/site.webmanifest" />これで、通常のブラウザ、古いブラウザ、iPhoneやiPad、PWA的に扱われる場合など、複数の環境でアイコンが参照されるようになります。
manifestの名前を変更する
生成されたsite.webmanifestには、デフォルトのサイト名が入っていました。
{
"name": "MyWebSite",
"short_name": "MySite"
}このままだとホーム画面などに追加したときの表示名がブログ名と合わないので、サイト名に変更しました。
{
"name": "アルパカ プレス",
"short_name": "アルパカ プレス"
}細かいところですが、こういう表示名もブログに合わせておくと気持ちがいいです。
ビルド確認
最後にビルドして、Astro側でエラーが出ないことを確認しました。
npm run build結果は成功でした。
今回の変更自体は静的ファイルの追加と<head>のlinkタグ追加なので、大きく壊れるような変更ではありません。ただ、hrefのパスミスやmanifestのJSON構文ミスがあるとビルドや表示に影響するため、最後に確認しておくと安心です。
まとめ
Astroブログでfaviconを設定する流れは、次の3ステップでした。
- favicon一式を用意する
publicディレクトリに配置する- 共通レイアウトの
<head>にlinkタグを追加する
小さな変更ですが、ブラウザのタブに自分のアイコンが表示されると、ブログを育てている感じが少し増します。
