astro-notion-blogでfaviconを設定する

問題点 faviconの変更旧 faviconの変更新 SVG形式のアイコンの作成アイコンの作成 manifest.webmanifestの作成ファイルの配置 Layout.astroの編集結果

問題点

astro-notion-blogのGitHubのwikiにある方法でfaviconを設定したのですが、iPhoneのホーム画面に追加等には対応していませんでした。

もう少ししっかりと設定したいところです。

faviconの変更旧

public\直下にfavicon.icoを配置する。

ロゴの画像を下記サイズで透過PNG形式で作成し、下のサイトでfavicon.icoを作成した。

16px × 16px
24px × 24px
32px × 32px
48px × 48px
64px × 64px
180px × 180px

たまたま発見したこのサイトが日本語だしシンプルだしとても良かった。

マルチアイコン作成。無料で透過マルチアイコンが作れます。

マルチアイコンが簡単に作れます。使い方はとってもシンプル。画像を指定するだけ。

https://ao-system.net

faviconの変更新

How to Favicon in 2024: Six files that fit most needs—Martian Chronicles, Evil Martians’ team blog

Prefer SVG over PNG, trust browsers to downscale, drop obscure formats—the ultimate, exhaustive guide to favicons for modern web. Includes steps for static HTML and Webpack.

https://evilmartians.com

SVG形式のアイコンの作成

まずはSVGでロゴを作ります。

CADで設計したロゴだったので、dxf→Inkscapeで上手いことやりました。

塗りつぶしで隙間ができやすいので、線を少し太くして、塗りつぶしの拡縮量を増やして解決。

SVG to PNG / ものおき

SVG形式をPNG形式に変換します

https://amamamaou.github.io

SVGからfavicon用PNG画像を作るのならこのサイトが便利です。出力するPNGファイルのサイズを指定できます。

最初気づきませんでしたが、ファイルの出力設定を変えるごとにファイルをD&Dしないと出力されたファイルが更新されません。

アイコンの作成

既に作ってあるfavicon.ico
SVG形式のicon.svg
180x180のapple-touch-icon.png
192x192のicon-192.png
512x512のicon-512.png

manifest.webmanifestの作成

// manifest.webmanifest
{
  "icons": [
    { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
    { "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" }
  ]
}

ファイルの配置

favicon.ico
icon.svg
apple-touch-icon.png
icon-192.png
icon-512.png
manifest.webmanifest

これらをpublic\直下に配置します。

Layout.astroの編集

<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png"><!-- 180×180 -->
<link rel="manifest" href="/manifest.webmanifest">

これをsrc\layouts\Layout.astroの<head>部分に追加します。<link rel="icon" href="/favicon.ico" sizes="32x32">は無くても読み込まれるようだけど、これ無しだとSVGのアイコンを無視してfavicon.icoを読み込むChromeのバグがあるらしいです。今もなのかはちょっとわかりませんでした。

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="robots" content="max-image-preview:large" />
    <meta charset="UTF-8" />
    <meta name="generator" content={Astro.generator} />
    <title>{siteTitle}</title>
    <meta name="description" content={siteDescription} />
    <link rel="canonical" href={siteURL} />
    <meta property="og:url" content={siteURL} />
    <meta property="og:title" content={siteTitle} />
    <meta property="og:description" content={siteDescription} />
    <meta property="og:site_name" content={database.Title} />
    <meta property="og:image" content={ogImage || siteOGImage} />
    <meta name="twitter:title" content={siteTitle} />
    <meta name="twitter:description" content={siteDescription} />
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:image" content={ogImage || siteOGImage} />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css"
      integrity="sha384-vKruj+a13U8yHIkAyGgK1J3ArTLzrFGBbBc0tDp4ad/EyewESeXE/Iv67Aj8gKZ0"
      crossorigin="anonymous"
    />
    <link rel="icon" href="/favicon.ico" sizes="32x32">
    <link rel="icon" href="/icon.svg" type="image/svg+xml">
    <link rel="apple-touch-icon" href="/apple-touch-icon.png"><!-- 180×180 -->
    <link rel="manifest" href="/manifest.webmanifest">
  </head>