はじめに
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
この中ので拡張子がpng、icoは実際に表示されるイメージファイルです。browserconfig.xmlはWindows10のスタート画面にWebページをピン留めしたときに表示される画像の設定情報です。このファイルは明示的に読み込まなくても、ルートディレクトリに置いておけば、勝手に読み込んでくれます。safari-pinned-tab.svgはベクターというフォーマットの画像ファイルです。safariで表示するfaviconはこの画像を使っているようです。site.webmanifestはAndroidでWebページをホーム画面に追加したときのアイコンや、タイトルを設定するファイルです。
今回はGAE上でGolangを動かしてみましたよの構成を元に、faviconを設定します。browserconfig.xmlとsite.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
その他
毎回なにかオススメを紹介してましたが、ネタが切れました。