WordPressにファビコンを追加する（サイトアイコン）

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

WordPressが更新され、既存の方法ではなくカスタマイズすることで、単にファビコン（サイトアイコン）をアップロードできるようになりました。

[この記事は、2022年1月27日に最後に更新されました。 ]

サイトアイデンティティでサイトアイコンを設定する（NEW）

WordPressが更新されると、プラグインを使用したり、以下の方法でファビコンを設定する必要なく、カスタマイズすることでファビコンを設定できるようになりました。

WordPress 管理者ページで ルックス > カスタマイズ > サイトアイデンティティ (Site Identity)に移動し、 サイトアイコン セクションの サイトのアイコンを選択 ボタンをクリックしてメディアライブラリから画像を選択するか、グラフィックファイルをアップロードして指定できます。

サイトアイコンはブラウザタブ、ブックマークバー、 WordPress モバイルアプリに表示され、サイトのアイコンは正方形で少なくとも512×512ピクセルでなければなりません。

この方法でファビコン（サイトアイコン）が正しく指定された場合は、以下の内容は無視してください。 以下は「サイトアイコン」アップロード機能が提供される前です WordPress バージョンに適用される内容です。 ファビコン関連のプラグインを使用している場合は、削除してカスタマイズする内でファビコンをアップロードしてください。

ファビコン作成

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

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

ファビコンファイルを作成した場合、いくつかの方法を使用して WordPressでファビコンを追加することができます。

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

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

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

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

プラグインを使用する

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

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

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

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

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

1. アイコン画像ファイルを準備します。
2. アイコンをファビコンファイル（* .ico）に変換します。 様々なインターネットサイトからのアイコンをファビコンに変換してくれるサービスを提供しています。 その中 FAVICON GENERATOR＆GALLERY サイトが大丈夫なようです。 ユーザーが用意したアイコンをアップロードすると、変換されたファビコンファイルをダウンロードすることができます。 サイズは16x16ピクセルに設定するように WordPress Codexページに出ますね。 ややぼやけてくるようで32x32ピクセルで指定しても WordPress サイトでよく表示されます。 （実際には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" />

今ブラウザで WordPress ブログにアクセスすると、追加したファビコンが表示されます。 もし表示されない場合、Cookieを削除したり、複数回「リフレッシュ」してください。 （それでもない場合には、キャッシュを削除してください。）

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

背景色が透明なファビコンを追加する方法は、上記の方法と同じですが、ファビコンの名前がfavicon.pngまたはfavicon.gifする必要があります。 そして

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

メモ：

• WordPress 画像のアップロード時のサイズが減少する場合の解決方法