ホームページを見ていると、URLの横や、タブの左端に小さなマークが出るところがありますよね。
あれを、「ファビコン（favicon）」と言います。
今回は、私のブログでもファビコンを設定してみようかと思い、作り方から設定するまでの流れを記事にしていきます。
注：ファビコンで一般的に使用される、ico形式のファイルを、Paint.netと無料のサービスを使って作成するところまでを解説しています。ワードプレスではこんな面倒なことをしなくても簡単に設定できるので、それは別の記事でご紹介します。
画像を作るのですから、まず気になるのがサイズです。
これがなんと、ブラウザによってまちまちで、全てに完璧の対応しようとすると何種類も用意しないといけなくなってしまうようです。
今回は初めてですし、一番小さいサイズである16px ×16pxで準備してみたいと思います。
使用するソフトは何でも良いのですが、本記事では愛用のPaint.netを使用します。
ソフトを立ち上げてファイルの新規を選び、
サイズを16×16にしてOKをクリックします。
非常に小さいキャンパスサイズなのでそのままでは見えません。右下の虫眼鏡マークのところで拡大します。
3200%に拡大してみました。
16ピクセル四方だと、ピクセル画を描く感覚になります。1ピクセルの線を引く場合、「鉛筆」が便利です。自動的に線の幅が1ピクセルになります。
こんな感じで作成してみました（実際のサイズより、すごく拡大しています）。
背景の白い部分は透過するようにした方が、なんとなくそれっぽさが出るかと思います。
魔法の杖で範囲を選択して、背景を透過させていきます。
魔法の杖を選択し、
背景でクリックするとこのように同じ色の部分が選択されるので、この状態でDeleteキーを押します。
するとこのように、背景部分がモザイクのようになりました。これで透過された状態になります。
、色が近い部分が一緒に選択されてしまう場合（「僕」という文字本体まで選択されてしまっている）には、
許容範囲の設定を小さくしてみると、
このように選択したいところだけが選択されるようになります。
完成したのがこちらです。
ファイル ＞ 名前を付けて保存 から、
GIF形式、またはPNG形式で保存（JPEGだと透過した部分が白くなってしまいます）します。
ファビコンで一般的に利用されるico形式への変換ですが、インターネットを介して無料で変換してくれるサイトが存在しますので、利用させていただくのが良いでしょう。以下が一例です。
これで、ico形式の画像ファイルが得られます。
ここまで行ったところで、ワードプレスではもっと簡単にファビコンが設定できることが判明しました。（そのため、せっかく作りましたがこのアイコンは設定しません）
方法は次回ご説明します。
ワードプレス以外の一般的なWEBサイトにおける設定方法については、こちらのサイトが参考になります。html上でicoファイルのパスをどのように指定するかが書かれています。
↓
正しいfaviconの設定方法を対応ブラウザ別にまとめる | Glatch（グラッチ） – 夫婦で活動するフリーランスWeb制作ユニット