本記事の要点・結論

本記事を読めば、ブログにファビコン(サイトアイコン)を設定しよう!がわかるようになります。

ファビコン(favicon)とは、Webブラウザで新規タブを開いたときにタブに表示される画像またはWebページをブックマークした際に表示される画像などをいいます。あの小さなアイコンです。2019年からGoogle検索において、検索結果にも表示されるようになりました。

とても小さなアイコンではありますが、特に検索結果表示においては大きな役割を果たしています。

初めてブログに挑戦される方は、あれやこれやでなかなか手が回らないとは思いますが、自分の記事がインデックスされて、確認できてからでよいのでブログのファビコンを設定してみましょう。

ファビコンって小っちゃいわね!
これ、重要なの?

でも、これはブログサイトを代表するアイコンだよ!

重要だし、自分で作れるから、作り方も紹介するね!

この記事が参考になる方

  • ファビコンとは何か知りたい方
  • ファビコンをどう作っていいのか分からない方
  • ファビコンがどんな役割をするのか知りたい方
  • ブログを始めたばかりの方
  • ファビコンの設定方法がわからない方

ファビコンとは?

インデックスされて、検索表示されるとこんな感じで表示されます。
まだ、ファビコンを設定していないので、ワードプレスのマークが表示されています。

これがですね、ワードプレスのマークだと自分のブログだと気づかないのです。

検索表示でのファビコンの表示

Webブラウザで新規タブを開いたときにタブに表示される画像は、こんな感じです。

Webブラウザで新規タブを開いたときにタブに表示されるファビコン

ファビコンをブログに設置するメリット

ファビコンのメリット

ファビコンは、必ず設置しないといけないものではありませんが、ファビコン(favicon)があることで、ウェブサイトやブログにいくつかの重要なメリットをもたらします。以下がファビコンを設置する理由です

視認性が高まる

favicon(ファビコン)があると、ブラウザでたくさんのタブを開いている時に、そのタブが何のページかユーザー側がわかりやすくなります。
また、多くのユーザーは、お気に入り・ブックマークを開く際、favicon(ファビコン)を目印にしてさがす傾向が強くあります。

信頼性が高まる

ファビコンを設置することで、ブログの訪問者に「これはいつものサイトだ」「知っているサイトだ」といった印象を与え、サイトの信頼性を高めることができます。

間接的なSEO効果

ファビコン自体がSEOに直接影響を与えるわけではありませんが、サイトの信頼性やブランド力が向上すれば、ユーザーがそのサイトを再訪したり、ブックマークに登録する可能性が高まり、それが結果としてSEOにポジティブな影響を与えることがあります。

ファビコンを作る際の注意点

ファビコンの表示はとても小さいですし、一見あまり重要ではないように思われますが、どこでどんな形で表示されても、メディアを表すサイトアイコンになりますから、その作成には意外と注意が必要です。

ファビコンを作る際の注意点
  • サイズとフォーマットの適切な選定
  • シンプルかつ認識しやすいデザイン
  • ブランドアイデンティティとの一致
  • テーマカラーとのバランス

ファビコンの作り方

ファビコンの作り方

作り方には、いろいろありますが、自分で作成すれば費用もかかりませんので、今回はCanvaを使って作成してみます。

canvaのトップページ

Canvaは優れたデザインツールで、誰でも簡単にデザイン物が作成できます。イラストレーターのように、一からデザインを作るわけではなく、もともと用意されている素材を利用したり、組み合わせたりして作成します。

無料版と有料版がありますが、まずは無料版の利用でいいかと思います。当サイトもよく利用していますが無料版のままでお世話になっています。

Canvaでファビコン作成

STEP1
ロゴを入力
  • 赤枠にロゴを入力
  • 下部のロゴをクリックでもよいです。
ロゴを入力
STEP2
自分のサイトに合いそうなテンプレートを探します。
  • テンプレートが20000点もありますので、結構使えます。
  • 王冠マークがついたデザインは、「有料版」の人しか使えません。
テンプレートを確認
STEP3
どれか決めます
  • 今回これを選んでみました。
テンプレートを選択
STEP4
円を挿入
  • 「素材」から、円とか丸で検索
  • 気に入ったものをクリックすると挿入されます。
円を挿入
STEP5
整えます
  • 色を変えたり、大きさを調整します。
  • BとCにしたのは、このブログ名がブログチャレンジだからです!
  • BLOG CHALLENGE
整えます
STEP6
ダウンロードします
  • 「共有」から「ダウンロード」を選びます。
  • ファイルの種類をPNGにしてダウンロードします。
ダウンロードします
STEP7
画像の見た目を確認します。
  • ごちゃごちゃすると見にくいと感じたので、シンプルにしてみした。
確認します
STEP8
サイズの確認
  • ダウンロードした、PNGファイルは、500×500pxでした。
  • WordPressの設定画面を見ると512×512pxが望ましいと記載されています。
  • あなたの「画像エディター」などで調整します。

WordPressに設置

STEP1
設定を開きます。
  • 「ダッシュボード」「設定」「一般」を開きます。
ダッシュボード
STEP2
サイトアイコンの設定
  • サイトアイコンを設定します。
サイトアイコンのサイズ
STEP3
Webブラウザで確認
  • Webブラウザで新規タブを開いたときにタブに表示される画像を確認
表示確認

もうちょっと確認してみたら・・・・

左からCanva、xwrite、当サイト、XServerですが、やっぱり当サイトは目立たない!
ということで、もう一度作り直しです。

再度確認したら・・・・

その結果ですが・・・・

こんな感じにしてみました。

もう一度確認

さっきより、ちょっと張り合える感じになってきました。
まあ、こんなところにしておきます・・・・・・・

検索結果の表示の反映には、時間がかかるでしょうから、また確認できたら、報告してみますね!

そのままサイトロゴにも使いました。
色を抑えて、少し地味にしました・・・・!

ブログにファビコンについてよくある Q&A

ファビコンはなぜ重要なのですか?

以下の理由から重要とされています。

  • サイトの視認性・識別性の向上
  • プロフェッショナルな印象の付与
  • ブックマーク時の視認性向上
  • ブランドの一貫性維持
ファビコンのデザインで気をつけることは?

以下のポイントに注意してデザインします。

  • シンプルで認識しやすいデザイン
  • 小さいサイズでも視認性の確保
  • ブランドカラーの効果的な使用
  • 背景色との適切なコントラスト
ファビコン作成時のよくある失敗は?

以下のような失敗に注意しましょう!

  • 複雑すぎるデザイン
  • 小さいサイズでの視認性検証不足
  • 異なるブラウザでのテスト不足
  • 適切なフォーマット未対応
  • 高解像度ディスプレイ考慮不足

まとめ:ブログにファビコン(サイトアイコン)を設定!|作り方も…

今回は、「ブログにファビコン(サイトアイコン)を設定!|作り方も…」を解説しました。

ファビコンは、サイト全体を代表するアイコンでもあります。とても小さく表示されるファビコンですが、大きな役割を果たします。

実際に当ブログのファビコンを作ってみましたが、表示が小さいので、シンプルなほうがいいような気がしました。

なかなか、記事がインデックスされてからでないと、しっかりした確認がとれませんが、閲覧者が増えてきましたら、ファビコンを設定してみましょう!

では、また!