ベストセラー人気 WordPress テーマTop 30 詳細

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

Last Updated:2022年1月27日| 7のコメント
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 Avada テーマファビコンを追加する

プラグインを使用する

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

WordPress ファビコンプラグインのインストール

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

WordPress ファビコンプラグイン

しかし、 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" />

メモ:


7のコメント

コメント

  1. Naver 検索時にサイト名の前にロゴが出ません。 ファビコンは出てきますが、これとは別に設定する必要がありますか?

    応答
    • こんにちは、ヒョンドゥルジャガイモ。 見てみる Naverは Naverで要求するファビコン入力方式がありますね。 次 Naver ドキュメントを参照してファビコンを設定してみますか?

      https://searchadvisor.naver.com/guide/markup-favicon

      応答
      • 迅速な回答ありがとうございます。 確認してみましょう〜

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

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

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

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

WordPress Naver カフェを訪れる

ありがとうございます!