2026年6月28日

WordPressのfavicon（ファビコン）を設定する方法

テーマ・デザイン

はじめに

ウェブサイトのアイデンティティを表現する重要な要素として、favicon（ファビコン）があります。faviconはブラウザタブやブックマークアイコンに表示され、ユーザーにとって目立つ存在です。WordPressで独自のfaviconを設定することで、サイトの見た目に独特な魅力を与えることができます。

症状・背景

このテーマが必要になる主な場面:

<サイトのトップページにロゴやアイコンが表示されない>
<ブックマークされた際に適切なアイコンが表示されない>
<ブラウザタブの左上に表示されるアイコンを変更したい>
<他のウェブサイトと区別するための視覚的な要素が必要>

手順・設定方法

ステップ1: favicon画像を作成または選択

# 異なるサイズのfaviconを用意する。一般的には32x32pxと64x64pxが推奨される。
mkdir -p wp-content/themes/your-theme/images/
cp your-favicon.png wp-content/themes/your-theme/images/favicon-32x32.png
cp your-favicon.png wp-content/themes/your-theme/images/favicon-64x64.png

# 画像を適切な形式に変換する（必要であれば）。
convert -resize 32x32! -format png input-image.jpg wp-content/themes/your-theme/images/favicon-32x32.png

ステップ2: ファイルをサーバーへアップロード

# FTPやSFTPを使用してファイルをアップロードする。
sftp user@your-domain.com
put favicon-32x32.png wp-content/themes/your-theme/images/favicon-32x32.png
put favicon-64x64.png wp-content/themes/your-theme/images/favicon-64x64.png

# ファイルの権限を適切に設定する。
chown www-data:www-data /path/to/uploaded-files/*
chmod 644 /path/to/uploaded-files/*

ステップ3: カスタムヘッダーを通じてfaviconを追加

# functions.phpファイルを開き、以下のコードを追加する。
function custom_favicon() {
    echo '<link rel="shortcut icon" type="image/png" href="' . get_template_directory_uri() . '/images/favicon-32x32.png" />';
}
add_action('wp_head', 'custom_favicon');

# テーマのヘッダー（header.php）ファイルに以下のコードを追加する。
<link rel="shortcut icon" type="image/png" href="<?php echo get_template_directory_uri(); ?>/images/favicon-32x32.png">

ステップ4: 結果を確認・テスト

# ブラウザのリロードまたはキャッシュクリアを行い、変更が反映されたことを確認する。
Ctrl + R (ブラウザリロード)

# カスタムfaviconが正しく表示されているか確認する。
curl -I http://your-domain.com | grep "shortcut icon"

注意事項

<実践的な注意点1>: faviconは多くのブラウザで使用されるため、幅広いデバイスとバージョンの互換性を考慮することが重要です。また、適切なサイズと形式（PNG, ICO）を使用しましょう。
<実践的な注意点2>: ファイルが正しくアップロードされ、ウェブサーバーから正しく配信されることが確認できるように、ファイル権限や所有者の設定を適切に行うことが必要です。
<セキュリティ上の注意>: faviconは通常、サイトの信頼性に直接関連するため、攻撃者によって悪用されないよう、適切な認証とアクセス制御を設けるべきです。
<パフォーマンス/運用上の注意>: faviconは小さなファイルサイズであることが推奨されるため、PNGやICO形式の画像を最適化し、必要最小限のサイズで配信することが重要です。

まとめ

1. faviconの作成: 独自のアイデンティティを持つfaviconを作成または選択します。

2. ファイルアップロード: ファビコンをサーバーにアップロードし、適切な権限設定を行います。

3. カスタムヘッダー追加: WordPressテーマ内でfaviconを参照するコードを追加します。

4. 確認とテスト: ブラウザで結果を確認し、必要に応じて調整を行います。

Post Views: 2