WordPressサイトにファビコンを追加する方法

公開: 2020-05-06

ファビコン、またはお気に入りのアイコンは、ブラウザタブのページタイトルの横にある小さな画像です。このサイトアイコンは、Webサイトのアイデンティティを確立する上で重要な役割を果たします。

プロのWebサイトを所有している場合、まだファビコンを使用していない場合は、ファビコンの使用を検討してください。ここでは、その重要性と、それを準備する際に考慮すべき事項について説明します。また、WordPressWebサイトにファビコンを追加する方法について3つの方法を紹介します。

なぜファビコンを使用する必要があるのですか？

ファビコンの重要性を示すために、以下のスクリーンショットをご覧ください。

ご覧のとおり、各タブには、アクセスしているWebページを区別するさまざまなアイコンがあります。ブラウザに多数のタブがある場合、ファビコンはこれらのページを識別するのに役立ちます。その結果、ユーザーエクスペリエンスが向上します。

ファビコンは、ブラウザのタブでのみ役立つわけではありません。ユーザーがモバイルホーム画面またはデスクトップにページショートカットを追加すると、ファビコンが画面に表示されます。その上、ファビコンはロゴと同じように機能します。人々がそれを見るとき、彼らはあなたのウェブサイトとブランドを即座に認識します。

ファビコンの準備

ファビコンを作成する最も速くて簡単な方法は、ファビコンジェネレーターを使用することです。それらのほとんどは、少し調整するだけですぐに使用できる画像を提供するため、技術的な知識は必要ありません。

ブランドのロゴも使用することを検討してください。ただし、正方形のアイコンにトリミングできることを確認してください。また、サイズが小さいにもかかわらず、はっきりと見えるように、十分にシンプルに見える必要があります。 Photoshop、DesignWizard、GIMPなどの画像編集プログラムを使用して、ロゴを変更およびサイズ変更します。

画像の形式については、ほとんどのブラウザでサポートされているICOファイルを使用することをお勧めします。ただし、すべての写真編集ソフトウェアでICOファイルを作成できるわけではありません。したがって、オプションを提供するオンラインファビコンジェネレータを使用することをお勧めします。または、画像をPNGとして保存し、オンラインICOコンバーターを使用します。通常、サイズは16 x16ピクセルである必要があります。

WordPress 4.3のサイトアイコン機能を使用する場合は、事前に画像を変換することを心配する必要はありません。これで、任意の画像ファイルをファビコンとしてアップロードできます。とにかく、アップロードした後は常にどのブラウザでも表示できることを確認してください。

WordPressサイトにファビコンを追加する3つの方法

Webサイトにファビコンを追加する方法は3つあり、お好みのオプションを選択してください。

オプション1：WordPressカスタマイザー

WordPress 4.3ユーザーの場合、ファビコンを追加するには、サイトアイコン機能を使用するのが最も便利で推奨される方法です。

高さと幅の両方で少なくとも512ピクセルの正方形の画像を準備します。ファイルは128MBを超えてはなりません。長方形の画像がある場合は、ファビコンをアップロードするときに画像を切り抜くことができます。

画像の準備ができたら、次の手順に従います。

1. WordPressダッシュボードを開き、[外観]に移動して、[カスタマイズ]を選択します。

2.サイトアイコンを含むタブを探します。ほとんどのテーマはサイトIDに含まれますが、タブの名前をサイトタイトル、ブランド名、サイトロゴ、ヘッダーなどに変更するものもあります。

3.サイトアイコンを選択し、メディアライブラリから画像を選択するか、新しいファイルをアップロードします。

4. CropImageエディターが表示されます。必要に応じて位置と比率を調整します。

5.おめでとうございます！新しいファビコンが必要です。まだ表示されていない場合は、キャッシュをクリアしてブラウザを再起動することをお勧めします。

オプション2：プラグインの使用

WordPressを更新していない場合は、プラグインを使用してファビコンを追加できます。

一部のプラグインでは、デスクトップ以外のデバイスでファビコンがどのように表示されるかをより細かく制御できます。たとえば、RealFaviconGeneratorによるFaviconには、さまざまなオペレーティングシステムでアイコンの外観をカスタマイズするオプションがあります。

プラグインを使用するには、次の手順を実行します。

プラグインに移動し、WordPressダッシュボードで[新規追加]をクリックします。
RealFaviconGeneratorでファビコンを検索し、プラグインをインストールしてアクティブ化します。
[外観]を選択し、ダッシュボードから[ファビコン]をクリックします。 70 x70ピクセルより大きい正方形の画像をアップロードします。理想的には、画像は260 x260ピクセル以上である必要があります。
iOS、Android Chrome、Windows、Safariでファビコンの外観を設定できるページにリダイレクトされます。次に、[ファビコンとHTMLコードの生成]をクリックします。

そのプラグイン以外に、All in OneFaviconを使用できます。プラグインを使用すると、バックエンドとフロントエンドに異なるファビコンを設定できます。このように、Webサイトとダッシュボードの両方が開いているときに混乱することはありません。

オプション3：FTPクライアントを介した手動インストール

もう1つの方法は、ファビコンをWordPressWebサイトに手動でアップロードすることです。このためには、WebサイトをFileZillaなどのFTPクライアントに接続する必要があります。アイコンはICOまたはPNG形式のいずれかであり、ファビコンという名前にする必要があります。

この方法を使用するには、子テーマを作成することも強くお勧めします。そうすれば、新しいテーマの更新があったときにコードの変更が削除されることはありません。

サイトが接続されたら、次の手順を実行します。

FTPクライアントを介してファビコンファイルを現在のテーマフォルダにアップロードします。子テーマを使用している場合は、そのフォルダーにアップロードします。
同じファイルをルートディレクトリに追加します。これは、wp-contentおよびwp-adminと同じフォルダーにある必要があります。これは、ファビコンをフィードリーダーで表示できるようにするためです。
WordPressダッシュボードで、[外観]に移動し、[テーマエディター]をクリックします。
次に、テーマヘッダーファイルを選択し、ICOファイルがある場合は、タグ内に次のコードを追加します。

<link rel =”ショートカットアイコン” href =” <？php echo get_stylesheet_directory_uri（）; ？> /favicon.ico” />

href =から/favicon.icoまでの部分をルートディレクトリへのパスに置き換えます。次のようになります。

<link rel =”ショートカットアイコン” href =” <http://www.yourdomainname.com/favicon.ico” />

PNGファイルがある場合は、ファイル形式を置き換えるだけです。次に、ファイルを更新します。

5.Webサイトを更新します。それが機能する場合は、今までに新しいファビコンが必要です。

すべての方法で、モバイルデバイスでのファビコンの外観を確認することを忘れないでください。モバイルブラウザからWebサイトを開き、サイトをホーム画面に追加します。

それらは小さいですが、ファビコンはブランド認知度を高め、より良いユーザーエクスペリエンスを生み出すことができます。オンラインファビコンジェネレータまたは任意の画像編集ソフトウェアを使用して、独自のファビコンを作成できます。すでにお持ちの場合は、上記の3つの方法のいずれかを使用してWordPressWebサイトに追加してください。幸運を！

WordPress LMSWebサイトで人気のあるプラグインとテーマをもっと読む