WordPressファビコンの追加方法を4種類ご紹介

WordPressファビコンとは、ブラウザのタブに表示される小さなアイコン画像のこと。ユーザーが複数のタブを開いているときでも、WordPressサイトを一目で見つけられるようにする重要な要素であり、サイトタイトルが表示されていない場合でも、このアイコンがあればユーザーは迷わずWordPressサイトを識別できるのです。

この記事ではWordPressファビコンの基本から重要性、作成方法まで詳しく解説し、WordPressサイトにファビコンを追加する複数の方法を紹介します。ぜひ、自分に合った方法を選んで簡単に設定してみましょう。

この小さなアイコンがあれば、ユーザーは複数のタブの中からWordPressサイトをすぐに見つけられますし、検索結果ページ（SERP）でもWordPressサイトの視認性がグッとアップします。WordPressサイトのURLと一緒に表示されるので、ユーザーがWebページをすばやく識別するのに役立ちます。

さらに、ユーザーがWordPressサイトをブックマークすると、スマホのホーム画面にはアプリアイコンのように表示されます。個性的なファビコンはWordPressサイトを本格的に見せるだけでなく、ブランディング構築にも大きく貢献するわけです。

ファビコン画像の作り方

WordPressファビコンを作るなら、グラフィックデザインソフトやReal Favicon Generatorなどのオンラインツールが便利。どの方法を選ぶかは、デザイン経験やツールの使いこなし具合によって変わってきます。

ファビコン作成時に押さえておきたいポイントは以下のとおり。

• 解像度：アイコンは検索結果やブラウザタブに小さく表示されるだけなので、あまり高解像度にする必要はありません。理想的なサイズは512 x 512ピクセルです。
• アスペクト比：WordPressサイトのファビコンは1:1の正方形が基本。違うと画像が切れたり歪んだりして、Webページの見た目を損なってしまいます。
• 配色パターン：透明背景を使うとファビコンが目立ちやすくなります。特に白い要素やアイコンを使う場合は効果的。WordPressサイト全体との一貫性を保つため、ブランドと同じカラーパレットを使うのを忘れないようにしましょう。
• ファイル形式：透明背景を含むファビコンならPNG形式が必須です。それ以外なら、WordPressがサポートするICO、JPEG、GIFなどの形式も使えます。
• 検索エンジン要件：WordPressサイトアイコンが検索結果で正しく表示されるよう、Googleのファビコンガイドラインに準拠することも大切です。

ファビコン作成の具体的なステップは、使うソフトや目指す画像によって変わります。簡単に済ませたい場合は、Hostinger AIロゴメーカーを使えば無料で画像が生成できますよ！

WordPressにファビコンを追加する4種類の手順

このセクションでは、WordPressサイトにカスタムファビコンを追加する方法を4種類紹介します。どのやり方も最終的な結果は同じなので、好みや使いやすさで選んでみてください。

1.Gutenbergブロックエディターを使う

WordPressサイトにファビコンを追加する一番シンプルな方法は、Gutenbergエディターを活用すること。ただしこの機能はブロックテーマとWordPress 5.9以降でしか使えないので注意してください。

手順は以下のとおりです。

• WordPressダッシュボードから「外観」→「エディター」に移動します。
• アイコンを置きたい場所にカーソルを合わせ、プラス（+）ボタンをクリック。どこでも配置できますが、ヘッダーの隅がおすすめです。
• 「サイトロゴ」ブロックを検索して選びます。
• ブロックにカーソルを合わせてアップロードアイコンをクリック。

• ファビコンファイルをアップロードするか、WordPressメディアライブラリから選択。「選択」ボタンで確定します。

• ファビコンをクリックして、右サイドバーのブロック設定を開きます。表示されない場合は、画面右上の設定ボタンをクリックしてください。
• サイドバーから「サイト情報として使用」機能をオンにします。

• 右上の「保存」ボタンで変更を適用しましょう。

これでWordPressサイトにアクセスすると、デフォルトのWordPressロゴの代わりに、カスタムファビコンが表示されているはずです！

2.WordPressカスタマイザーから設定する

クラシックテーマを使っている場合は、WordPressカスタマイザー機能でファビコンを追加できます。この方法はWordPress 4.3以降で利用可能です。方法は以下のとおりです。

• WordPressダッシュボードから「外観」→「カスタマイズ」へ進みます。見つからない場合は、WordPressサイトのURLの後ろに「wp-admin/customize.php」を追加して直接アクセスしてください。 
• 左サイドバーから「サイト基本情報」を開き、「サイトアイコンを選択」ボタンをクリック。 

• 画像をアップロードするか、メディアライブラリから選んで「選択」をクリックします。
• ファビコンのサイズを必要に応じて調整し、「画像を切り抜き（トリミング）」をクリック。デフォルト設定でよければ「切り抜きをスキップ」を選びます。
• これで、サイドバーの「サイトアイコン」セクションにWordPressサイトファビコンのプレビューが表示されます。「公開」ボタンをクリックして変更を保存しましょう。

