本記事を読めば、ブログにファビコン(サイトアイコン)を設定しよう!がわかるようになります。
ファビコン(favicon)とは、Webブラウザで新規タブを開いたときにタブに表示される画像またはWebページをブックマークした際に表示される画像などをいいます。あの小さなアイコンです。2019年からGoogle検索において、検索結果にも表示されるようになりました。
とても小さなアイコンではありますが、特に検索結果表示においては大きな役割を果たしています。
初めてブログに挑戦される方は、あれやこれやでなかなか手が回らないとは思いますが、自分の記事がインデックスされて、確認できてからでよいのでブログのファビコンを設定してみましょう。
ファビコンって小っちゃいわね!
これ、重要なの?
でも、これはブログサイトを代表するアイコンだよ!
重要だし、自分で作れるから、作り方も紹介するね!
この記事が参考になる方
- ファビコンとは何か知りたい方
- ファビコンをどう作っていいのか分からない方
- ファビコンがどんな役割をするのか知りたい方
- ブログを始めたばかりの方
- ファビコンの設定方法がわからない方
ファビコンとは?
インデックスされて、検索表示されるとこんな感じで表示されます。
まだ、ファビコンを設定していないので、ワードプレスのマークが表示されています。
これがですね、ワードプレスのマークだと自分のブログだと気づかないのです。
Webブラウザで新規タブを開いたときにタブに表示される画像は、こんな感じです。
ファビコンをブログに設置するメリット
ファビコンのメリット
ファビコンは、必ず設置しないといけないものではありませんが、ファビコン(favicon)があることで、ウェブサイトやブログにいくつかの重要なメリットをもたらします。以下がファビコンを設置する理由です
- 視認性が高まる
favicon(ファビコン)があると、ブラウザでたくさんのタブを開いている時に、そのタブが何のページかユーザー側がわかりやすくなります。
また、多くのユーザーは、お気に入り・ブックマークを開く際、favicon(ファビコン)を目印にしてさがす傾向が強くあります。- 信頼性が高まる
ファビコンを設置することで、ブログの訪問者に「これはいつものサイトだ」「知っているサイトだ」といった印象を与え、サイトの信頼性を高めることができます。
- 間接的なSEO効果
ファビコン自体がSEOに直接影響を与えるわけではありませんが、サイトの信頼性やブランド力が向上すれば、ユーザーがそのサイトを再訪したり、ブックマークに登録する可能性が高まり、それが結果としてSEOにポジティブな影響を与えることがあります。
ファビコンを作る際の注意点
ファビコンの表示はとても小さいですし、一見あまり重要ではないように思われますが、どこでどんな形で表示されても、メディアを表すサイトアイコンになりますから、その作成には意外と注意が必要です。
- サイズとフォーマットの適切な選定
- シンプルかつ認識しやすいデザイン
- ブランドアイデンティティとの一致
- テーマカラーとのバランス
ファビコンの作り方
ファビコンの作り方
作り方には、いろいろありますが、自分で作成すれば費用もかかりませんので、今回はCanvaを使って作成してみます。
Canvaは優れたデザインツールで、誰でも簡単にデザイン物が作成できます。イラストレーターのように、一からデザインを作るわけではなく、もともと用意されている素材を利用したり、組み合わせたりして作成します。
無料版と有料版がありますが、まずは無料版の利用でいいかと思います。当サイトもよく利用していますが無料版のままでお世話になっています。
Canvaでファビコン作成
- 赤枠にロゴを入力
- 下部のロゴをクリックでもよいです。
- テンプレートが20000点もありますので、結構使えます。
- 王冠マークがついたデザインは、「有料版」の人しか使えません。
- 今回これを選んでみました。
- 「素材」から、円とか丸で検索
- 気に入ったものをクリックすると挿入されます。
- 色を変えたり、大きさを調整します。
- BとCにしたのは、このブログ名がブログチャレンジだからです!
- BLOG CHALLENGE
- 「共有」から「ダウンロード」を選びます。
- ファイルの種類をPNGにしてダウンロードします。
- ごちゃごちゃすると見にくいと感じたので、シンプルにしてみした。
- ダウンロードした、PNGファイルは、500×500pxでした。
- WordPressの設定画面を見ると512×512pxが望ましいと記載されています。
- あなたの「画像エディター」などで調整します。
WordPressに設置
- 「ダッシュボード」「設定」「一般」を開きます。
- サイトアイコンを設定します。
- Webブラウザで新規タブを開いたときにタブに表示される画像を確認
もうちょっと確認してみたら・・・・
左からCanva、xwrite、当サイト、XServerですが、やっぱり当サイトは目立たない!
ということで、もう一度作り直しです。
その結果ですが・・・・
こんな感じにしてみました。
さっきより、ちょっと張り合える感じになってきました。
まあ、こんなところにしておきます・・・・・・・
検索結果の表示の反映には、時間がかかるでしょうから、また確認できたら、報告してみますね!
そのままサイトロゴにも使いました。
色を抑えて、少し地味にしました・・・・!
ブログにファビコンについてよくある Q&A
- ファビコンはなぜ重要なのですか?
以下の理由から重要とされています。
- サイトの視認性・識別性の向上
- プロフェッショナルな印象の付与
- ブックマーク時の視認性向上
- ブランドの一貫性維持
- ファビコンのデザインで気をつけることは?
以下のポイントに注意してデザインします。
- シンプルで認識しやすいデザイン
- 小さいサイズでも視認性の確保
- ブランドカラーの効果的な使用
- 背景色との適切なコントラスト
- ファビコン作成時のよくある失敗は?
以下のような失敗に注意しましょう!
- 複雑すぎるデザイン
- 小さいサイズでの視認性検証不足
- 異なるブラウザでのテスト不足
- 適切なフォーマット未対応
- 高解像度ディスプレイ考慮不足
まとめ:ブログにファビコン(サイトアイコン)を設定!|作り方も…
今回は、「ブログにファビコン(サイトアイコン)を設定!|作り方も…」を解説しました。
ファビコンは、サイト全体を代表するアイコンでもあります。とても小さく表示されるファビコンですが、大きな役割を果たします。
実際に当ブログのファビコンを作ってみましたが、表示が小さいので、シンプルなほうがいいような気がしました。
なかなか、記事がインデックスされてからでないと、しっかりした確認がとれませんが、閲覧者が増えてきましたら、ファビコンを設定してみましょう!
では、また!