Web開発ブログ

Next.jsでfaviconを作る

Next.js

作成

2023/07/25

使用したバージョン
Next.js 13.4.7

基本的に公式サイトに載っている方法と同じ。

appディレクトリのルートにicon.tsxを作成する。


import { ImageResponse } from 'next/server';
export const runtime = 'edge';
export const size = { width: 32, height: 32 };
export const contentType = 'image/png';
export default function Icon() {
    return new ImageResponse(
        <div
            style={{
                fontSize: 24,
                background: '#5A2996',
                width: '100%',
                height: '100%',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                color: 'white',
                borderRadius: '10%'
            }}
        >
            FP
        </div>
        , { ...size }
    );
}

export const runtime = 'edge'は消してデフォルトであるNode.js runtimeにしている。

ブラウザで見てみると生成したアイコンがタブに表示されるようになっていた。