[Python]Pelicanで作ったサイトをiPhoneのホーム画面に追加した時のアイコンを設定する

またまたまた Python製 静的サイトジェネレータ Pelican の話。
iPhone でサイトを「ホーム画面に追加」した時に指定したアイコンが表示されるようにする。

ほとんど前回の favicon と同じ要領でいけそう。

（参考：過去の記事）

• Travis CIでPelicanのビルドを自動化する
• PelicanにMarkdown Extensionsを入れて自分好みにカスタマイズする
• Pelicanで作ったサイトにfaviconを設置する

設定方法

1．content ディレクトリの下に extra というディレクトリを作り、apple-touch-icon.png を置く。

content
├── (記事).md
└── extra
     └── apple-touch-icon.png

2．pelicanconf.py に以下のように記述する。

IPHONE_ICON = 'apple-touch-icon.png'

STATIC_PATHS = ['images', 'extra']
EXTRA_PATH_METADATA = {
    'extra/' + IPHONE_ICON: {'path': IPHONE_ICON},
}

3．テンプレートの html ファイルに以下を記述する。(base.html とか)

<link rel="apple-touch-icon" href="{{ SITEURL }}/{{ IPHONE_ICON }}">

4．pelican コマンドでビルドする

これで、output ディレクトリの直下に apple-touch-icon.png が生成されるはず。

リファレンス

画像ファイルの配置方法については Pelican の wiki から。
Tips n Tricks · getpelican/pelican Wiki · GitHub

iPhone で「ホーム画面に追加」した時のアイコンの設定方法については
iPhone/iPadのホーム画面用アイコンapple-touch-icon.pngをサイトに設定しよう | 初代編集長ブログ―安田英久 | Web担当者Forum

アイコン作成に使ったのはこのあたり。

• Iconion : Free Icon Maker (アプリ)
• アップルタッチアイコンが簡単に作れるiPhone Style Icon Generator – STYLE-EASY

Iconion は FontAwesome などの web フォントアイコンから iPhone 用のアイコンが作成できて便利。
ただ、周囲に余計な余白がつくのか作成されたアイコンは一回り小さかった（ので、手で周囲をカットする必要があった）。