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 and Hesselberth 2020)pkgdown::build_favicon() 関数で R パッケージロゴからファビコンセットを作り出すのに使用されています.

参考文献

Wickham, Hadley, and Jay Hesselberth. 2020. Pkgdown: Make Static HTML Documentation for a Package. https://CRAN.R-project.org/package=pkgdown.