Responsive Favicons
realfavicongenerator.netで生成したレスポンシブファビコンをDrupalサイトに追加し、iPhone、Android、iPad、タブレット、デスクトップなど複数のデバイスに対応します。
responsive_favicons
インストール
composer require 'drupal/responsive_favicons:^4.0'
概要
Responsive Faviconsモジュールはrealfavicongenerator.netと連携して、デバイス固有のファビコンをDrupalサイトに追加します。このモジュールはApple touchアイコン、Android Chromeアイコン、Windowsタイル、標準ファビコンを含む完全なファビコンエコシステムを処理します。
このモジュールは、各サイトのファビコンをドキュメントルートにアイコンファイルを散在させることなく個別に管理する必要があるDrupalマルチサイト環境で特に有用です。各サイトはそれぞれのパブリックファイルディレクトリにファビコンのバリエーションを保存できます。
このモジュールはHTML、JSON（manifest）、XML（browserconfig）ファイル内のファビコンパスを自動的に正しい場所に書き換えます。また、/favicon.icoや/apple-touch-icon.pngなどの一般的なファビコンパスに対する動的ルートを提供し、ドキュメントルートにファイルを配置することなく適切なファビコン配信を実現します。
Features
- realfavicongenerator.netからファビコンzipファイルを直接アップロードし、パブリックファイルディレクトリに自動展開
- HTMLタグ、JSONマニフェストファイル、XMLブラウザ設定ファイル内のファビコン参照の自動パス書き換え
- 一般的なファビコンパス（/favicon.ico、/apple-touch-icon.png、/site.webmanifestなど）の動的ルート処理
- アップロードされたファビコンとローカルファイルシステムパス（テーマディレクトリなど）の両方をサポート
- 競合を防ぐためのDrupalデフォルトファビコンのオプション削除
- ファビコン更新時のブラウザキャッシュ無効化のためのキャッシュリフレッシュサフィックスオプション
- 競合を防ぐためのfaviconモジュールとPWAモジュールとの互換性検出
- ファビコン設定の状態と不足ファイルを表示するステータスレポート統合
- サイトごとのファビコン管理を可能にするマルチサイト対応アーキテクチャ
Use Cases
マルチサイトファビコン管理
Drupalマルチサイト環境では、各サイトに独自のファビコンセットが必要です。共有ドキュメントルートにファビコンファイルを配置する代わりに、このモジュールを使用して各サイトのファビコンをそれぞれのパブリックファイルディレクトリ（例：sites/site1/files/favicons、sites/site2/files/favicons）に保存します。これによりドキュメントルートがクリーンに保たれ、サイトごとの独立したファビコン管理が可能になります。
テーマベースのファビコン
ファビコンがテーマの一部であるサイトでは、「Use internal path」オプションを使用して、テーマディレクトリ内に保存されたファビコン（例：/themes/custom/mytheme/favicons）を指定します。これによりファビコンアセットがテーマとともにバージョン管理され、デプロイが簡素化されます。
CDNホスティングのファビコン
hook_responsive_favicons_icon_path_alterフックを使用して、ファビコンパスをCDNを指すように変更します。これにより、地理的に分散したサーバーからアイコンを配信することで、グローバルなオーディエンスを持つサイトのファビコン読み込みパフォーマンスを向上させることができます。
ブラウザキャッシュ管理
ファビコンを更新する際、「Add a cache refresh suffix」オプションを有効にして、アイコンURLに自動的にクエリ文字列を追加します。これにより、ユーザーがブラウザキャッシュをクリアすることなく、ブラウザに古いキャッシュバージョンではなく新しいアイコンを取得させることができます。
Progressive Web Appのセットアップ
PWAモジュールでPWAをセットアップする際、競合を避けるためにResponsive faviconsタグからマニフェストリンクを削除します。Responsive faviconsにはアイコン関連のタグ（apple-touch-icon、faviconなど）のみを保持し、PWAモジュールにwebマニフェストを処理させます。
Tips
- ファビコン生成時は常にrealfavicongenerator.netの「root of my web site」オプションを使用してください - モジュールが自動的にパスの書き換えを処理します
- 設定後にステータスレポートを確認して、すべてのファビコンファイルが適切に検出されていることを確認してください
- 最良の結果を得るには、ファビコン生成時に高品質のSVGロゴから始めてください
- カスタムファビコンのみが表示されるように「Remove default favicon from Drupal」の有効化を検討してください
- 不足または設定ミスのファビコンファイルをチェックするために、ステータスレポートページを定期的に使用してください
- CDNを使用する場合は、hook_responsive_favicons_icon_path_alterを実装してパスを書き換えてください
- 開発環境では、「Show tags even if files are missing」オプションが設定の問題をデバッグするのに役立ちます
Technical Details
Admin Pages 1
/admin/config/user-interface/responsive_favicons
サイトのレスポンシブファビコンを設定します。realfavicongenerator.netからファビコンファイルをアップロードするか、ファビコンファイルを含むローカルパスを指定します。ファビコンジェネレーターが提供するHTMLコードを貼り付けて、サイトのHTMLヘッドに適切なlinkタグとmetaタグを追加します。
権限 1
Hooks 2
hook_responsive_favicons_tags_alter
他のモジュールが、読み込まれたファビコンタグがキャッシュされてHTMLヘッドにレンダリングされる前に変更することを許可します。
hook_responsive_favicons_icon_path_alter
他のモジュールが、正規化されたアイコンパスが使用される前に変更することを許可します。CDN統合やカスタムパス処理に便利です。
Troubleshooting 7
/admin/reports/statusのステータスレポートページでResponsive faviconエラーを確認してください。参照されているすべてのファイルが存在し、読み取り可能であることを確認してください。HTMLタグがrealfavicongenerator.netから正しく貼り付けられていることを確認してください。
Drupalの.htaccessファイルの「RewriteCond %{REQUEST_URI} !=/favicon.ico」行をコメントアウトしてください。この行はApacheがfavicon.icoリクエストに対してDrupalをバイパスするため、モジュールがそれらを処理できなくなります。
faviconモジュールをアンインストールしてください。responsive_faviconsモジュールはより包括的なファビコンサポートを提供し、2つのモジュールには競合を引き起こす可能性のある重複機能があります。
PWAモジュールを使用している場合、ファビコンタグフィールドからマニフェストリンク（<link rel="manifest"...>）を削除してください。PWAモジュールは独自のマニフェストファイルを管理します。
モジュール設定で「Add a cache refresh suffix」オプションを有効にしてください。Drupalキャッシュをクリアしてください。問題が解決しない場合、ユーザーはブラウザキャッシュをクリアする必要があるかもしれません。
モジュールはアップロード中にJSONおよびXMLファイルのパスを自動的に書き換えます。パスがまだ正しくない場合は、zipファイルを再アップロードしてください。モジュールは書き換えのために/android-chrome、/mstile、/web-app-manifestなどの特定のパターンを探します。
realfavicongenerator.netから貼り付けたHTMLタグからキャッシュ無効化クエリパラメータ（?v=123など）を削除してください。モジュールは「Add a cache refresh suffix」オプションを通じて独自のキャッシュリフレッシュメカニズムを提供します。
Security Notes 4
- モジュールはアップロードされたファイルを検証し、zipアーカイブのみが受け入れられることを確認します
- アップロードされたファイルはパブリックファイルシステム内の設定可能なディレクトリに展開されます
- 外部アイコンURLは、タグを表示する前にリモートリソースの読み取りを試みることで検証されます
- 管理設定ページは「administer responsive favicons」権限で保護されています