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

WordPressファビコンとは何ですか？

WordPressファビコンは、通常16×16ピクセルのサイズの小さなアイコンであり、ブランドを表し、ブラウザのタブで簡単に確認できるページの近くにあります。

以前は、 Google Analyticsが重要ではなかったとき、ファビコンはWebトラフィックを決定するためのツールとして使用されていました。 しかし今では、UXとブランド認知度を高めることでよく知られています。

それに加えて、WordPressファビコンを持つことはブランド認知に役立ちます。 ブラウザのタブ、ブックマーク、履歴アーカイブなどで簡単に表示できるためです。 また、スマートフォンやタブなどの小さなデバイスでWebサイトのショートカットとして使用することもできます。 ユーザーの時間を節約し、閲覧するWebサイトを簡単に識別できるようにします。

WordPressファビコンを使用する利点はなぜですか？

WordPressファビコンを使用する利点についてすでに説明したブランド認知度とユーザーエクスペリエンスの向上とは別に、訪問者が適切なWebサイトを閲覧し、適切なページにいることを保証します。

ブラウザで多くのタブを開いたとします。タブの数が増えると、次のようにWebサイトのタイトルが非表示になります。

この時点で、ファビコンを使用すると、Webサイトをすばやく識別できるため、Webサイトを簡単に切り替えることができます。 さらに、訪問者にブラウザのホーム画面またはスマートフォンなどの小さなデバイスにWebサイトのショートカットを追加して、Webサイトに簡単かつ迅速にアクセスするように依頼することもできます。

結局のところ、すべてのWebサイトの主要な目標の1つは、訪問者がWebサイトに何度も簡単にアクセスできるように、独自のユーザーエクスペリエンスを提供することです。 これは、WordPressファビコンがWordPress Webサイトで役立つものであり、強力なブランド認知を確立し、ユーザーエクスペリエンスを次のレベルに高めるのに役立ちます。

では、Webサイト用の美しいWordPressファビコンを作成するにはどうすればよいでしょうか。

WordPressファビコンを作成する方法は？

WordPressファビコンを作成するには、最初に行う必要があるのは、WordPressファビコンのサイズとサポートするデバイスを決定することです。 ただし、さまざまなブラウザとプラットフォームをサポートするファビコンのさまざまな解像度の完全なリストが利用可能です。

ただし、この投稿では、最も推奨され広く受け入れられている解像度を使用するため、混乱することなく、Webサイト用のWordPressファビコンを簡単に作成できます。

WordPressファビコンを作成するためのいくつかの最良のヒント

• ファビコンの最も推奨される解像度は512×512ピクセルです。
• 解像度を16×16ピクセルに縮小しても見栄えのする画像を選択してください。
• 検索結果の横にあるファビコンの対象となるには、常にGoogleが提供するガイドラインに従ってください。
• WordPressにアップロードした後、またはアップロードする前にカスタマイズするオプションが提供されるため、長方形または正方形の画像を選択できます。

WordPressファビコンを作成する方法はたくさんあります。 自分のブランドをよりよく理解し、プロ並みのファビコンをデザインできるデザイナーを雇うことができます。 WordPressファビコンプラグインを使用してファビコンを作成できます。 アドビフォトショップの使い方を知っていれば、自分でデザインすることもできます。

それに加えて、ファビコンジェネレータやファビコン.ccなどのさまざまなオンラインツールも利用でき、ファビコンを簡単に作成できます。

Webサイトxyz.comのファビコンを作成するとします。 あなたはadobephotoshopの使い方を知らず、プロのデザイナーを雇うのに十分な予算がありません。 この場合、ファビコンジェネレーターを使用します。

まず、次の図に示すように、Webサイトにアクセスして、変換する画像をWebサイトのファビコンにアップロードする必要があります。

次のような適切な設定を選択します

• Web、Android、Microsoft、iOSアプリのアイコンを生成する
• 16×16のWordPressFavicon.icoのアイコンのみを生成します

チェックボックスをオンにして、[ファビコンの作成]ボタンをクリックします。 Webページはダウンロードページにリロードされ、そこから以下に示すようにファビコンzipファイルを簡単にダウンロードできます。

ただし、上記のようにコードをコピーしてHTMLドキュメントの先頭に貼り付けることで、ファビコンを手動でWebサイトに追加することもできます。

ファビコンを設計するためのツールを選択せず​​、自分で設計することを選択した場合は、設計を開始する前に留意しなければならない点がいくつかあります。

