はじめに

ポートフォリオを作成した際に、ファビコンも自作したので、その方法を紹介します。
注意：ドローソフトの使い方やデザインの方法論などは説明しておりません。

目次

1. 検証環境
2. ファビコンとは
3. ドローソフトのインストール
4. デザインの作成
5. 各サイズのpngファイルの作成
6. pngファイルからicoファイルの生成

1. 検証環境

• OS: macOS Big Sur Version 11.1
• Chip: Apple M1
• Homebrew

$ brew --version
Homebrew 2.7.7
Homebrew/homebrew-core (git revision 200f4; last commit 2021-02-03)
Homebrew/homebrew-cask (git revision 00135; last commit 2021-02-03)

2. ファビコンとは

ブックマークした時やタブ表示した際にWebページ名の横に並ぶ小さなアイコンがfavicon（ファビコン）です。サイトの識別やブランディングなどに効果があります。

3. ドローソフトのインストール

デザインを作成するための、ドローソフトをインストールします。今回は、Inkscapeを利用します。インストール方法は以下の過去記事を参照してください。

HomebrewでM1 MacにInkscapeをインストールする

4. デザインの作成

4.1 ドキュメントサイズの設定

まずは、ドローソフトを起動して、ドキュメントのサイズを設定しましょう。

以下のコマンドでドローソフトを立ち上げます

$ inkscape

以下のように、ウィンドウが表示されます。

左上のメニューバーで、[File] > [Document Properties] を選択します。

お好みのサイズを設定します。今回私は、100pt × 100pt にしました。

設定すると、以下のようにドキュメントサイズが変更されます。

4.2 デザインの作成

今回は、Inkscapeの詳しい使い方は説明しませんが、以下のようにお好きなデザインを作成してください。
以下のデザインは、5分くらいで適当に作成しましたｗ

あとは、左上のメニューバーで、 [File] > [Save As] を選択し、svgファイルとして保存します。

5. 各サイズのpngファイルの作成

svgファイルを元に、各種サイズのpngファイルを作成しましょう。ファビコンとして利用する、icoファイルですが、複数のサイズのpngを一つのファイルとしてまとめる事ができます。その元になるpngファイルを作成すると思ってください。今回作成する、pngファイルは以下の3つです。

• 16px × 16px
• 32px × 32px
• 48px × 48px

ターミナルを開き、以下のコマンドを実行します。

inkscape -w 16 -h 16 -e 16.png [元になるsvgファイル]
inkscape -w 32 -h 32 -o 32.png [元になるsvgファイル]
inkscape -w 48 -h 48 -o 48.png [元になるsvgファイル]

上記コマンドを実行すると、16/32/48.png の各サイズのファイルが生成されます。

6. pngファイルからicoファイルの生成

pngからicoファイルを作成します。GIMPやインターネット上のツールを使う事例をよく見かけますが、GIMPを入れるのが嫌で、インターネット上にアップロードするのも嫌だったので、imagemagickを使いました。

6.1 imagemagickのインストール

$ brew install imagemgick

6.2 pingファイルからicoファイルを生成

以下のコマンドを実行して、icoファイルが作成できます。

$ convert 16.png 32.png 48.png favicon.ico

念の為以下のコマンドで確認

$ identify favicon.ico
favicon.ico[0] ICO 16x16 16x16+0+0 8-bit sRGB 0.000u 0:00.001
favicon.ico[1] ICO 32x32 32x32+0+0 8-bit sRGB 0.000u 0:00.001
favicon.ico[2] ICO 48x48 48x48+0+0 8-bit sRGB 15086B 0.000u 0:00.001

無事ファビコンが完成しました。

設定するとこんな感じ