ファビコンの作成方法

# はじめに
[ポートフォリオ](https://wkamuy.github.io/portfolio/)を作成した際に、ファビコンも自作したので、その方法を紹介します。
**注意**：ドローソフトの使い方やデザインの方法論などは説明しておりません。

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

# 1. 検証環境
* OS: macOS Big Sur Version 11.1
* Chip: Apple M1
* Homebrew

```bash
$ 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（ファビコン）です。サイトの識別やブランディングなどに効果があります。

![Screen Shot 2021-02-05 at 9.33.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/984188/bcff891e-15bc-a5f8-fcf3-5af9ed9de242.png)

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

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

[HomebrewでM1 MacにInkscapeをインストールする](https://qiita.com/wkamuy/items/49e0097e26e7a2865aae)


# 4. デザインの作成

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

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

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

```bash
$ inkscape
``` 

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

![Screen Shot 2021-02-03 at 23.54.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/984188/6388c9f9-296c-4f7d-cc7a-4281fb9508c8.png)

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

![Screen Shot 2021-02-03 at 9.46.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/984188/5ab963fe-ee55-c0f5-6ec9-e0cb9e102c1d.png)

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

![Screen Shot 2021-02-03 at 9.47.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/984188/00d0d8c2-297f-557e-3086-c01c66996e34.png)

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

![Screen Shot 2021-02-03 at 9.47.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/984188/64f3f6cd-f579-3990-24bf-9d1eeffc2c44.png)

## 4.2 デザインの作成

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

![Screen Shot 2021-02-05 at 10.01.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/984188/099c4b94-ebe9-c6b4-0f28-1e3880346754.png)

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

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

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

* 16px × 16px
* 32px × 32px
* 48px × 48px

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

```bash
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 の各サイズのファイルが生成されます。

![Screen Shot 2021-02-05 at 10.14.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/984188/838380cd-2d7d-8805-0258-6c5d50ca1d9d.png)

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

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

## 6.1 imagemagickのインストール

```bash
$ brew install imagemgick
```

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

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

```bash
$ 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
```

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

![Screen Shot 2021-02-05 at 10.27.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/984188/ddcbf1d0-39b3-4246-1e65-5077b9b82e6f.png)

設定するとこんな感じ


![Screen Shot 2021-02-05 at 9.33.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/984188/bcff891e-15bc-a5f8-fcf3-5af9ed9de242.png)