【ブラウザのロゴ】WordPressでファビコンを無料で作成する方法

ウェブブラウザのロゴのようにタブに表示されるファビコン(favicon)と言われているアイコンに変更する方法をご紹介します。Wordpressの場合はWマークがデフォルト設定になっています。

プラグインを使って変更する方法とWordpressの基本機能を使う方法をご紹介します。

プラグイン Favicon by RealFaviconGeneratorを利用する方法

プラグインを利用して簡単に設定する方法を紹介します。

利用するプラグインはこちらです → Favicon by RealFaviconGenerator

プラグインがインストールされ有効化されると、外観メニューのところに「Favicon」のメニューが追加されます。

ファビコン生成をクリックすると、https://realfavicongenerator.net/　の外部サイトに飛びます。

このサイトでも登録している以下のロゴを選んでみます。
260×260が推奨とされているので、以下の画像は260×260のサイズで作成されています。

アップロードが済むと、ブラウザ、検索結果、スマホでの表示サンプルを見ることができます。

ダークモードの色合いもみることができるので、場合によっては背景色を設定することで見えやすくさせましょう。

背景色と枠線の角の丸み、画像サイズを変更することができます。

iOSでアイコンにしたときの表示方法も変更することができます。背景色に注意してみてください。

「Generate yout Favicons and HTML code」をクリックして完了です。

プラグインの設定ページに戻ると、設定中のファビコンが表示されるようになります。

色合いに問題がないか確認してみましょう。「ファビコンの確認」から設定の状態を確認することができます。

以下の画像で表示されている画像が実際の画像ではないようです。

WordPressの外観/カスタマイズからアイコンを変更する方法

プラグインを使わずに変更する方法をご紹介します。

iPhoneやWindowsのアイコンの設定など細かいことはできませんが、ブラウザのタブのアイコンはここから変更することができます。

メニューから「外観」→「カスタマイズ」に進み、「サイト基本情報」→「サイトのアイコン」に進みます。

「サイトのアイコンを選択」からメディア画像をアップロードします。

画像を選択すると画像の切り抜きをすることができ、右側にプレビューを見ることができるので、どのサイズで表示されるのか確認しつつトリミングをしてみてください。

右下の「画像切り抜き」をクリックすると完了です。

まとめ：

ファビコンは別に設定せずともブログやサイトの運営上問題にはなりません。

しかし、しっかり運営しているサイトはほとんどが設定されているのが現在のウェブサイトのトレンドになります。やり方は難しくないのでぜひ必須設定事項としてファビコン設定はするようにしてみてください。