✲✲✲ 自宅で印刷!プリンターはこちら ✲✲✲

【ファビコン表示されない】Webサイトタブに独自アイコンを設定する

スポンサーリンク




自分のアイコン(ファビコン)が表示されていなくて「なんで?」って思ったので
ここに自分のサイトのアイコン(ファビコン)を表示させる方法を紹介します。

❀この記事はこんな人におすすめ
  • ブログやサイトを持っている人
  • タブに自分のサイトのアイコンを表示させたい
  • 自分のサイトのショートカットにアイコン表示させたい
  • 自分サイトは持っていないけどアイコンの表示の仕組みを知りたい

今はネット検索した時に開くブラウザのタブにWebページの横に小さいアイコンが表示されます。

❀こんな感じ

このアイコン(ファビコン)は設定しないと表示されません。


ここで表示されるアイコンの名前を『ファビコン』といいます。

このアイコンが設定されいないとGoogle検索画面のショートカットのアイコンも表示されないんです。

❀Google検索画面のショートカットはこんな感じ

目次 ✲読みたい項目クリックできます

独自アイコン|ファビコンの設定方法

わたしはテーマをSWELLを使用していますが、この設定はWordPressなら同じだと思います。

ファビコン設定:手順1 

WordPressの管理画面→ 外観→ カスタマイズ

ファビコン設定 :手順2

WordPress設定をクリック

ファビコン設定 : 手順3

サイト基本情報をクリック

ファビコン設定 : 手順4

点線で囲まれた「サイトアイコンを選択」をクリック

ここで画像挿入するので設定する前に画像(512px×512px)の準備をしておく必要があります

ファビコン設定 : 手順5

タブに表示させたい画像を選択

ファビコン設定 : 設定完了

画像を選択するとサイトアイコンが表示されます。
画像を変更したい時は画像を変更をクリック

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

まだ表示が変わっていない場合はクリックしてサイトを表示させればアイコンが表示されます。

ファビコンの画像サイズ|アイコンの画像サイズ

ここでの画像サイズは512px✕512px以上の正方形が推奨されています。
形式は.pngで大丈夫です。

この指定されたサイズで画像を作成します。

ファビコン用アイコン画像の作り方 Canva

画像の作り方はいろいろある中で『Canva キャンバ』というアプリに登録して無料で画像を作ることができます。

Canva キャンバ

7500万点の素材が無料

このアプリを使うとかんたんに
サイズ設定して
すきなイラストを選んで
すきな色や模様の背景を選んで
お好みの画像がこのアプリ1つで作れる
私も使ってます!

まとめ

❀ブラウザのタブにアイコン・ファビコンを表示させるメリット

  • 開いたときにどこのサイトか分かりやすくなる
  • タブがたくさん開かれた状態でも見つけやすくなる
  • 自分のサイトがブックマークされたときに見つけてもらいやすくなる

なので自分のサイトのイメージ画像を作って表示させましょう♪

スポンサーリンク

スポンサーリンク

スポンサーリンク

シェアする
目次 ✲読みたい項目クリックできます
閉じる