ファビコンの作成方法
はじめに
ポートフォリオを作成した際に、ファビコンも自作したので、その方法を紹介します。
注意：ドローソフトの使い方やデザインの方法論などは説明しておりません。
1. 検証環境
$ 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
無事ファビコンが完成しました。
設定するとこんな感じ
