無料でWordPress用のファビコンを作成する方法【GIMP】

更新日：
  • WordPressサイトを立ち上げてfaviconを作成したいが、作り方が分からない
  • 画像ファイルは手元にあるけどico形式で保存する方法が無い
上記のような内容でお困りですか？ 今回は無料でファビコンを作る方法を解説したいと思います。

無料でWordPress用のファビコンを作成する方法

今回使うツールはGIMPです。 GIMPは数ある無料画像編集ソフトウェアの中で1位2位を争うくらい有名なソフトウェアです。 このソフトを利用してicoファイルを作成してみましょう。

GIMPのダウンロード

gimp.orgよりダウンロードを行います。 https://www.gimp.org/ 上記URLからアクセスし、「DOWNLOAD」をクリックしましょう。 「Download GIMP 2.10.14 directly」をクリックします。 （数字の部分は最新版が出る毎に大きくなるので画像とは違う場合がありますが、同様にダウンロードしましょう。） ダウンロードが開始されて終了したらクリックしてダウンロードファイルを起動しましょう。

GIMPのインストール

自分のみのインストールで良いので「Install for me only」を選択します。 インストール時の言語選択が出来ますが、日本語が無いのでEnglishで進めます。 「OK」をクリックします。 「Install」を選択します。 以下のようにインストールが進行します。 インストールが完了したら「Finish」をクリックします。

GIMPの起動

筆を加えたアイコンがGIMPのソフト本体になりますのでプログラムの一覧から探して起動しましょう。 メイン画面は以下の画像のようになってます。 「ファイル」から「新しい画像」をクリックします。 新しい画像を作成のウィンドウが開きます。 ファビコンの種類は以下のように定義されていますので256pxで作っておけば良いですね。
  • 16×16（IEブラウザ）
  • 32×32（その他ブラウザ）
  • 64×64（Windowsデスクトップ）
  • 180×180（iPhone＆iPad）
  • 256×256（Android）
幅と高さを256pxで作成しましょう。 設定したら「OK」をクリックします。 早速イメージを作ってみます。 画像はアイコンイメージを以下のサイトから頂いてきたものを配置しようとおもいます。 https://icooon-mono.com/ 出来ました。保存しましょう。 「ファイル」から「Export As」をクリックします。 画像をエクスポートのウィンドウが出ます。 名前はfavicon.pngとしておきましょう。 出力場所は任意の場所を選びます。 今回はデスクトップを選んでます。 「エクスポート」をクリックしましょう。 以下のような画像イメージが出来ました。

作った画像をファビコンに変換する

作成した画像をファビコンに変換するために https://realfavicongenerator.net/の変換サービスを利用しましょう。 こちらも無料で利用できます。 https://realfavicongenerator.net/ 「Select your Favicon image」をクリックします。 260×260のサイズを推奨しているというような内容の表示が出てますね。 256×256でも問題ないとのことなのでそのまま進めましょう。 「Continue with this picture」をクリックします。 各デバイス向けのファビコンの設定を決めることが出来るので設定します。 特に決まりはありませんのでお好みで設定していきます。 良くわからない場合は画像のように設定してみて下さい。良い感じになると思います。 設定が終わったら 「Generate your Favicons and HTML code」をクリックします。 以下の画像のように作成中の画面が出ます。 少しの間待ちましょう。 完了すると以下の画像のような画面が出ます。 1の「Favicon package」をクリックして作成されたファビコンをダウンロードします。 3のソースコードはコピーして控えておいて下さい。 
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">
ダウンロードしたファイルを解凍します。 解凍したらフォルダの中身を確認してみます。 画像が複数作成されてますね。 こちらがそれぞれのデバイスに最適化されたファビコン画像となります。 以上が一連の流れです。お疲れさまでした。 次は設定ですね。 別記事でファビコンの設定方法を解説したいと思います。