Webサイト構築

【画像付き解説】WordPressのファビコンとは?3分で設定可能!

こんにちは!しいなです。

WordPressでブログを作成していたら、こんな単語に出会いました。

 

「ファビコン」

 

ファビコンって何?

実は私も知らなかったのですが、これを設定しておくと見つけられやすかったり、覚えられやすかったり、ブランディングの一環となったりと、いいこと尽くしのようなのです。

今回は、ファビコンについて詳しく解説したいと思います!

まだ作成していない方は、ぜひ一緒に作ってみてください。

この記事はこんな人におススメ!
  • 「ファビコン」を知らない人
  • サイズや作り方、設定方法を知りたい人

「ファビコン」とは?

Webページを閲覧している際、タブに表示されているページタイトルの左にアイコン画像があります。

そのサイトアイコンのことを「ファビコン」といいます。

そして、favicon(ファビコン)とは“favorite icon”の略語です!

ファビコンのメリット

ファビコンには以下のようなメリットがあります。

ウェブサイトが見つけやすくなる

例えば、あなたが自分のウェブサイトをブックマークに追加します。

再度見つける時に、ファビコンがあれば瞬時に見つけられますが、ファビコンがないとただの文字だけで分かりづらくなります。

ファビコンをつけていた方が見つけやすくなるんですね!

信頼されやすくなる

ファビコンを使うことで、ウェブサイトが信頼されやすくなります。

たとえば、似たようなサイトがあるとき、他のサイトがファビコンを持っているのに自分のサイトだけが持っていないと、ユーザーは「なぜこのサイトにはファビコンがないのかな?」と不思議に思うかもしれません。

ファビコンを設置することは、ユーザーからの信頼獲得に繋がるんです。

ブランディングになる

ファビコンを設置しておくと、自分の会社やサービスを知ってもらうことに繋がります。

例えば、会社のロゴやアイコンを入れておくと、多くの人に見てもらえるようになります。検索結果で自分のページが上位に表示されると、ファビコンも一緒に見えるので、人々に印象づけることができます。

検索結果で上位に出るためには、SEO対策が必要です。その中で、ファビコンを設置しておくことが重要になります。

リピーターにつながる

ファビコンを設置すれば、リピーターを増やす可能性があります。

もし自分のサイトをブックマークしている人が、また別の検索をしたときに、検索結果で自分のサイトのファビコンを見つけた場合、再度そのページをクリックしてくれるかもしれません。

前に話したブランディングは、まだ自分のサイトを知らない人にアピールする方法ですが、ファビコンは、もう自分のサイトを知っている人にも再度訪れてもらえるチャンスになります。

ファビコンのサイズ

ファビコンは表示される場所がたくさんあるので、作成する際にどのサイズで作ればいいのか迷ってしまうと思います。

サイズ一覧

代表的なものはこちらになります。

サイズ ブラウザ ファイル名
16px x 16px Edgeのタブ
Chromeのタブ
Firefoxのタブ
Safariの履歴
favicon.ico
(マルチアイコンにする)
32px x 32px Retinaの各ブラウザタブ favicon.ico
(マルチアイコンにする)
180px x 180px iOS,Safariのホーム画面
Android Chromeのタブ、ホーム画面
Mac Safariのお気に入り
apple-touch-icon.png
256px x 256px Android Chromeのブラウザタブ、ホーム画面 android-chrome-256×256.png

引用:【2024年最新版】ファビコン(favicon)のサイズ一覧と作り方

上記を作っておけば問題ありません。
ファビコンに使える主なファイル形式は「.svg」「.png」「.ico」「.gif」などがあります。

作成する時のサイズ

これだけサイズがあると、全て用意するのかと不安になりますよね。

ですが、WordPress4.3以降のバージョンであれば512px × 512pxのPNG形式ファイルを作成すれば全てに対応してくれるようになりました!

作成時のサイズは512(px)x512(px)でOK!

たくさん作成する必要はないので助かりますね!

ファビコンの作り方

ここからはファビコンの作り方についてご説明します。

画像を用意

画像を作る際は、ココナラに依頼して作ってもらうのもいいですし、無料のフリー素材から選んでもいいと思います。

私の場合、イラストACというフリー素材から選びました。

Canvaという、無料で利用できるWeb上のデザイン作成ツールでも作成可能です!

ですが、CANVAは利用者が多いため、イラストが被ることがよくあります。

その点を気にしないのであれば、簡単に作れますので、ぜひ使ってみてください!

保存形式はPNGがオススメ!

保存する際はPNGがオススメです!

JEPGとPNGの違いについて分かりやすい表を貼っておきます。

▼JPEGとPNGの違い一覧表 jpgpng比較表

引用:フェローズクリエイターエージェント

サイズ

サイズは前述した通り、512(px)x512(px)で作成してください。

こちらはWordpressに記載されている内容です。

ファビコンの設定方法(3分で設定可能)

画像の用意ができたら、次は設定になります。

ここからは3分で出来ますので、一緒にやっていきましょう♪

「①外観」→「②カスタマイズ」

をクリックします。

「サイト基本設定」をクリックします。

「サイトアイコンを選択」をクリックします。

用意した画像をアップロードして「選択」をクリックします。

①「サイトアイコン」を確認してください。

問題がなければ、

②「公開」をクリックします。

これで設定は完了しました!

ファビコンがきちんと表示されているか確認してみてくださいね。

【確認するところ】

  • Webブラウザのタブ
  • ブックマーク一覧
  • スマホのホーム画面  など

まとめ

いかがでしたでしょうか?

これで「ファビコン」とは何か、分かりましたね!

そして、ファビコンのサイズや作り方、設定方法も分かっていただけたと思いますので、もし今後作り直したいと思ったとしても、同じやり方でできます。ぜひ、自分なりのカスタマイズをやってみてください!

きっと今まで以上に読者から見つけてもらいやすくなりますよ!

最後までご覧いただきありがとうございました(^^♪

Webマーケターを目指すシングルマザー
しいな
シングルマザーで子供2人。特に上の子は重度の障害あり。これまで波乱万丈な人生を送ってきたが、ここで人生を好転させたいと考え、Webの世界へ!夢であるWebマーケターになるために必死に勉強中。子供たちと自分の人生を豊かにするために月収30万円安定して稼ぐことを目指している。
RELATED POST