• 他の人に縮小されるため、細部が失われる可能性があるため、デザインをシンプルかつクリーンに保ちます。
• ファビコンのデザインは、ウェブサイトのメインロゴと同じ色、グラフィック、またはフォントであるか、ブランドを表す必要があります。
• 最初にファビコンをより大きな解像度で設計してから、要件に応じてサイズを変更します。

ファビコンの設計が完了したら、サポートされているファイル形式でファイルを保存する必要があります。 以前は、広く使用されている特定のWordPressファビコンファイルタイプ「WordPressFavicon.ico」がありました。 しかし、今では状況が変わり、最近ではすべての最新のWebブラウザーが、PNG、GIF、およびICOファイル形式をサポートしています。

ただし、JPEGファイル形式も利用可能であり、ファビコンファイルを保存するために広く使用されている形式です。 ただし、それらをサポートしていない古いバージョンのInternetExplorerがいくつかあります。 ですから、普遍的な支持を持っている人だけに固執する方が良いです。

あなたのサイトにWordPressファビコンをアップロードする方法は？

ファビコンの設計と保存に成功したら、ファビコンをWordPressサイトにアップロードまたは追加します。 あなたがそれをすることができる3つの方法があります、

1. WordPressカスタマイザー経由
2. プラグインを使用してファビコンを追加する
3. ファビコンを手動で追加する

WordPressカスタマイザーを使用したファビコンの追加

WordPress 4.3バージョンのリリース後、ファビコンとして使用する画像をアップロードおよびトリミングするための簡単かつ迅速な方法となる新しいオプションが導入されました。

あなたがする必要がある唯一のことは、できれば512X512の解像度の高品質の鮮明な画像をアップロードすることです。 まず、以下に示すように、 WordPressダッシュボード>外観>カスタマイズにログインします。

以下に示すように、ページが読み込まれ、[サイトID]タブをクリックする必要があるページをカスタマイズします。

[サイトID]タブをクリックした後、図のように[サイトアイコンを選択]ボタンを探す必要があります。

その後、WordPress Mediaインターフェイスが表示され、画像をアップロードしたり、メディアライブラリの既存の画像を使用してファビコンを作成したりできます。 次に、右下隅にある「選択」ボタンをクリックします。

その後、選択した画像をトリミングまたはサイズ変更して、ファビコンに完全に適合させることができます。次に、[画像のトリミング]ボタンをクリックして画像を完成させます。

上記のすべての手順を完了したら、すべての変更を保存し、公開ボタンを押して公開します。 ただし、ファビコンに満足できない場合は、WordPressファビコンを変更するために上記の手順を繰り返す必要があります。

WordPressファビコンプラグインを使用してファビコンをサイトに追加する

デフォルトのWordPressサイトアイコン機能以外のオプションを探している場合は、WordPressファビコンプラグインを利用できます。 さまざまな無料で人気のあるファビコンプラグインが利用可能で、同じ簡単な機能を備えていますが、より多くの互換性オプションとよりカスタマイズされたエクスペリエンスを提供します。

使用できる最も人気があり広く使用されているWordPressファビコンプラグインの1つは、RealFaviconGeneratorによるファビコンです。

このプラグインは互換性を真剣に受け止めていたため、人気のあるWebブラウザの大部分と互換性のあるレスポンシブファビコンを設定できます。

まず、 WordPressダッシュボード>プラグイン>新規追加からReavFaviconGeneratorプラグインをインストールする必要があります。

続いて、[インストール]ボタンをクリックしてアクティブにします。 次に、[外観]> [ファビコン]に移動し、メディアライブラリから70×70以上の画像を選択して、以下に示すように[ファビコンの生成]ボタンをクリックします。

[ファビコンの生成]をクリックすると、プラグインのWebサイトにリダイレクトされ、下にスクロールして[ファビコンとHTMLコードの生成]ボタンをクリックする必要があります。

ツールはバックグラウンドで動作しますが、WordPressダッシュボードにリダイレクトされます。 これでファビコンの準備が整いました。

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

ルートディレクトリへのアクセス方法がわからない場合は、上記の2つの簡単な方法を使用することを強くお勧めします。 ただし、それでも手動による方法を使用する場合は、FTPクライアントまたはWebホスティングプロバイダーが提供するcPanelを介して使用する必要があります。

ステップ1：しかしその前に、RealfavicongenratorのWebサイトにアクセスする必要があります。 [ファビコン画像を選択]ボタンをクリックして、ファビコンを生成します。

