カスタムDrupal 10または11サイトをローンチした経験があるなら、あのシナリオをご存知でしょう。Twigテンプレートを完璧に仕上げ、複雑なViewsを設定し、タクソノミー構造を構築するのに何週間も費やします。そして、作業の成果を見るためにSafariを開くと、タブバーからあの頑固な「青いDrupalの水滴」がこちらを見つめ返してくるのです。

このデフォルトのコアイコンを取り除くには、単に公開ディレクトリに画像をドロップするだけでは不十分です。Drupalの強力なキャッシュとテーマの継承システムにより、この一見簡単なタスクが驚くほどイライラするものになります。このdrupal favicon setup guideでは、2026年のあらゆるデバイスでブランドが鮮明に表示されるよう、コアイコンを永久に置き換える正確な手順を解説します。

大規模なエンタープライズチーム（Red Hatや主要大学など）がDrupalプラットフォームをどのように扱っているか見てみましょう。彼らは重要なブランド資産を管理画面のUIに依存することは滅多にありません。代わりに、最新のSVGをテーマレイヤーに直接ハードコードしています。私たちも全く同じプロフェッショナルなアプローチを取ります。

デフォルトのUIメソッドが失敗する理由

DrupalにはFaviconを変更する組み込みの方法が用意されています。Appearance > Settings > Your Themeに移動すると、デフォルトのショートカットアイコンのチェックを外し、カスタムアイコンをアップロードするトグルがあります。

本番サイトでこの方法を使用することは強くお勧めしません。

なぜでしょうか？第一に、これは管理されたファイルシステムに依存しているため、アイコンのURLは/sites/default/files/favicon.icoのようになります。データベースを移行したり、filesディレクトリを失ったりすると、アイコンが壊れます。第二に、このUIは単一のレガシーICOファイルしか受け付けず、SVGやApple Touch Iconといった2026年のモダンスペックを完全に無視しています。

プロフェッショナルなDrupal Favicon設定ガイド

これを正しく行うには、UIをバイパスしてアイコンをテーマに直接注入する必要があります。コードに触れる前に、Mzu favicondlを使用してモダンなアイコンセットを生成してください。鮮明なSVGとフォールバック用のICOが必要です。

ステップ1：テーマ内にファイルを配置する

公開filesディレクトリの代わりに、カスタムテーマ内にアイコンを保存します。整理とバージョン管理のために専用のフォルダを作成します。

ステップ2：html.html.twigをオーバーライドする

Drupalコアはhtml.html.twigテンプレートを介して<head>の出力を制御します。テーマにまだこのファイルがない場合は、コアのシステムモジュール（/core/modules/system/templates/html.html.twig）からテーマの/templates/layout/ディレクトリにコピーします。

ファイルを開きます。<head-placeholder token=...>タグが見つかるはずです。そのすぐ下に、Twigのアクティブテーマパス変数を使用して、モダンなSVG Faviconリンクをハードコードします。

<link rel='icon' href='{{ active_theme_path() }}/icons/favicon.svg' type='image/svg+xml'>
<link rel='alternate icon' href='{{ active_theme_path() }}/icons/favicon.ico'>
<link rel='apple-touch-icon' href='{{ active_theme_path() }}/icons/apple-touch-icon.png'>

これにより、アイコンがコードベースと一緒にバージョン管理され、データベースの状態に依存しなくなります。

ステップ3：コアのアタッチメントを削除する

Twigタグをハードコードしても、Drupalがページアタッチメントを介してデフォルトのアイコンタグを注入し、DOMに重複するタグが発生する可能性があります。これを取り除くには、your_theme.themeファイルでプリプロセスフックを使用します。

/**
 * Implements hook_page_attachments_alter().
 */
function your_theme_page_attachments_alter(array &$attachments) {
  foreach ($attachments['#attached']['html_head_link'] as $key => $value) {
    if (isset($value[0]['rel']) && $value[0]['rel'] === 'icon') {
      unset($attachments['#attached']['html_head_link'][$key]);
    }
  }
}

このスニペットはページ構築プロセスを傍受し、Drupalがネイティブに注入しようとするアイコンリンクを強制的に取り除き、クリーンなTwig実装のみを残します。

Drupalキャッシュのクリア

コードをどれだけ変更しても、キャッシュをクリアするまでDrupalはそれを表示しません。レンダリングキャッシュは非常に頑固です。

  1. ターミナルを開き、プロジェクトのルートに移動します。
  2. drush cr（Cache Rebuild）を実行します。
  3. VarnishなどのリバースプロキシやCloudflareなどのCDNを使用している場合は、それらのキャッシュもパージしてください。

それでも古い青い水滴が表示される場合は、ブラウザがそれを保持している可能性が高いです。ローカルブラウザの頑固なキャッシュを解決するには、Faviconキャッシュの強制クリアガイドをお読みください。

Drupal 10/11でのよくある落とし穴

設定がまだ失敗する場合は、以下の一般的な原因を確認してください：

DrupalのUIと格闘するのはやめましょう。アイコンのロジックをテーマのコードベースに移動することで、すべてのブラウザタブで安定し、バージョン管理されたプロフェッショナルなブランドプレゼンスを確保できます。