7.11 ブラウザアイコンをカスタマイズする
7.10節では html_document フォーマットの includes オプションを使って, 追加のコードを HTML のヘッダ, 本文, フッタに挿入できることを実演しました. このテクニックはファビコンというカスタムブラウザアイコンを HTML 出力に追加することにも使えます.
ファビコンはブラウザのアドレスバー, タブタイトル, ブックマークに表示されるウェブサイトのロゴです. 例えば Google Chrome で CRAN のウェブサイト (https://cran.r-project.org) を開いてブラウザのタブを見ると, 小さな R ロゴがあります. 携帯端末ならばファビコンはウェブサイトをホームスクリーンに固定表示した際にアプリアイコンの代わりに使われます.
HTML 文書にファビコンを追加するには, 以下のコードをカスタムヘッダファイル (7.10節で言及したように, header.html といった名前のファイル) を追加します.
<link rel="shortcut icon" href="{ファビコン画像ファイルへのパス}" />YAML メタデータを使って, このファイルを文書の <head> 領域に挿入できることを思い出してください.
output:
html_document:
includes:
in_header: header.html<link> の href 属性に与えるパスは, 他のアセット (例えば画像やデータ・セット) を参照するときと同じように, 相対パス構造を前提とすべきです. 使用する画像は, 最も小さい正方形の PNG ファイルがよく機能します. 典型的なウェブブラウザは画像を 16 x 16 ピクセルの領域に表示するため, シンプルなデザインがより良いということに留意してください.
あなたの文書を表示する各種のブラウザやプラットフォームが, 特定のレイアウトに対して最適な解像度のバージョンのアイコンを用いるようにしたいのであれば, https://realfavicongenerator.net といったサービスを使って, ファビコンセットとやや複雑な HTML ヘッダのコードを生成するとよいでしょう. このサービスは現在 pkgdown パッケージ (Wickham, Hesselberth, and Salmon 2022) の pkgdown::build_favicon() 関数で R パッケージロゴからファビコンセットを作り出すのに使用されています.