BLOG ブログ運営

ブックマークに独自のアイコンを表示する方法と作り方【ファビコンは必要です】

2020年7月8日

『自分のブログをブックマークしたけど、アイコンがなくて分かりにくいな』

『そもそもこのアイコンって必要なの?』

そんな悩みを解決します。

この記事でわかること

  • ブログのアイコン(ファビコン)って必要?
  • アイコン(ファビコン)の作り方
  • 自分のブログにアイコンを表示させる方法

Favicon(ファビコン)とは?

Favicon(ファビコン)は、「Favorite icon」の略です。

赤い四角で囲んだ部分がファビコン。

このようにタブやお気に入りバーに表示されます。

ファビコンって必要なの?

結論から言うと、あった方がいいです。

ファビコンを設置することで、タブをたくさん開いてWebサイトを閲覧しているときでも、サイトを判別しやすくなります。

たとえばこのように、ファビコンがついていないと、ブックマークしたサイトがどういうサイトかわかりにくくありませんか?

大抵の読者は、ブックマークしたサイトのアイコンを見てクリックするので目印がないと不便ですよね。

大手の企業さんのアイコンは見ただけでどんなサイトなのかがわかります。

ブックマークに登録したサイトが多いときは、画像だけで何のサイトかわかるとブックマークバーが短く見やすくなります。

ファビコンが表示される場所

  1. ブラウザのタブ
  2. ショートカットを作成した時のアイコン(スマートフォン)
  3. ブックマーク
  4. 検索エンジンに表示されるタイトル

最適なファビコンとは?

Googleでは「最適なファビコン」についてこのように述べています。

  • ファビコンがウェブサイトのブランドを視覚的に表したものとなっており、ユーザーが検索結果を見た際に一目でサイトを見分けられるようになっていること。
  • ファビコンのサイズが 48 ピクセルの倍数になっていること(例: 48 x 48 ピクセル、96 x 96 ピクセル、144 x 144 ピクセルなど)
    Google では画像サイズを 16 x 16 ピクセルに変換するため、その解像度で適切に表示されるか、あらかじめご確認ください。16 × 16 ピクセルのファビコンは指定しないでください。
  • ファビコンの URL は固定されている必要があります(URL は頻繁に変更しないでください)。
  • わいせつな表現やヘイト表現に関連するシンボル(例: かぎ十字章)などの不適切なファビコンは表示されません。該当する表現がファビコン内で見つかった場合は、デフォルトのアイコンに置き換えられます。

[出典]SearchConsoleヘルプ

簡単に言うと、画像だけでサイトがわかる48ピクセルの倍数のサイズが理想的です。

ファビコンの作成方法

まずは、ファビコンのデザインのポイントを解説します。

ここだけ押さえておけば初心者の方でも簡単に作れます。

ファビコンのデザインのポイント

  • 小さい画像なのでなるべくシンプルに
  • ユーザーの目に入るように意識する
  • サイトのイメージと統一性を持たせる

【方法1】アイコン作成ができるサイトで作る

ICONSFLOWでは、テンプレートから選ぶことでオリジナルのアイコンが作れます。

基本の形がすでに出来上がっているので、初心者でも作りやすいと思います。

【方法2】商用利用可能なアイコンを借りる

アイコン素材を無料でダウンロードできるサイトもありますよ。

オリジナルにこだわらない人は、とりあえず使ってみてもいいのではないでしょうか?

アイコンを無料でダウンロードできるサイト

【方法3】イラストレーターさんに書いてもらう

Twitterで依頼したり、ココナラで注文することでオリジナルのアイコンを書いてもらうこともできます。

私たちのアイコンもTwitterで依頼して書いていただいたものです。

WordPressでファビコンを設定する方法

WordPressでブログを作っている方は、特に難しいことはなくファビコンを設定できます。

まずは[外観]から[カスタマイズ]をクリック。

ページが変わったら[サイト基本情報]をクリック。

[サイトアイコン]の欄から[サイトアイコンを選択]をクリック。

ファビコンにしたい画像を選択します。

プレビューを見ながら、画像のサイズを決めていきます。

画像を切り抜き加工することで、好きな場所をアイコンにできます。

画像を変更で終了です。

アフィンガーで設定する方法

ブログテーマを「AFFINGER」にしている方は、下記の方法で設定できます。

[AFFINGER5管理]をクリック。

[会話・ファビコン等]をクリック。

[アイコン・ファビコン設定]で画像を選択して[アップロード]をクリックして終了です。

ブックマークに独自のアイコンを表示する方法と作り方【ファビコンは必要です】:まとめ

この記事でまとめたこと

  • ブログのアイコン(ファビコン)は必要!
  • アイコン(ファビコン)の作り方
  • 自分のブログにアイコンを表示させる方法

今回はファビコンについてまとめてみました。

ファビコンを設定しておくと、大量にタブを開いていても画像を見るだけでどのサイトがどのタブなのかがすぐにわかるようになります。

そのほか、ブログ運営に関する記事をまとめていますので、ぜひご覧ください。

ブログ運営系の記事はこちら

 

-BLOG, ブログ運営

© 2020 おとよめブログ Powered by AFFINGER5