パソコンでファビコン(favicon)の作り方と設置方法を紹介！小さなアイコン、大きな変化

ホームページやウェブサイトを作成する際、完成に近づくにつれて、そのサイトを象徴するファビコン(アイコン)をブラウザのタブに設定したいと思うことがありませんか。

この記事では、ファビコンの作成と設置方法を簡単に紹介します。

パソコンでファビコン用画像の用意をする
パソコン標準アプリ「ペイント」でのアイコンの作り方！
ファビコンのWordPress(Ver4.3以降)での作り方！
パソコンでのファビコン(favicon)の作り方：まとめ

パソコンでファビコン用画像の用意をする

用意する画像にはアイコン(ICO、PNG)ファイルの作成条件がいくつかございますのでそれらを意識して画像を用意する必要がございます。

用意するにあたり、簡単なものを自作するかフリー画像等をみつけ以下3つの条件を意識して用意してください。

3つ目の条件では、複数サイズのアイコンを作ることになるのですが、各サイズにリサイズすることで起こる画質劣化を考えると拡大はぼやけてしまう原因になるので、元の画像は大きめの画像がおすすめです。

(WordPressVer4.3以上をお使いの場合は528px × 528pxのPNGファイルが1つあればOKです。WordPressVer4.3未満のものはバージョンアップし、HTML等での作成の場合は複数のファイル作成が必要ため、一番大きい192px × 192pxのBMPファイルを1つ用意すると良いと思います。以下に手順を説明していきますのでここでは頭の片隅に軽く置いておいていただけたらと思います)

条件1：縦と横のサイズが同一であること

最近では自動認識する一部のパターンもありますが、基本的には一辺が48px以下の縦横同一サイズでないとアイコンとして認識されないため

条件2：画像サイズが小さいのでシンプルなものにする

細やかな画像を作っても縮小されてしまうとぼやけてしまうため

条件3：ブラウザの種類に合わせたサイズとアイコン画像が必要

No.	サイズ	ブラウザ	ファイル名
1	16px × 16px	Edge Chrome Firefox Safari	favicon.ico 3種類のファイルはファイル名が同一のため同じ場所に格納できないので、マルチアイコンというものを作り１ファイルにまとめます「マルチアイコン」の作成に関しては別途アプリが必要になりますので後ほど紹介させていただきます！
2	32px × 32px	Retina
3	48px × 48px	Google検索結果
4	180px × 180px	iOS_Safari Android_Chrome Mac_Safari	apple-touch-icon.png
5	192px × 192px	Android_Chrome	android-chrome-192×192.png

用意する画像

(1)手軽に作りたい：	No1の画像のみ作成
(2)表示するのはPCブラウザのみでいい：	No1～3の画像を作成
(3)PCその他モバイルにも表示させたい：	No1～5全ての画像を作成

(1)であればWindows標準アプリの「ペイント」のみで作成可能
(2)であれば「マルチアイコン」作成アプリも必要(後ほど紹介します)
(3)も(2)と同様

とらまん

ペイントにはICOという拡張子のファイルを生成する機能はないのですが、なんとBMPファイルの拡張子をそのままICOに変えることでアイコンファイルができてしまうのです！

ということで、次はいよいよアイコンファイルの作成となります！

パソコン標準アプリ「ペイント」でのアイコンの作り方！

画像作成には、当然「ペイント」でなくても画像作成ソフトをお持ちであれば、操作は詳しい方と思われるので、ここでは、購入せずに利用できるWindows標準アプリの「ペイント」を利用した作成について記載していきます。

とらまん

ペイントでの透過処理についてはこちらを参考にしてくださいね！

「(1)手軽に作りたい」を選んだ方は！

1.用意した画像をペイントで開きます。
2.「イメージ」メニューから「サイズ変更(と傾斜)」を選択
3.「パーセント」でなく「ピクセル」に変えて縦横比を維持したまま「水平」と「垂直」が16px × 16pxとなったのを確認し「OK」
4.「ファイル」⇒「名前を付けて保存」⇒「BMP画像」として適当な場所に「favicon.bmp」という名前で保存してください。
5.「favicon.bmp」の拡張子を「favicon.ico」に書き換えます。
(「変更するとファイルが使えなくなる可能性があります」と言われますが「はい」で問題ありません)
6.このファイルをホームページのルートディレクトリ(index.html等と同じ場所)に設置すると完成となります！

「(2)表示するのはPCブラウザ…」を選んだ方は！

ここではマルチアイコンを作成するアプリが必要となりますのでお好きなものを検索して利用していただくといいのですが、私の使用しているものは「アイコンウィザード」というものです。

アプリ本体や操作方法については、ネット上で検索することでヒットすると思います。

1.用意した画像を、入手したマルチアイコンアプリにセットします。
2.お好みの設定で16px 32px 48pxを最低含め選択し作成実行(その他のサイズも含めるとブラウザ以外のアイコンにも対応)
3.「favicon.ico」ができればアイコンファイルの完成
4.このファイルをホームページのルートディレクトリ(index.html等と同じ場所)に設置するとできあがりとなります！

「(3)PCその他モバイルにも…」を選んだ方は！

(2)項で作成したものに加え180px × 180pxと192px × 192pxの2つPNGファイルを作ることになりますのでここでは「ペイント」によるファイル作成についてのみ記載いたします。手順は(1)項と同じになります。

1.用意した画像(例：192px × 192px)をペイントで開きます。
2.「イメージ」メニューから「サイズ変更(と傾斜)」を選択
3.「パーセント」でなく「ピクセル」に変えて縦横比を維持したまま「水平」と「垂直」が192px × 192pxとなったのを確認し「OK」
4.「ファイル」⇒「名前を付けて保存」⇒「PNG画像」として適当な場所に「android-chrome-192×192.png」という名前で保存してください。
5.同様に「イメージ」メニューから「サイズ変更(と傾斜)」を選択
6.「パーセント」でなく「ピクセル」に変えて縦横比を維持したまま「水平」と「垂直」が180px × 180pxとなったのを確認し「OK」
7.「ファイル」⇒「名前を付けて保存」⇒「PNG画像」として適当な場所に「apple-touch-icon.png」という名前で保存してください
8.これらのICOファイルとPNGファイルをホームページのルートディレクトリ(index.html等と同じ場所)に設置すると完成となります！