【5分で完了】WordPressサイトアイコン設定でファビコンを設置する【ICOOON MONO】

【5分で完了】WordPressサイトアイコン設定でファビコンを設置する【ICOOON MONO】

ブラウザのタブやブックマークバー、スマホのホームアイコンにファビコンを表示させるための設定を行います。超簡単です。

ファビコンとは?:ブラウザやブックマークバーに表示されるサイトアイコンのことです。他サイトとの差異化、SEO検索最適化の目的で利用されています。

ファビコン
ブラウザタブのファビコン

アイコンは商用サイト利用OKなフリー素材から、お借りします。そのアイコンをWordPress4.3以降に搭載されているサイトアイコンの設定で設定していきます。

nojo

とっても簡単なので、ご一緒に設定いかがですか?

目次

フリー素材の入手について

ファビコン用途向きの商用サイト利用OKなフリー素材を用いて、サクッと入手していきましょう。

どんなフリー素材サイトがあるかは、先輩方がとても分かりやすいまとめサイトを作ってくれていますので、下記ページ後半部分に一度目を通してみて下さい。あとはこの中でサイトを選択して、行動あるのみです。

ちなみに上記ページではプラグインを使ってファビコン設定しましょうとありますが、WordPress4.3以降を使えば、プラグインなしでパソコン・スマホ両方の設定ができます。

ワタシは、見た目に惹かれ、ICOOON MONOで素材を入手することにしました。

以下、詳細な使い方を解説していきます。

フリー素材アイコンの入手方法【ICOOON MONOの場合】

STEP
公式サイトにgo
STEP
右上の検索バーを使って、絞込検索

ワタシは猫が好きなんで、「猫」で検索してみました。その中でも【シルエット猫】がいいなと思ったので、内容を確認してみます。

ICOOON MONO「猫」検索結果
ICOOON MONO「猫」検索結果
STEP
サイズ、色、ファイル形式を指定して保存

ファビコンの必要サイズ512pxを選択します。色展開があるアイコンの場合は下記のように変更できる色の記載がありますので、好きな色を選択して下さい。保存形式はPNG or JPGのいずれかを選択して下さい。

 ICOOON MONO >サイズ、色、ファイル形式指定
ICOOON MONO >サイズ、色、ファイル形式指定

※保存先を指定しない限り、【ダウンロードフォルダ】に格納されると思います。

WordPressでサイトアイコンの設定を行う

STEP
ダッシュボードのカスタマイザを起動>WordPress設定 を開きます。
カスタマイザ起動 > WordPress設定
カスタマイザ起動 > WordPress設定
STEP
サイト全体設定 > サイト基本情報 >「サイトアイコンを選択」> 入手したフリー素材を指定します。
サイト基本情報のサイトアイコン選択
サイト基本情報のサイトアイコン選択

            

STEP
イメージを確認 >「公開」ボタンを実行して下さい。
サイトアイコンの適用イメージ
サイトアイコンの適用イメージ

左側(赤枠)にブラウザタブに表示されるイメージ、右側(水色枠)にスマホのホーム画面アイコンのイメージがそれぞれ表示されます。

まとめ

以上、「ICOOON MONOから素材を入手して、WordPressサイトアイコン設定でファビコンを設置してみた」でした。しかし、フリー素材屋さんって本当に親切ですよね。可愛い素材をいろんな形態で提供してくれて。この場を借りてぜひお礼が言いたい。。。

nojo

フリー素材屋さん、ワタシのように絵心がないヤツがどんなに助けられているか・・・・本当にありがとうございます!!

あ、ファビコン設置についてまとめると、

  • 512px * 512pxの画像を準備
  • WordPressのサイトアイコン設定から準備した画像を選択するだけ!
  • 他サイトとの差異化、SEO最適化したい人におすすめ

最後まで読んで下さり、ありがとうございました

よかったらシェアしてね!
目次
TOP
目次
閉じる