WPプラグインでブックマークのアイコン画像(ファビコン)を設定&使い方

Pocket

僕がブログ初心者だった頃、ワードプレスならプラグインを使ってオリジナルサイトが作れると聞いていたので、まっさきに変えたい部分がありました。

でも、その変えたい箇所の呼び方がわかりませんでした。

サイトを閲覧してると上のほうに表示されるこのアイコンの呼び方↓↓↓

42418d1aa8cebee6cf9d2f56327aae9a

ブックマーク画面にいくと、表示されるあのアイコンの呼び方↓↓↓

8c869da7a83a506519df0597dd6271f7
あそこ」「あの」としか言い表すことができず、ずっと画像変更するのを断念していました(笑)

が、偶然ネットサーフィンをしているときに、これはfavicon(ファビコン)と呼ばれるアイコンだということがわかり、すごく嬉しかったのを覚えています。

手動で変更したけど綺麗に表示されなかった…

さっそくファビコン画像を変更するためにいろいろと調べました。

まずファビコンは「.ico」という拡張子に変換し、サイズも小さくしなければいけないことがわかりました。

例えば、このサイトを利用すれば、一発で画像変換できます。

しかし、設定したのにも関わらず、画像がぼやけてしまって、どーも上手く設定できなかったんですよね。

そんなとき知ったのが、ワードプレスのプラグインであるfavicon rotator です。

このプラグインを使うと、専用画面で好きな画像を選択するだけでファビコンを簡単に設定できるし、綺麗に表示させることもできますよ。


favicon rotatorの使い方


ワードプレスのダッシュボード画面から「プラグイン」→「新規追加」→「favicon rotator」→「インストール」→「有効化」をしましょう。

プラグインのインストール方法がわからない方はワードプレスにプラグインを導入する方法を参考にしてください。

そうすると、「外観」に「favicon」の設定があるので、そこをクリック。

1855a3abee9b514225d0da2af2eb6f3d



画像を設定します。

536623378dc6555b0cb43527c0e88996
  • Browser Icon
  •  →「Add Icon」をクリックしPC画面のファビコンを変更

  • Touch Icon
  •  →「Set Icon」をクリックしスマホ画面のファビコンを変更

変更が終わったら「変更を保存」をクリック。これで完了です。


初めてファビコンを設定したときに、たったこれだけで自分のサイトに愛着がわくんだなぁ、と単純ながら思いました。

この気持ちに共感してもらえる方はコメント欄の画像も変更してみることをオススメします!

simple local avatarsの設定方法。コメントにも画像を表示


コメントを残す

サブコンテンツ