GAEでfaviconを設定

Nov 6, 2018   #GAE 

はじめに

GoogleAppEngine(GAE)上で提供するWebページにfaviconを設定するさいに、少し迷ったのでメモに残しておきます。

faviconとは

faviconとは、ブラウザのタブやブックマークに表示されてるアレです。
最近は、スマートフォンでWebページのショートカットをホーム画面や、Windows10のスタートメニューで見かけることも増えてきました。

faviconについては、以下の資料に詳しくまとめられています。
WEBサイトが「できた」と安心する前に最終チェックすること

favicon準備

faviconの元にするイラストはこちらです。 このイラストをいい感じにfaviconとして使っていきます。

今回は、スライドで紹介されているFavicon Generatorを使ってfaviconを用意していきます。
faviconを生成すると、favicon_package_v0.16.zipがダウンロードできます。
favicon_package_v0.16.zipは以下のような中身になっています。

favicon_package_v0.16
├── android-chrome-192x192.png
├── android-chrome-384x384.png
├── apple-touch-icon.png
├── browserconfig.xml
├── favicon-16x16.png
├── favicon-32x32.png
├── favicon.ico
├── mstile-150x150.png
├── safari-pinned-tab.svg
└── site.webmanifest

この中ので拡張子がpngicoは実際に表示されるイメージファイルです。
browserconfig.xmlはWindows10のスタート画面にWebページをピン留めしたときに表示される画像の設定情報です。このファイルは明示的に読み込まなくても、ルートディレクトリに置いておけば、勝手に読み込んでくれます。
safari-pinned-tab.svgはベクターというフォーマットの画像ファイルです。safariで表示するfaviconはこの画像を使っているようです。
site.webmanifestはAndroidでWebページをホーム画面に追加したときのアイコンや、タイトルを設定するファイルです。

今回はGAE上でGolangを動かしてみましたよの構成を元に、faviconを設定します。
browserconfig.xmlsite.webmanifestはルートディレクトリに配置し、その他の画像ファイルはルートディレクトリ直下のimagesに配置します。
プロジェクトのディレクトリ構成は以下の通りです。

.
├── app.yaml
├── gae_sample.iml
├── hello.go
├── index.yaml
└── static
    ├── browserconfig.xml
    ├── site.webmanifest
    ├── images
    │   ├── android-chrome-192x192.png
    │   ├── android-chrome-384x384.png
    │   ├── apple-touch-icon.png
    │   ├── favicon-16x16.png
    │   ├── favicon-32x32.png
    │   ├── favicon.ico
    │   ├── mstile-150x150.png
    │   └── safari-pinned-tab.svg
    ├── index.html
    └── js
        └── main.js

GAEで使う

GoogleAppEngineでfaviconを使用するには、HTMLファイルの<head>で読み込む以外に、Why do I get URI error for /favicon.ico?にも書かれているとおり、app.yamlにも記載する必要があります。

愚直に書く場合、handlers:の配下に以下の記載します。

- url: /site.webmanifest
  static_files: static/site.webmanifest
  upload: static/site.webmanifest

- url: /browserconfig.xml
  static_files: static/browserconfig.xml
  upload: static/browserconfig.xml

- url: /images/favicon.ico
  static_files: static/images/favicon.ico
  upload: static/favicon.ico

- url: /images/favicon-32x32.png
  static_files: static/images/favicon-32x32.png
  upload: static/images/favicon-32x32.png

- url: /images/favicon-16x16.png
  static_files: static/images/favicon-16x16.png
  upload: static/images/favicon-16x16.png

- url: /images/android-chrome-192x192.png
  static_files: static/images/android-chrome-192x192.png
  upload: static/images/android-chrome-192x192.png

- url: /images/android-chrome-384x384.png
  static_files: static/images/android-chrome-384x384.png
  upload: static/images/android-chrome-384x384.png

- url: /images/mstile-150x150.png
  static_files: static/images/mstile-150x150.png
  upload: static/images/mstile-150x150.png

- url: /images/apple-touch-icon.png
  static_files: static/images/apple-touch-icon.png
  upload: static/images/apple-touch-icon.png

- url: /images/safari-pinned-tab.svg
  static_files: static/images/safari-pinned-tab.svg
  upload: static/images/safari-pinned-tab.svg

ファイル毎に書いていくのは面倒なので、以下のような感じで正規表現でまとめて記載することもできます。

- url: /site.webmanifest
  static_files: static/site.webmanifest
  upload: static/site.webmanifest

- url: /browserconfig.xml
  static_files: static/browserconfig.xml
  upload: static/browserconfig.xml

- url: /images/(.*\.(svg|ico|png))
  static_files: static/images/\1
  upload: static/(.*\.(svg|ico|png))

これで、GAEのページにfaviconを設定することが出来ました。
Favicon Generatorでは、各プラットフォームからfaviconにアクセス出来ているかを一括でチェックできるのでとても便利です。
今回は、favicon.icoがルートディレクトリにない、と怒られていますが各プラットフォームからfaviconが見れているいることが確認できました。

今回のサンプルファイルはgithubで公開してます。
https://github.com/foresukecom/gae_favicon

その他

毎回なにかオススメを紹介してましたが、ネタが切れました。