3.3. RealFaviconGeneratorプラグインを活用する

もっと多くのカスタマイズオプションやプレビュー機能が欲しいなら、サードパーティのプラグインを使うのがおすすめ。いろいろなプラグインがありますが、特に「Favicon by RealFaviconGenerator」は最も広く使われていて便利です。

プラグインをインストールして有効化したら、次のステップでファビコンを設定しましょう。

• WordPressの管理ダッシュボードから「外観」→「ファビコン」に進みます。
• 「メディアライブラリから選択」をクリックして、新しい画像をアップロードするか、既存の画像を選びます。

• 「ファビコンを生成」をクリックすると、別のページに移動します。
• デフォルト画像をそのまま使いたいなら「元の画像をそのまま使用」を選択。または、背景色、角の丸み、画像サイズなどを調整してください。

• 下にスクロールして「Favicon Generator Options」まで移動し、「Generate your Favicons and HTML code」をクリックして確定します。

これで完了です！WordPressダッシュボードのファビコンメニューに戻るので、「ファビコンを確認」ボタンをクリックして正しく表示されているか確認しましょう。変更したいときは、同じ手順を繰り返すだけです。

ただし、このプラグインはファビコンを表示するために有効なままにしておかなければなりません。無効化やアンインストールをしてしまうと、WordPressサイトアイコンも表示されなくなってしまうので注意してください。

セキュリティリスクやバグを避けるため、プラグインは定期的に更新しましょう。HostingerのWordPress向けマネージドホスティングユーザーなら、hPanelで自動更新機能を有効にして簡単に管理できます。

4.テーマファイルを手動で編集する

画像をWordPressのルートフォルダにアップロードし、テーマファイルを直接編集してファビコンを追加することもできます。この方法はやや複雑なので、開発者やコーディング経験のある方向けです。

まず子テーマを作成して有効にし、テーマのアップデート後もファビコンコードが消えないようにしておきます。その後、次のステップで進めてください。

• Real Favicon Generatorサイトを開き、「Select your Favicon image」をクリックしてファビコンファイルをアップロード。
• 「Favicon Generator Options」セクションまでスクロールし、「Path」タブをクリック。ファビコン画像の設置場所を選びます（理想的にはルートディレクトリ）。

• 「Generate your Favicons and HTML code」をクリック。
• インストールマニュアルページに移動したら、「Favicon package」ボタンをクリックしてファイルをダウンロードします。
• コードスニペットをコピーして保存しておきます。TXTファイルに保存するか、タブを開いたままにしておきましょう。

ファイルとコードの準備ができたら、次のステップでWordPressサイトに追加します。

• FileZillaなどのFTPクライアントかレンタルサーバー会社のファイルマネージャーを使って、WordPressサイトのpublic_htmlディレクトリにアクセスします。
• ダウンロードしたアーカイブをpublic_htmlに展開。フォルダではなく、ファビコンファイルだけが含まれるようにしてください。
• ブラウザで「domain.tld/favicon.ico」（domain.tldは実際のドメイン名に置き換え）にアクセスして、ファビコンが読み込めるか確認します。

domain.tld/favicon.ico

• WordPressダッシュボードを開き、「ツール」→「テーマファイルエディター」に進みます。
• 右側のテーマファイルメニューから「header.php」を選択。なければ「functions.php」を編集します。
• Real Favicon Generatorからコピーしたコードを、「?>」タグの後のファイル下部に追加します。例えば以下のような感じです。

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">

<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">

<link rel="manifest" href="/site.webmanifest">

<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">

<meta name="msapplication-TileColor" content="#da532c">

<meta name="theme-color" content="#ffffff">

• 「ファイルを更新」をクリックして変更を保存します。

ファビコンを削除したいときは、テーマファイルからコードを消去し、ルートディレクトリからファビコンファイルを削除するだけで問題ありません。

まとめ

WordPressファビコンは、ブラウザのタブに表示される小さなアイコン画像。複数のタブがあっても一目でWordPressサイトを見分けられ、ブランド認知度アップにも一役買います。

ファビコンはPhotoshopなどのグラフィックソフトやReal Favicon GeneratorのようなWebツールで簡単に作成できます。基本は正方形で、最低512×512ピクセルあれば十分。もちろん検索エンジンのガイドラインに準拠したデザインにすることも大切です。

WordPressサイトにファビコンを追加する一番シンプルな方法は、Gutenbergエディターのサイト情報ブロックを使うこと。クラシックテーマを使っているなら、外観メニューからWordPressカスタマイザー機能を利用しましょう。

他にも、Real Favicon Generatorなどのプラグインを使って外観設定から画像をアップロードする方法もあります。コーディングに慣れている開発者なら、アイコンをWordPressルートディレクトリに置いて、テーマのPHPファイルにHTMLコードを追加する手動設定も可能です。

WordPressファビコンに関するよくある質問

本サイトのチュートリアルコンテンツは、 Hostingerの編集方針と価値観に基づき作成されています。