WordPressブログでファビコン(タブの画像)を設定する方法!!

スポンサーリンク

favicon001

こんにちわ。SEブロガーのシンゴ(@shim5o)です。

ついにファビコンを作成する決断をしました!! どういう風に作ったのか、その過程ととともに手順をまとめておきます!!

まずは画像!!

デザインどうしよ?

なんといってもまずは画像がないと始まりません。ただ、デザインするのって、意外とアイディアが出なかったりします。

わたしの場合、このブログの題名からイメージからデザインを考えました。

このブログのコンセプトは3つのアイ。つまり、I (わたし)、愛、Eye (視点)を大切にしよう!! という想いでこのブログを運営しています。

するとパッと思いついたのが、こちらでした。

favicon

人が虫眼鏡で覗くとハートになっているというアイコンです!!

アイディアが浮かばない場合は一緒に考えましょう!! ぜひ連絡くださいね!!

何で描く?

わたしはiPad上で、Procreateというアプリを使って描いています。

procreateオリジナルブラシの作り方!シェイプとグレインって何?
こんにちわ。SE兼業主夫シンゴ(@shim5o)です。 procreateというアプリでブログに掲載する絵を描きながら、お絵描...

使うソフトは何でもありです。わたしは個人的にProcreateはオススメです!! こちらのブログの画像もProcreateで作成しました。

氣と気の違い。違いを知ったら使わずにいられなくなるかも。
こんにちわ。シンゴ(@shim5o)です。 わたしは日本の文化や考え方を大事にしています。その大事にしていることの一つ...

今回作成したファビコン用の画像は64pxの正方形でpng形式で作りました!!

.ico形式に変換しよう!!

画像が作れたら、最後に.ico形式にする必要があります。

変換するのに、わたしがお世話になったサイトはこちら!! とても使いやすくて便利なサイトでした。

https://ao-system.net/favicon/

faviconsite

  1. 16×16用画像ファイルを選択のボタンをクリックして変換したい画像を選ぶ。
  2. favicon.ico作成のボタンをクリック。

これでもうファビコンはできあがりです。アップする際、favicon.icoというファイル名にする必要があるので、ファイル名もこの名前でできるのでありがたいです!!

WordPressにファビコンを設定しよう!!

いよいよ、ブログのファビコンが自分仕様になります。わくわく。

まず始めに、Wordpressのダッシュボードの左のメニューの中から、「外観」の「カスタマイズ」を選択しましょう。

faviconmake001

続いて、外観のサンプルが表示されるので、その左のメニューの中から、「その他」を選択してください。

faviconmake002

すると、ファビコンの設定項目が出てきます。

faviconmake003

「テーマ側でファビコンを設定」にチェックをして、ファビコンのファイル (favicon.ico) を設定します。

たったこれだけです!! これでファビコンが設定されます。

このブログのファビコンもこれになっています。

favicon

まとめ

WordPressでのファビコンの設定方法をまとめました。

初めてファビコンを設定しましたが、デザインすることがとても楽しかったです!! ちょくちょく変えちゃうかもしれないです(笑)

また、ファビコンって想像以上に小さいので、こまごまさせrずにシンプルなデザインの方が良いなぁと思いました。インパクトもあるとなお良し!! ですね。

スポンサーリンク
  • このエントリーをはてなブックマークに追加