WordPressファビコンを追加および変更する方法| WPバフ

公開: 2022-01-20

人々はWordPressを使用して個人や企業向けのWebサイトを作成します。 リピーターが自分のサイトであることを知るのに役立つ1つの方法は、カスタムのWordPressファビコンを用意することです。

ファビコンとは何ですか?

ファビコンは、ブラウザのタブまたはウィンドウ、および特定のサイトに特に関連付けられているブックマークまたはお気に入りのリストに表示されるアイコンです。 ブラウザがカスタムファビコンを見つけられない場合は、代わりにデフォルトのファビコンが表示されます。

WordPressファビコンは、多くの場合、サイトのロゴの小さなバージョンです。 ロゴをファビコンサイズに縮小できる場合もありますが、通常は元のロゴに関連するロゴを作成する必要があります。

コンピューター上で作成されているブランディングとロゴデザイン。
作成中のブランディングとロゴデザイン

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

企業は、親しみやすさを向上させ、潜在的な顧客からの信頼を促進するためのファビコンを用意する必要があります。 ブランディングにより、訪問者はサイトを即座に認識できます。 それは継続性と正当性を追加します。

個人も同様の理由でファビコンを使用できますが、ほとんどの場合、購入ではなくリピーターが目標です。

ファビコンの仕様

WordPressのファビコンサイズは16×16ピクセルです。 ただし、他の一部のブラウザやアプリケーションは、16〜195ピクセル四方の範囲のより大きなサイズを使用します。

16×16サイズを使用する場合、より大きなサイズを使用するアプリケーションは一般にサイズを拡大し、ピクセル化を引き起こすことがよくあります。 このため、WordPressのサイトIDには代わりに512×512が必要です。

一般的な代替サイズは次のとおりです。

  • 24ピクセル– InternetExplorer9で固定されたサイトのアイコン
  • 72ピクセル–iPadのホーム画面のアイコン
  • 128ピクセル–Chromeウェブストアで使用されるアイコン
  • 195ピクセル– OperaSpeedDialに表示されるアイコン

ファビコンフォーマット

ファビコンが間違った形式で保存されていると、正しく表示されません。 最も一般的な形式は、元の要件であったWindowsICOです。 複数のプラットフォームで使用するために、さまざまなサイズと解像度を保持できます。 これは、InternetExplorerで使用される唯一の形式です。

PNGは、ほとんどすべてのグラフィックプログラムがこの形式で保存されるため、最もユーザーフレンドリーなオプションです。PNGはファイルサイズが小さく、必要に応じてファビコンを透明にすることができます。

OperaはファビコンでのSVGの使用をサポートしていますが、サポートしているのはSVGだけです。

GIF、JPG、およびAPNGはオプションですが、解像度が低く、気が散る可能性があるため、あまり役に立ちません。 気が散る可能性が高いのは、アニメーションGIFファイルとAPNGファイルです。これらもアニメーション化されています。

ファビコンの作成

あなたのサイトに認識を追加するためにWordPressファビコンを設計することは素晴らしいアイデアです。 コンピューターのグラフィックプログラムでデザインするか、favicon-generator.orgやfavicon.ccなどの無料のWebサイトをオンラインで使用できます。

ChromeブラウザでのGMail、Slack、HubSpot、TeamWork、Googleドライブのファビコンの例
Chromeブラウザのファビコンの例

ファビコンの価値を高めるために、次の要素を考慮してください。

身元

ファビコンを使用する最も重要な理由は、認識されることです。 提供する製品やサービスを表すデザイン、またはブランドロゴに一致するデザインを作成します。 ロゴの小さいバージョンや会社名のメインの文字など、ブランドに直接関連する画像が理想的です。

シンプルさ

サイズが小さいので、シンプルが最適です。 基本的な形や文字は、視認性を高めるのに適しています。 訪問者が一目でそれを認識するとき、それは最も効果的です。 含めようとする詳細が多いほど、訪問者がアイコンが何であるかを認識するのが難しくなります。 精度、大胆さ、明快さが不可欠​​です。

高コントラストは読みやすさを改善し、認識を高めます。 NBCやNetflixなどのサイトのファビコンを検討してください。 彼らのサイトはすぐにわかります。 明確な色の同一性を持つサイトは、WordPressファビコンにその色を含める必要があります。 繰り返しますが、シンプルにしてください。 色が多すぎると、画像が不鮮明になる可能性があります。

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

次のいずれかの方法を使用して、WordPressファビコンを追加します。

1)WordPressの組み込みのサイトアイコンオプションを使用します。

[外観]にカーソルを合わせて[カスタマイズ]を選択し、[サイトID]タブを選択します。 サイトアイコンは左側のパネルの下部にあり、512ピクセル以上の正方形の画像を選択して、必要に応じてサイズを変更できます。

選択したファイルが正方形でない場合、WordPressは画像を正方形にトリミングするためのインターフェイスを提供します。

新しいWordPressファビコンを追加するためのWBPuffsエディター。
新しいWordPressファビコンを追加するためのWBPuffsエディター

2)header.phpを編集します

