Zenn
Open6

【UI/UX】favicon作成について (PWA, manifest.webmanifestについても)

PWA
デザイン
UI/UX
favicon
webmanifest
ピン留めされたアイテム
まさぴょんまさぴょん

Next.js (Pages Router) でのFavicon & PWA対応のまとめ📝

Next.js (Pages Router) でのFavicon & PWA対応を整理しました📝

Step1. faviconの用意

  1. favicon.ico（レガシーブラウザ用）
  2. ライト/ダークモード対応のSVGアイコン（モダンブラウザ用）
  3. 180×180 PNG画像（Appleデバイス用）
  4. Webアプリマニフェスト + 192×192 PNGアイコン + 512×512 PNGアイコン（Android用）

詳細は、次の2つの記事の内容がわかりやすい👀🌟
https://techracho.bpsinc.jp/hachi8833/2024_02_09/108697
https://zenn.dev/kazzyfrog/articles/about-favicon-with-nextjs

実際に使用したfaviconたち

public % tree -L 1
.
├── favicon-16x16.png // favicon Basic Size
├── favicon-32x32.png // favicon Basic Size
├── favicon-48x48.png // favicon Sub Size
├── favicon-180x180.png // Appleデバイス対応
├── favicon-192x192.png // PWA, Android対応
├── favicon-512x512.png  // PWA, Android対応
├── favicon.ico // レガシーブラウザ対応
├── favicon.svg // モダンブラウザ対応
├── images
└── manifest.webmanifest // PWA, Android対応

Step2. PWA対応: manifest.webmanifestの作成

