• メニュー
  • メニュー

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

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

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

タブの中に埋もれないためにもおすすめですし、iphoneのアイコンにも表示できるようになりますので、ユーザビリティ・アクセサビリティの観点からもぜひ設定しておきましょう。


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

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

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

Wordpress ファビコンの追加方法 Favicon by RealFaviconGenerator

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



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


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

Laptopreneur ひざのうえ起業


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



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

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


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


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



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

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

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


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

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

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

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

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


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

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


まとめ:

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

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

タブブラウザが主流なので、あるのとないの、また地球マークなのとでだいぶ見栄えが違いますよ。


有益情報も流しているのでツイッターもぜひフォローお願いします。


参考になったらシェアお願いします!
toshiki@ひざのうえ起業家

3児&2犬(大型)のウェブ大好きパパです。

サイト作り・デザイン大好きで、どんどん新しいサイトを作ろうとしてしまう性格の持ち主。けど、深く深く極めるのも好きなハイブリットです。Wordpress歴は18年くらいです。

子どもが大きくなってしまう前に、子どもとの時間を作りたくて脱サラ計画中。ひざのうえにノートパソコンを置いてでも稼げる仕事で起業を目指しています。

10年ちょい前に世界一周チケットで主要都市だけ回る旅行も経験、これからもいっぱい旅行したい一心で切磋琢磨しています。旅行大好きだから。

好きな物:ウェブサイト/旅行(国内・海外)/動画編集/音楽(クラシック/JAZZ/ポップス)/山崎豊子/久石譲/ショパン/ピアノ/ラブラドールレトリバー/コーヒー/ワイン/スポーツ全般/スキーモーグル/高校野球/スキューバ

夢:キャンピングカーで子どもと犬と日本一周、もう一度乗りたい豪華客船クルーズ、映画音楽の作曲、プール付きか温泉付きの別荘で暖炉の前でリクライニングチェアで老眼鏡付けて分厚い洋書を手に犬を足元に居眠り。

ストーリーを見る

コメント・質問する

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です