ファビコンとは?ファビコンをWordPressに設定にする方法をご紹介

ファビコンとは?ファビコンをWordPressに設定にする方法をご紹介

ファビコンって聞いたことありますか?

知らない人は知らないですよね。

今回の記事ではちょっとだけWordPressをおしゃれにすることのできる『ファビコン』についてご紹介していきたいと思います。

ファビコンとは?

ファビコンとは、Webサイト上のアイコンのことです。ウェブサイトの左上に表示される小さなアイコンで、ウェブサイトを識別するために使用されます。ファビコンの大きさは通常16×16ピクセルで、ICOファイル形式で保存されます。

フェイビコンは、ウェブサイトをブックマークしたり、タブを開いたりするときに表示されます。また、検索結果やブラウザのアドレスバーにも表示されます。ファビコンを設定することで、Webサイトの認知度を高めることができます。

ファビコンは手動で作成することもできますし、オンラインのファビコンジェネレーターを使用することもできます。ファビコンジェネレーターは、ファビコンを簡単に作成できるツールで、画像やロゴをアップロードして変換することが可能です。

ファビコンは、ウェブサイトのブランディングにも役立ちます。ウェブサイトのアイコンを設定することで、ウェブサイトを視覚的に認識しやすくなり、ユーザーにフレンドリーな印象を与えることができます。

ファビコンを自作するには

独自のファビコンを作成するには、以下の手順で行います。

画像の準備

まず、16×16ピクセルの大きさの画像を用意します。ロゴやアイコンなど、Webサイトを象徴するような画像を選びましょう。

画像を変換する

画像をICOファイル形式に変換します。画像変換ソフトを使って、画像をICOファイル形式に変換することができます。また、オンラインファビコンジェネレーターを使用することもできます。

ファビコンの設定

変換したICOファイルをウェブサイトのルートディレクトリにアップロードします。そして、HTMLの<head>タグ内に以下を設定します。

<link rel="icon" href="ファビコンのURL">

‘Favicon URL’は、アップロードされたファビコンのURLを指定します。このタグを設定することで、ブラウザがファビコンを読み込むことができるようになります。

以上が、ファビコンを作成するための手順です。画像を用意し、ICOファイル形式に変換してウェブサイトのルートディレクトリにアップロードすることで、ファビコンを設定することができます。

ちなみに、私がファビコンを作ったサイトは「https://www.favicon-generator.org/editor/」ここで作ることができます。

作ったファビコンをWordPressに設定

ファビコンのアップロード

まず、WordPressの管理画面にログインし、「外観」、「カスタマイズ」の順にクリックします。左側のメニューから「サイトアイコン」を選択し、ファビコンをアップロードします。

サイトアイコンの選択

ファビコンをアップロードした後、サイトアイコンを選択します。サイトアイコンを選択したら、「公開」ボタンをクリックして保存します。

キャッシュをクリアする

ファビコンが正しく表示されない場合は、キャッシュをクリアする必要がある場合があります。キャッシュをクリアするには、WordPressのキャッシュプラグインを使用することができます。

ファビコンが表示されない場合

ファビコンがアップロードされていない

ウェブサイトのルートディレクトリにファビコンがアップロードされていない場合、ブラウザはファビコンを読み込むことができません。ファビコンがアップロードされていることを確認し、必要に応じてアップロードしてください。

ファビコンのURLが正しくない

ファビコンのURLが正しくない場合、ブラウザーはファビコンを読み込むことができません。正しいファビコンURLを確認し、必要に応じて修正してください。

ブラウザのキャッシュが古い

ファビコンがアップロードされているにもかかわらず、ブラウザが古いキャッシュを読み込んでいる場合、ファビコンが表示されないことがあります。ブラウザのキャッシュをクリアして、新しいファビコンを読み込んでみてください。

ファビコンのサイズが大きすぎる

ファビコンのサイズが大きすぎる場合、ブラウザがファビコンを読み込むことができないことがあります。ファビコンのサイズを16×16ピクセルに変更するか、別の画像を使用してください。

ファビコンが壊れている

ファビコンが壊れている場合、ブラウザがファビコンを読み込むことができないことがあります。ファビコンを再作成してアップロードしてください。

まとめ

いかがだったでしょうか。

今回の記事では『ファビコン』について書いてきました。

簡単に作業をまとめると、ファビコンを簡単に自作→親テーマフォルダのheader.phpを子テーマフォルダにコピーして貼り付け→46行目のコードを編集→完了

ちなみに、header.phpを編集しなくてもプラグインでファビコンを設定することは可能です。

『Favicon Rotator』というプラグインを使用すれば、header.phpの編集なんかしなくてもファビコンの設定ができるんですね。
めんどくさいって方はプラグインを使用したほうがいいですね。

ただ、プラグインはできるだけ少なくシンプルにしているほうが、ウェブページの読み込みも早いので、私はheader.phpの編集をお勧めします。