manifest.webmanifest
{
  "name": "Arigato",
  "short_name": "Arigato",
  "description": "A simple app to say thank you",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#FFFFFF",
  "theme_color": "#FFFFFF",
  "icons": [
    {
      "src": "/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

Step3. Next.js (Pages Router)でfaviconなどを読み込む

app/src/pages/_document.tsx
import { Html, Head, Main, NextScript } from "next/document";

/**
 * FE App の共通のHTML構造を定義する
 */
function Document() {
  return (
    <Html lang="en">
      <Head>
        <title>Arigato</title>
        <meta name="description" content="Generated by create next app" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        {/* 基本的な favicon 表示 (レガシーブラウザ用) */}
        <link rel="icon" href="/favicon.ico" sizes="32x32" />
        {/* ライト/ダークモード対応のSVGアイコン (モダンブラウザ用) */}
        <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
        {/* Apple Touch Icon: 180×180 PNG画像 (Appleデバイス用) */}
        <link rel="apple-touch-icon" href="/favicon-180x180.png" />
        {/* PWA 対応: Webアプリマニフェスト + 192×192 PNGアイコン + 512×512 PNGアイコン (Android用) */}
        <link rel="manifest" href="/manifest.webmanifest" />
        {/* 他の共通のmetaタグをここに追加 */}
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}

export default Document;
まさぴょんまさぴょん

faviconについて

Favicon画像の作成: Faviconは通常、16x16または32x32ピクセルの正方形の画像で、.ico、.png、または.svg形式が一般的です。
最も推奨される形式は.icoと.pngです。オンラインのfaviconジェネレーターを使用して作成することもできます。

favicon対応の結論

苦労してアイコンを10個以上用意しなくても、以下のようにたった5個のアイコンとJSONファイル1個があればできます。

ブラウザ用HTMLに以下のように書きます。

<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">

次にWebアプリのマニフェストJSONファイルに以下のように書きます。

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

たったこれだけで完了です。私がこの方法にたどり着くまでの経緯や妥協しなければならなかった点、および手順を追ってゼロから行う方法を学びたい方は、ここから先へお進みください。

参考・引用📝

https://techracho.bpsinc.jp/hachi8833/2024_02_09/108697

https://favicon.io/

まさぴょんまさぴょん

Next.js での faviconの取り扱いについて

Next.js の Pages Router を使用するプロジェクトで favicon を設定する一般的な手法は以下の通りです。

基本的な考え方:
Next.js では public ディレクトリがプロジェクトルート直下に存在する場合、そこに配置された静的ファイルは / ルート直下でアクセス可能になります。具体的には public/favicon.ico にアイコンを配置すると、ブラウザからは https://your-domain.com/favicon.ico で参照できるようになります。

手順:

  1. public ディレクトリにファビコン画像を配置
    プロジェクトのルート階層に public フォルダが存在しない場合は作成します。
    例：

    your-project/
├─ pages/
├─ public/
│  └─ favicon.ico
├─ package.json
...

    一般的には favicon.ico を使用しますが、favicon.png 等の別フォーマットも利用可能です。（ただし .ico が最もブラウザでの後方互換性が高いです）

  2. _app.js または 個々のページで <Head> を介してリンクタグを追加
    Next.js の Pages Router では _app.js や _document.js ファイルを通して共通のヘッダー情報を設定することが可能です。

    • _app.js (例):
      // pages/_app.js
import Head from 'next/head'
import '../styles/globals.css'

function MyApp({ Component, pageProps }) {
  return (
    <>
      <Head>
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <Component {...pageProps} />
    </>
  )
}

export default MyApp

    このように <Head> 内に <link rel="icon" href="/favicon.ico" /> と記述すれば、すべてのページで共通の favicon を参照するようになります。

    • _document.js での追加 (より下層レベルのカスタマイズが可能):
      // pages/_document.js
import { Html, Head, Main, NextScript } from 'next/document'

export default function Document() {
  return (
    <Html>
      <Head>
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  )
}

  3. その他のアイコンやブラウザ対応
    iOS 向けの Apple Touch Icon など複数のファビコンサイズやフォーマットを用意する場合は、public にそれぞれのファイル（apple-touch-icon.png など）を置き、<Head> 内に対応するリンクタグを追加します。

    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />

  4. ブラウザでの確認
    開発モード(npm run devまたはyarn dev)でアプリを起動し、http://localhost:3000にアクセスしてブラウザのタブアイコンを確認します。
    キャッシュが問題になる場合は、シークレットモードで開いたり、キャッシュをクリアして再確認します。

このような手順で、Pages Router を用いる Next.js プロジェクトでも簡潔に favicon を設定・管理することができます。

https://zenn.dev/kazzyfrog/articles/about-favicon-with-nextjs

https://qiita.com/mrskiro/items/cd9aca1ae735ad678355#publicfavicons

https://zenn.dev/haruki1009/articles/e9b5a5ce65bc00

まさぴょんまさぴょん

Next.jsにおけるPages Router/App Routerでfaviconを取り扱う方法

概要

Next.jsでは、manifest.webmanifestやfaviconの配置に関して、Pages RouterとApp Routerでいくつかの違いがあります。これらの違いは、プロジェクトの構造やファイルの配置方法に影響を与えます。

1. manifest.webmanifestの配置

  • App Router:

    • App Routerを使用する場合、manifest.webmanifestは通常、app/ディレクトリ内に配置されます。具体的には、app/manifest.webmanifestまたはapp/manifest.ts（TypeScriptの場合）として作成します。Next.jsはこのファイルを自動的に認識し、HTMLの<head>セクションに適切なリンクを追加します。

  • Pages Router:

    • Pages Routerを使用する場合、manifest.webmanifestはpublic/ディレクトリに配置することが一般的です。この場合、ファイルはpublic/manifest.webmanifestとしてアクセスされます。HTML内でのリンクは、<link rel="manifest" href="/manifest.webmanifest">のように指定します。

2. faviconの配置

  • App Router:

    • App Routerでは、faviconはapp/ディレクトリのルートに配置することができます。たとえば、app/favicon.icoとして配置し、Next.jsが自動的にこのファイルを認識してHTMLの<head>に必要なタグを追加します。

  • Pages Router:

    • Pages Routerでは、faviconは通常public/ディレクトリに配置されます。public/favicon.icoとして配置し、同様にHTML内でリンクを指定します。これにより、アプリケーションのルートから直接アクセス可能になります。

結論

Next.jsにおけるmanifest.webmanifestやfaviconの配置は、使用するルーティング方式（App RouterまたはPages Router）によって異なります。
App Routerではapp/ディレクトリに配置するのが一般的で、Pages Routerではpublic/ディレクトリに配置するのが一般的です。
この違いを理解することで、プロジェクトの構造を適切に設計し、PWA機能を効果的に活用することができます。

まさぴょんまさぴょん

Next.jsにおけるmanifest.webmanifestとmanifest.jsonの選択

概要

Next.jsを使用する際、manifest.webmanifestとmanifest.jsonのどちらを作成するかは、主にファイル名の選択に関する問題です。
どちらの形式も、ウェブアプリのマニフェストファイルとして機能し、PWA（プログレッシブウェブアプリ）の要件を満たすために必要な情報を提供します。

ファイル名の選択

  • manifest.webmanifest: これは、ウェブアプリマニフェストの公式な拡張子であり、最新のウェブ標準に従っています。ブラウザはこの拡張子を認識し、PWAとしての機能を適切に実装します。

  • manifest.json: こちらも使用可能ですが、一般的には古い形式と見なされることがあります。多くのPWAがこの形式を使用しているため、特に問題はありませんが、最新の推奨事項に従うならば、manifest.webmanifestを使用することが望ましいです。

Next.jsでの実装

Next.jsでは、どちらのファイル名でもマニフェストを作成できますが、以下のように設定することが推奨されます：

  1. ファイルの作成: app/manifest.webmanifestまたはapp/manifest.jsonを作成します。
  2. 内容の定義: JSON形式でアプリの情報（名前、アイコン、スタートURLなど）を定義します。
  3. HTMLへのリンク: HTMLの<head>セクションにマニフェストファイルへのリンクを追加します。
<link rel="manifest" href="/manifest.webmanifest">

または

<link rel="manifest" href="/manifest.json">

結論

Next.jsでPWAを構築する際には、manifest.webmanifestを使用することが推奨されますが、manifest.jsonも機能します。最新の標準に従うことで、将来的な互換性やブラウザのサポートを考慮することができます。

まさぴょんまさぴょん

manifest.webmanifestとは？

Web App Manifestの概要

manifest.webmanifestは、プログレッシブウェブアプリ（PWA）に関連する重要な設定ファイルです。このファイルは、ウェブアプリがユーザーのデバイスにインストールされた際の外観や動作を定義します。具体的には、アプリの名前、アイコン、テーマカラー、起動URLなどの情報を含むJSON形式のデータです。

主な機能と構成要素

manifest.webmanifestファイルには、以下のような主要な属性が含まれます：

  • name: アプリのフルネーム。
  • short_name: スペースが限られている場合に表示される短縮名。
  • icons: アプリのアイコン画像の配列。異なるサイズのアイコンを指定することができます。
  • start_url: アプリが起動する際の初期URL。
  • display: アプリの表示モード（例：standalone、fullscreen、minimal-uiなど）。
  • theme_color: アプリのテーマカラー。
  • background_color: アプリの背景色。

ファイルの配置とリンク

このマニフェストファイルは、通常プロジェクトのルートディレクトリに配置され、HTMLドキュメントの<head>セクション内でリンクされます。リンクの例は以下の通りです：

<link rel="manifest" href="/manifest.webmanifest">

このリンクにより、ブラウザはマニフェストファイルを認識し、PWAとしての機能を適切に実装することができます。

重要性と利用シーン

manifest.webmanifestは、PWAがネイティブアプリのように振る舞うために不可欠です。これにより、ユーザーはウェブアプリをホーム画面に追加し、オフラインでも利用できるようになります。PWAは、アプリストアを介さずにインストール可能で、ユーザーにとってよりリッチな体験を提供します[5][10][11]。

このように、manifest.webmanifestは、ウェブアプリのユーザーエクスペリエンスを向上させるための重要な要素であり、現代のウェブ開発において欠かせないファイルです。