WordPressにファビコンを追加する

FacebookさえずりredditPinterestのLinkedInのmail
ワードプレスファビコン

ファビコン(favicon:「favorites + icon」)とは、インターネットのウェブブラウザのアドレスバーに表示されるウェブサイトやウェブページを代表するアイコンを指すことです。 例えば、次の図のように、インターネットブラウザに表示される各サイトに対応するアイコンが表示されるためには、これファビコンといいます。 ファビコンを追加すると、そのサイトだけのアイデンティティ(Identity)を示すのに役立ちます。 この記事では、ワードプレスのサイトにファビコンを追加する方法について説明します。

ファビコン作成

オンラインで画像ファイルをファビコンに変換するサービスを提供するさまざまなサイトがあります。 例えば、 RealFaviconGenerator.net サイトから簡単にファビコンを作成することができます。 Favic-o-Matic サイトでは、すべてのプラットフォーム用のアイコンを無料で作成するか、32x32と16x16ピクセル.icoファイルを作成することができます。

ワードプレスにファビコンを追加する

ファビコンファイルを作成し取ればいくつかの方法を使用してワードプレスでファビコンを追加することができます。

  • テーマオプションで追加する(そのテーマでファビコンを追加する機能がある場合)
  • 手動でファビコンをアップロードして追加する
  • プラグインを使用する

テーマオプションを使用してファビコンを追加する

いくつかのワードプレスのテーマ(特に有料のテーマ)でファビコンをアップロードする機能を提供することができます。 この場合、直接アイコンをアップロードすると、簡単にファビコンをワードプレスのブログに追加することができます。

たとえば、ベストセラーのワードプレスのテーマである ああ海(Avada)では、テーマのオプションページで、「favicon」で検索すると、パイコーンとAppleのiPhoneとアップルアイパッド用のアイコンをアップロードすることができます。

ワードプレスああ海のテーマファビコンを追加する

プラグインを使用する

テーマでファビコンのアップロード機能を提供していない場合、プラグインや、手動でファビコンをアップロードする必要があります。 プラグインを使用するには、ワードプレスの管理ページ(ダッシュボード)で "プラグイン>プラグインを追加する"に移動し、「Favicon」で検索して目的の機能のプラグインをインストールして使用するようにします。

ワードプレスファビコンプラグインのインストール

たとえば、10万個以上のサイトに設置されて使用されている Favion by RealFaviconGenerator プラグインをインストールする場合は、 テーマのデザイン> Faviconで画像ファイルを選択して、Generate faviconボタンを押すと、ファビコンが作成されます。

ワードプレスファビコンプラグイン

しかし、ワードプレスのプラグインのインストールは、最小化することが望ましいので、手動で直接追加する方法をお勧めします。 コード1行を入力することでファビコンを追加することができます。

手動でファビコンを追加する

WordPress Codexの Creating a Favicon(ファビコン作成) ページの内容を参照して、ファビコンを登録することができます。 内容をまとめてみると次のような順序で、手動でファビコンをワードプレスのブログに追加することができます。

  1. アイコン画像ファイルを準備します。
  2. アイコンをファビコンファイル(* .ico)に変換します。 様々なインターネットサイトからのアイコンをファビコンに変換してくれるサービスを提供しています。 その中 FAVICON GENERATOR&GALLERY サイトが大丈夫なようです。 ユーザーが用意したアイコンをアップロードすると、変換されたファビコンファイルをダウンロードすることができます。 サイズは16x16ピクセルに設定するように WordPress Codexページに出ますね。 ややぼやけてくるようで32x32ピクセルで指定しても、ワードプレスのサイトでよく表示されます。 (実際に32x32ピクセルに適用されて表示されるかは分かりません。)
  3. ファビコンファイルの名前をfavicon.icoに指定します。
  4. FTPを使用して、現在のテーマのメインフォルダにfavicon.icoファイルをアップロードします。
  5. FTPを使用してfavicon.icoファイルをサイトのメインディレクトリ(例:http://example.com/favicon.ico)にアップロードします。
  6. テーマ(子テーマを使用している場合、子テーマ)のヘッダファイル(header.php)に次の行を追加します。
    <link rel="shortcut icon" href="<?php echo get_stylesheet_directory_uri(); ?>/favicon.ico" />

今ブラウザでワードプレスのブログを訪問すると、追加したファビコンが表示されます。 もし表示されない場合、Cookieを削除したり、複数回「リフレッシュ」してください。 (それでもない場合には、キャッシュを削除してください。)

透明な背景ファビコンを使用する

背景色が透明なファビコンを追加する方法は、上記の方法と同じですが、ファビコンの名前がfavicon.pngまたはfavicon.gifする必要があります。 そして<link rel = "shortcut icon" ...の部分でもファビコンのファイル名を変更してくれるようです。

<link rel="shortcut icon" href="<?php echo get_stylesheet_directory_uri(); ?>/favicon.png" />

注:



4のコメント

  1. 本当に不思議なことが...私の場合には、ファビコンをテーマにサポートします。 ところが管理画面では、現れるいざメインで表示されません。

    応答
    • 実を結ぶ木様私もそのような現象が生じました;;
      管理者ページで出てくるサイトでは、アンナオネヨ

      応答
      • こんにちは、イ・サンジョン様。

        キャッシュプラグインがインストールされている場合、キャッシュプラグインのキャッシュを削除し、ブラウザのキャッシュも削除した後、テストしてみてください。

コメントを残す