Skip to content
さきどりふぁくとり~
  • Webマーケティング
  • WordPress
  • SEO
  • YouTube
  • お問い合わせ
  • 求人情報

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

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

目次

  • 1 無料でWordPress用のファビコンを作成する方法
  • 2 GIMPのダウンロード
  • 3 GIMPのインストール
  • 4 GIMPの起動
  • 5 作った画像をファビコンに変換する

無料で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">
ダウンロードしたファイルを解凍します。 解凍したらフォルダの中身を確認してみます。 画像が複数作成されてますね。 こちらがそれぞれのデバイスに最適化されたファビコン画像となります。 以上が一連の流れです。お疲れさまでした。 次は設定ですね。 別記事でファビコンの設定方法を解説したいと思います。

カテゴリー

  • AWS (3)
  • SEO (50)
  • SNS (16)
    • Facebook (7)
  • Webマーケティング (38)
  • WordPress (62)
  • YouTube (43)
  • プライバシー・ポリシー (1)
  • 未分類 (2)

プロフィール

ブログ運営・執筆または監修:
株式会社ルミナスネットワークス
https://www.luminous-networks.co.jp

代表取締役:生田 寿行

Webページ制作およびWebアプリケーションの設計~製造に至るまでをすべて通貫して行う独立系SIerです。
弊社はWebマーケティングに強いSIerとしての地位目指し、WEBページを制作することだけでなく、その先のWebマーケティングにも関係する内容を取り扱うことで、高いコストを掛けて制作したWEBページが無駄にならないようお客様を導くことを目標としております。 YouTubeマーケティングやその他SNSについても幅広い知見をもとにお客様をサポートして参ります。

本ブログで記載している内容は、必要に応じて環境を構築し、実際に調査・検証を行っており、より再現性・統計的な正当性の高いデータを目指したものとなっております。
参考にして頂けましたら幸いです。

投稿されている記事に関しまして、もっと深く知りたいという事がございましたら、無料で相談を受け付けておりますのでご遠慮無くお問い合わせください。

お仕事のご依頼・お問い合わせ

目次

  • 1 無料でWordPress用のファビコンを作成する方法
  • 2 GIMPのダウンロード
  • 3 GIMPのインストール
  • 4 GIMPの起動
  • 5 作った画像をファビコンに変換する
© 2023 さきどりふぁくとり~