-1.png)
【ファビコン表示されない】Webサイトタブに独自アイコンを設定する
2021年5月4日

自分のアイコン(ファビコン)が表示されていなくて「なんで?」って思ったので
ここに自分のサイトのアイコン(ファビコン)を表示させる方法を紹介します。
❀この記事はこんな人におすすめ
- ブログやサイトを持っている人
- タブに自分のサイトのアイコンを表示させたい
- 自分のサイトのショートカットにアイコン表示させたい
- 自分サイトは持っていないけどアイコンの表示の仕組みを知りたい
今はネット検索した時に開くブラウザのタブにWebページの横に小さいアイコンが表示されます。
❀こんな感じ

このアイコン(ファビコン)は設定しないと表示されません。
ここで表示されるアイコンの名前を『ファビコン』といいます。
このアイコンが設定されいないとGoogle検索画面のショートカットのアイコンも表示されないんです。
❀Google検索画面のショートカットはこんな感じ

目次 ✲読みたい項目クリックできます
独自アイコン|ファビコンの設定方法
わたしはテーマをSWELLを使用していますが、この設定はWordPressなら同じだと思います。
ブロックエディター完全対応のWordPressテーマ
¥17600(税込)
シンプルなのに、高機能!
プログラミング不要!
専門知識のないわたしでもマウス操作だけでカスタマイズできた!
もちろん充分なSEO機能が実装されています!
ファビコン設定:手順1
WordPressの管理画面→ 外観→ カスタマイズ

ファビコン設定 :手順2
WordPress設定をクリック

ファビコン設定 : 手順3
サイト基本情報をクリック

ファビコン設定 : 手順4
点線で囲まれた「サイトアイコンを選択」をクリック

ファビコン設定 : 手順5
タブに表示させたい画像を選択

ファビコン設定 : 設定完了
画像を選択するとサイトアイコンが表示されます。
画像を変更したい時は画像を変更をクリック

Googleの検索画面でのショートカットの表示を確認します。


ファビコンの画像サイズ|アイコンの画像サイズ
ここでの画像サイズは512px✕512px以上の正方形が推奨されています。
形式は.pngで大丈夫です。
この指定されたサイズで画像を作成します。
ファビコン用アイコン画像の作り方 Canva
画像の作り方はいろいろある中で『Canva キャンバ』というアプリに登録して無料で画像を作ることができます。
まとめ
❀ブラウザのタブにアイコン・ファビコンを表示させるメリット
- 開いたときにどこのサイトか分かりやすくなる
- タブがたくさん開かれた状態でも見つけやすくなる
- 自分のサイトがブックマークされたときに見つけてもらいやすくなる
なので自分のサイトのイメージ画像を作って表示させましょう♪