画像をアップロードすると、RealFaviconGeneratorプラグインを使用しているときと同じユーザーインターフェイスに気付くでしょう。 必要に応じてカスタマイズまたは変更を加え、Webページを下にスクロールして、以下に示すように[ファビコンとHTMLコードを生成する]ボタンをクリックします。

ステップ2： [ファビコンとHTMLコードの生成]ボタンをクリックすると、ページが次のページに移動し、そこからファビコンパッケージをダウンロードできます。

ダウンロードしたファビコンパッケージを抽出し、FTPクライアントまたはホスティングクライアントが提供するcPanelを介してWebサイトのルートディレクトリにアップロードします。

WPOvenでは、ユーザーに独自のエクスペリエンスを提供するよう努めており、ユーザーの利便性が最優先事項です。 したがって、サイトのファイルとフォルダーを簡単に管理するための新しいファイルマネージャーを提供します。

新しいサイトツールであるファイルマネージャーをご紹介します。

WPOvenのファイルマネージャーを使用すると、サイトのファイルとフォルダーを簡単に管理できるようになります。 以下の様々な作業を簡単に行うことができます。

• WordPressプラグインとテーマをインストールする
• ファイルとフォルダの作成、編集、削除、名前の変更、移動、追加
• zipまたは解凍してファイルを解凍してアーカイブを作成する
• ファイルを並べ替える
• ファイルとフォルダを検索する
• ファイルをアップロードする

ファイルマネージャーツールを使用してサイトのファイルとフォルダーにアクセスするには、最初にWPOvenダッシュボードにログインする必要があります。 次に、作業するサイトを選択します。

次に、「ツール」サブメニューを選択し、「ファイルマネージャの起動」ボタンをクリックします。

これで、ファイルマネージャーでサイトのファイルとフォルダーを確認できるようになります。

「ファイルの追加」ボタンをクリックし、アップロードする抽出ファイルを選択します。

ただし、配置するファイルはルートフォルダにある必要があります。そうでない場合は機能しません。

ステップ3：プロセス全体を完了し、正しく機能させるために必要な最後のステップは、RealFaviconGeneratorから生成されたコードスニペットをWordPressテーマのヘッドセクションに追加することです。

次のコードスニペットをヘッダーセクションに追加するには、ヘッダーとフッターのプラグインをインストールしてアクティブ化する必要があります。 次に、 [設定]> [ヘッダーとフッターの挿入]に移動し、下の図に示すように、ヘッダーセクションにコードスニペットを貼り付けて、[保存]をクリックします。

すべての手順を完了すると、ファビコンが表示され始めます。

WordPressファビコンが表示されない場合はどうなりますか？

上記のすべての手順を実行してもWordPressファビコンが表示されない場合は、次の理由が考えられます。

1. 間違ったWordPressファビコンファイルタイプを使用– PNG、GIF、およびJPEGは、ファビコンの最新のブラウザで現在サポートされている画像ファイル形式の一部です。 ただし、古いブラウザではサポートされていません。 それに加えて、大多数のWebブラウザーでさえ、WordPress Favicon.icoファイル形式の使用を好むため、使用することをお勧めします。 互換性の問題を回避するためのIcoフォーマット。
2. 適切なファビコンサイズを設定できない– Webサイトにファビコンを表示しないもう1つの理由は、ファビコンの画像サイズとデバイスの画面サイズの互換性がないことです。 これは、異なるサイズと解像度で画像の複数のバージョンを保存するfavicon.icoファイルタイプを使用することで排除できます。 そのため、ファビコンはどの画面サイズでも簡単に表示できます。
3. テーマと互換性のないWordPressファビコンプラグイン– WordPressファビコンジェネレータプラグインを使用している場合、現在使用しているテーマとの非互換性の問題が表示されている可能性もあります。 したがって、プラグインの更新を確認することをお勧めします。これは、現在のテーマおよびWordPressのバージョンとの互換性があります。

概要

これで、WordPressファビコンがブランド認知とユーザーエクスペリエンスの向上にどのように役立つかがわかりました。 そして最良の部分は、すべてのガイドラインとこれらの簡単な手順に従うことで、誰でも自分のWebサイトでファビコンを簡単に作成して実装できることです。

1. オンラインのファビコンジェネレータツール、プラグインを使用したり、専門家の助けを借りたりするなど、利用可能な多くのオプションを使用して、ファビコンを簡単に作成できます。
2. WordPressのカスタマイズオプションを使用してウェブサイトに簡単に追加したり、プラグインを使用したり、手動で追加したりすることもできます。

最後に、この投稿で言及し損ねた、追加する価値のあるポイントがあれば、以下のコメントセクションでお知らせください。

よくある質問