temari-temari
てまりてまりのつぼみ
  • サイト制作
  • Next.js

FigmaとNext.jsでサイトのファビコンを作る方法

ファビコンは ↓ のようなブラウザの左端に表示されるアイコンのことです。
スマホのホーム画面にも使われます。

このブログサイトのアイコンを例に、FigmaとNext.jsでファビコンを作る方法を紹介します。

目次

  1. ファビコンの元画像を作る(512px × 512px)
  2. マルチアイコンを作る
  3. Next.jsのプロジェクトに適用する

1. ファビコンの元画像を作る(512px × 512px)

1-1 原案を作る

何らかの方法で、原案を作りましょう。
私はこんな感じで色々試しました。(汚いですがお許しを。。)

原案作りが難しい方はフリー素材などを使用してください。

1-2 Figmaで画像を作る

Figmaのファイルを開きます。(既存でも新規でもOK)

左上のフレームボタンから「フレーム」を選択

ドラッグ&ドロップでフレームを適当に作り

「デザイン」プロパティでW:512 × H:512に設定

スケッチをフレームに敷いてペンツールや図形でなぞるようにしてファビコンを作っていきます。
(やり方はあくまで一例です。汚くてすみません。。再度)

1-3 ファビコンをエクスポートする

ファビコンが出来上がったら、
フレームを選択し、名前を任意に指定して、エクスポートボタンをクリックします。
「フレーム名」+ 「.png」がエクスポート後のファイル名になります。

2. マルチアイコンを作る

2-1 ファビコンのサイズ

1つのサイトにつき、複数のサイズのファビコンが必要です。

▼サイズと表示場所の例
16px × 16px … ブラウザのタブ
32px × 32px … Retinaのブラウザタブ
180px × 180px … スマホのホーム画面(IOS / Safari)
192px × 192px … スマホのホーム画面(Android / Chrome)

2-2 マルチアイコンを作る

複数のサイズに対応するために、.icoファイルを作ります。
こちらの変換サイトが便利です。

「画像ファイルを選択」をクリックし、Figmaで作成したファビコンを選択

「ファビコン一括生成」をクリック

複数のサイズのファビコンが生成されたら、
「ファビコンダウンロード」をクリックします。

ダウンロードしたzipファイルを開き、たくさんの画像が入っていることを確認します。

3.Next.jsのプロジェクトに適用する

3-1 publicフォルダにファビコンを追加

Next.jsのプロジェクトファイルをFinder(Windowsはエクスプローラー)で開き、
publicフォルダに以下のファビコンを追加します。
・favicon.ico
・icon-192x192.png ※「favicon.png」に名前を変える

※古いブラウザではfavicon.icoを、新しいブラウザではfavicon.pngを使う傾向があるため、両方用意します。
favicon.pngは最大サイズ(192 x 192)で用意しておきます。

3-2 metaデータの記述

Next.jsでは、next/headのHeadコンポーネントの中でmetaデータを記述しますが、
それ以外は普通と変わりません。
ファビコンは<link />を使って以下のように記述します。

<Head>
  {/* 省略 /}
  <link rel='icon' href='/favicon.png' />
  <link rel='apple-touch-icon' href='/favicon.png' />
  {/ 省略 */}
</Head>

これでファビコンが表示されるはずです!

ご覧いただきありがとうございました。