現在のテーマでheader.phpファイルを編集し、次のコードを追加します。

 <link rel=”icon” href=”https://www.yourdomain.com/favicon.ico” type=”image/x-icon” > <link rel=”shortcut icon” href=”https://www.yourdomain.com/favicon.ico” type=”image/x-icon” />

「yourdomain」をサイトのドメイン名に置き換え、ファビコンをWebスペースにアップロードしてください。

WordPressが更新で変更を元に戻さないようにする場合は、編集する前に子テーマを作成し、メインテーマファイルの代わりに子テーマファイルを編集します。

3)WordPressプラグインを使用します。

以下にリストされているプラ​​グインの1つを使用してください。

WordPressでファビコンを変更する方法

WordPressファビコンを変更することは、ファビコンを追加することに似ています。 同じ方法で、新しいファビコンをアップロードできます。 新しいものをアップロードして古いものを上書きすることも可能です。これにより、訪問者がキャッシュをクリアしたり、ハードリフレッシュを行ったりしたときに変更されます。

プロセスがわかりにくい場合は、WPバフにアップグレードと変更を処理させてください。 チームは24時間年中無休でサービスと支援を提供します。

WordPressファビコンプラグインで簡素化

プラグインをインストールすることで、WordPressファビコンを追加または変更するプロセスを簡単にします。

  • プラグインのInsertHeadersand Footersを使用すると、上記のコードを簡単に追加できます。 コードをヘッダーセクションに貼り付けて保存します。
  • プラグインAllinOne Faviconは、ファビコンを追加するプロセスを容易にする機能を追加します。
  • RealFaviconGeneratorは、ブラウザの要件に基づいてアイコンを生成するプラグインです。
  • もう1つの人気のあるプラグインは、アップロードされた画像またはすでにメディアライブラリにある画像からファビコンを生成するHeroicFaviconGeneratorです。 画像ファイルのアップロードにはドラッグアンドドロップを使用します。

WordPressファビコンが表示されないのはなぜですか?

ユーザーエラーからブラウザの特異性まで、ファビコンエラーにはいくつかの理由が考えられます。

キャッシュ

Webサイトがキャッシュされると、ファビコンなどの要素への変更が表示されるまでに時間がかかります。 ハードリフレッシュ(Ctrl + F5)を実行するか、ブラウザのキャッシュをクリアすることで、プロセスを高速化できます。 それでも問題が解決しない場合は、ファビコンファイルの種類を確認してください。 .icoファイルでない場合は、ブラウザと互換性がない可能性があります。

タイプミス

コードに誤植がある場合、ファビコンは表示されずにエラーになる可能性があります。 引用符、スラッシュ、角かっこがないなどの単純なエラーは、画像や場合によってはWebページ全体を混乱させるエラーを引き起こします。 コードを注意深く確認してください。

WordPressファビコンの場所

ファイル参照も非常に具体的です。 リンク(href引用符内の部分)が存在しない画像を指している場合、ファビコンは表示されません。 ファビコンファイルをアップロードし、正確なリンクをコピーするように注意してください。 これを行う最良の方法は、WordPress内のメディアライブラリを使用することです。

ローカルビュー

インターネットページをロードするのではなく、ローカルコンピューターで表示を確認している場合、ほとんどのブラウザーはファビコンをローカルで検索しないため、WordPressファビコンは表示されません。 インターネット上のページをチェックして、訪問者に表示されていることを確認してください。

間違った画像タイプ

ファビコンイメージのデフォルトのファイルタイプは.ico(「image / ico」)です。 PNGやSVGなどの別のファイルタイプを使用する場合、テーマの編集メソッドを使用するときにコードで調整する必要があります。 ファイルタイプは、画像のファイルタイプと一致する必要があります。 たとえば、PNGファイルには「image/ico」ではなく「image/png」と記載する必要があります。

あらゆる種類のWordPress関連のトピックの詳細については、WPBuffsニュースレターを購読してください。

人々はまた尋ねます

WordPressにファビコンを追加するにはどうすればよいですか?

WordPressファビコンを追加する最も簡単な方法は、[カスタマイズ]の[サイトID]セクションを使用することです。 2番目に簡単なのはプラグインを使用することです。 テーマを編集して、ファビコンを手動で追加することもできます。

WordPressのファビコンはどこにありますか?

アイコン自体は、タブまたはウィンドウのタイトルに表示されます。 ブックマークリストにも表示されます。 この設定は、[カスタマイズ]セクションの[外観]にあります。 そこから、サイトIDをクリックします。左ペインの下部にあるサイトアイコンは、ファビコンをアップロードする場所です。

WordPressファビコンのサイズはどれくらいですか?

デフォルトのサイズは16×16ピクセルですが、サイトID方式を使用する場合は、代わりに画像を512×512ピクセルにする必要があります。 ソフトウェアは、各ブラウザまたはデバイスに適したサイズに画像を縮小します。

WordPressでファビコンを変更するにはどうすればよいですか?

ファビコンを追加するのと同じ方法でファビコンを変更します。 [外観]→[カスタマイズ]→[サイトID]に移動してプラグインで変更するか、新しいfavicon.icoファイルをアップロードして前のファイルを上書きします。