2022年にWordPressファビコンを追加する3つの簡単な方法（初心者向けガイド）
公開: 2018-09-11WordPressファビコンについて知りたいことをすべて学ぶ準備はできていますか？
慣れていない場合、サイトのファビコンは、Webブラウザのタブに表示される小さなアイコンです。 たとえば、HeroThemesでのファビコンは次のようになります。
また、ファビコンを「サイトアイコン」と呼ぶ人もいます。 心配しないでください–それらは同じものです。
この投稿では、次のことを学びます。
- WordPressファビコンのような小さなものを気にする必要がある理由
- WordPressサイトのファビコンを作成する方法（および使用するサイズと形式）
- 3つの異なる方法を使用してWordPressにファビコンを追加する方法
WordPressファビコンを気にする必要がある理由
分かってる。 ブラウザタブにのみ表示される小さな画像は、おそらくあなたのビジネスを成功させたり壊したりすることはありません。 ただし、WordPressのファビコンを作成するのに時間がかかる理由は2つあります。
まず、ファビコンを使用すると、ブランディングに役立ち、訪問者のブラウザでサイトを目立たせることができます。 たとえば、下のスクリーンショットで注目を集めるタブはどれですか。
HeroThemesとTwitterですよね？
人々は複数のタブを開くのが好きなので、これは重要です（いいえ、タブを蓄えているのはあなただけではありません！ ）。 2009年にさえ、人々は平均して3つ以上のタブを持っていて、若者の間でより多くのタブがありました。 最近のデータは見つかりませんが、平均が下がっているのではなく、上がっていることは間違いありません。
ブラウザでサイトをブランド化して目立たせるだけでなく、ファビコンはモバイルユーザーにも役立ちます。 ユーザーがWebサイトをホーム画面に保存した場合、ファビコンは多くのデバイスでアイコンとして表示されます。
WordPressファビコンを追加するのがいかに簡単かを考えると、これらのメリットは1日のうち数分かかる価値があります。
適切なサイズとフォーマットのファビコン画像を作成する方法
WordPressにファビコンを追加する方法について、次のセクションのステップバイステップの手順に従う前に、ファビコンに使用する画像を実際に用意する必要があります。
つまり、ファビコンの適切な画像のサイズと形式を知る必要があります。
デバイスの配列により、これは以前よりも複雑になっています。 しかし、その複雑さに対処するために、1つのスターターファビコンを取得して、すべての異なるデバイス用に自動的にフォーマットするツールもいくつかあります。
したがって、ファビコンを作成するために必要なのは次のとおりです。
- 正方形の画像。 最適なWordPressファビコンサイズは512×512ピクセルですが、260×260ピクセルのような小さいサイズでもかまいません。 ここで紹介するすべてのメソッドは、必要に応じてこれをサイズ変更します。
- 現代のウェブにとって最善の策であるpng画像。
実際に画像を作成するには、AdobePhotoshopやGIMPなどのツールを使用できます。 または、Favicon.ioのようなものを使用して、テキストまたは絵文字からファビコン画像を生成することもできます。
高解像度のロゴが横になっている場合、最も簡単な方法は、ロゴの正方形バージョンを取得することです（これは、HeroThemesで使用しているものです）。
WordPressにファビコンを追加する方法（3つの方法）
画像ファイルを入手したら、そのファビコンをWordPressサイトに追加する準備が整います。
以下では、ファビコンをWordPressに追加する3つの異なる方法を紹介します。 ただし、それぞれの方法は少し異なります。
あなたのサイトに適したものを選ぶのを助けるために、ここに簡単な要約があります：
- WordPressのコア機能を使用してファビコンを追加する–これは非常にシンプルで、WordPressカスタマイザーを介してファビコンを追加できます。 唯一の欠点は、すべてのデバイスにファビコン形式が追加されないことです。 ただし、ほとんどのサイトでは、これはまったく問題ありません。
- RealFaviconGenerator WordPressプラグイン–これにより、すべてのデバイスにファビコンを非常に簡単に追加できます。 唯一の潜在的な欠点は、プラグインをアクティブに保つ必要があることです。これは、一部の人が気に入らない場合があります。
- RealFaviconGenerator手動メソッド–プラグインを使用する代わりに、RealFaviconGeneratorのWebサイトを使用して、コードを手動で追加できます。 この方法では、プラグインをアクティブに保つ必要はありませんが、テーマのヘッダーにコードスニペットを追加する必要があるため、少し複雑になります。
初心者の場合は、最初の2つの方法のいずれかに固執することをお勧めします。 しかし、上級ユーザーは3番目の方法を好むかもしれません。
コア機能を使用してWordPressにファビコンを追加する方法
これは、WordPressのコア機能を使用しているため、非常にシンプルです。
開始するには、WordPressダッシュボードの[外観]→[カスタマイズ]に移動して、WordPressカスタマイザーにアクセスします。
WordPressカスタマイザーにアクセスしたら、[サイトID ]オプションをクリックします。
次に、[サイトアイコン]セクションを見つけ、[画像の選択]をクリックしてファビコン画像をアップロードします。
これにより、通常どおりに画像をアップロードできる通常のWordPressメディアライブラリが開きます。
画像をアップロードしたら、[選択]ボタンをクリックします。
そこから、WordPressはファビコン画像をトリミングするオプションと、ブラウザとアプリの両方としての画像のライブプレビューを提供します。
適切なトリミングに調整してから、[画像のトリミング]をクリックします。
そして、あなたは完了です！ WordPressカスタマイザーの上部にある[公開]オプションをクリックしてください。ファビコンが公開されているはずです。
WordPressファビコンプラグインの使用方法（より多くのデバイスをカバー）
次に、WordPressファビコンプラグインを使用して同じ効果を実現する方法を紹介します。
繰り返しますが、この方法と前の方法の違いは、プラグインがより多くのデバイスに最適化されたファビコンを追加することです。 また、ファビコンがさまざまなデバイスを検索する方法をカスタマイズできるインターフェイスも提供します。
次のカスタムファビコンを作成できます。
- iOS
- アンドロイド
- ウインドウズの電話
- 等
これは必ずしも必要ではありません。エッジケースをカバーすることが重要です。
この方法に従うには、RealFaviconGeneratorプラグインによる無料のファビコンをインストールする必要があります。
プラグインをアクティブ化したら、[外観]→[ファビコン]に移動します。 [メディアライブラリから選択]ボタンを使用して、WordPressメディアライブラリからファビコンをアップロードまたは選択します。
次に、[ファビコンの生成]をクリックします。
その後、プラグインは外部サイトに移動し、ファビコンがさまざまなデバイスをどのように検索するかを微調整できます。
これらの調整が完了したら、下にスクロールして[ファビコンとHTMLコードを生成]ボタンをクリックします。
それをクリックすると、WordPressダッシュボードに戻り、成功メッセージと、さまざまなデバイスでのファビコンのプレビューが表示されます。
それでおしまい！ これですべて完了です。 プラグインをアクティブにしておくようにしてください。そうしないと、ファビコンが消えてしまいます。
同じRealFaviconGeneratorツールを使用してWordPressにファビコンを手動で追加する方法
繰り返しますが、上記のプラグイン方式では、ファビコンを使い続けるためにプラグインをアクティブのままにしておく必要があります。
それが問題になる場合は、同じツールを使用してすべてを手動で行うこともできます。
最終結果はまったく同じです。FTP経由で画像を手動でアップロードし、サイトの<head>セクションにコードを追加するだけです。
もう少し複雑なので、これをいくつかのステップに分けます…
ステップ1：ファビコンパッケージを生成する
開始するには、RealFaviconGenerator Webサイトにアクセスし、[ファビコン画像の選択]をクリックしてファビコン画像をアップロードします。
画像をアップロードすると、プラグインから同じインターフェースが表示され、さまざまなデバイス用にファビコンを確認してカスタマイズできるようになります。
プラグインの場合と同様に、一番下までスクロールして、微調整が終了したら[ファビコンとHTMLコードを生成]ボタンをクリックします。
ステップ2：ファビコンパッケージをWebサイトにアップロードする
次の画面で、ボタンをクリックしてファビコンパッケージをダウンロードします。
次に、このパッケージを抽出し、FTPを使用してサイトのルートフォルダーにアップロードする必要があります（ FTPが何であるかわからない場合は、前のセクションのプラグインメソッドを使用することをお勧めします）。
すべてのファイルをルートフォルダに配置してください。そうしないと機能しません。
ステップ3：テーマの<head>にコードスニペットを追加する
最後に、RealFaviconGeneratorのコードスニペットをWordPressテーマの<head>セクションに追加する必要があります。
または、子テーマのfunctions.phpファイルに次のコードスニペットを追加できます（子テーマを使用する必要があります）。
/* Adds the favicon code snippet from RealFaviconGenerator */
add_action('wp_head', 'add_favicon');
function add_favicon(){
?>
REPLACE THIS LINE OF TEXT WITH FAVICON CODE
<?php
};
どちらの方法でも構いません！
これを実行すると、すべて完了し、ファビコンが機能し始めるはずです。
今すぐWordPressファビコンを追加する
ファビコンを追加して、訪問者によりブランド化されたエクスペリエンスを提供するのに数分しかかかりません。
そして、これが素晴らしいことです：
WordPressサイトにファビコンを追加すると、それについてもう一度考える必要はありません。
WordPressファビコンを追加する方法について他に質問がありますか？ コメントでお知らせください。お手伝いします。