もともと実験的に立ち上げたサービスだし、ファビコンでデコる必要もないかと思い、favicon.icoは設置していませんでした。
ただ、どうやら大抵のWebブラウザは、一度のアクセスでfavicon.icoを読めなかったら、もう一度トライする仕様になっているようです。
ログの中で、1回アクセスがあるたびにfavicon.icoの読み込みを2回ずつトライして2回とも404エラーになっているのです。
気にしなければいいのしょうけど、なんか気持ち悪いですよね。
そこで、ファビコンを設置すべく、いろいろ調べましたので備忘録も兼ねて少しまとめておきます。
[ファビコン]
- 基本は".ico"形式で作成し、"favicon.ico"というファイル名でルートに置く
はじめにIE5の機能拡張としてマイクロソフトが独自に設定したため、Windows用のアイコンフォーマットとして既に使われていた".ico"形式が採用された。 - 別の画像ファイル形式を使うことも可能。ファイル名等も変更可能
現在はIE以外にも多くのWebブラウザで採用されており、GIFやPNGなど、".ico"でない画像ファイル形式も使える。HTML内部に、<link>タグを使って、ファイル名、ファイルの格納場所などを指定できる。
もともとは、「お気に入り」にブックマークしたとき、たくさんあるブックマークの中から、目的のサイトを見つけやすくするための、IE5の独自機能だったのですね。
どうやら、マイクロソフトが独自に考えたものなので、HTMLを勝手に拡張するわけにいかず、格納場所とファイル名が固定されていたという経緯があった模様。
IE5というと、1999年に公開されているので、もはや前世紀の話ですが、iPhoneの登場により「アイコンでブックマークを目立たせる」という機能に新風が吹きます。
iPhoneの大ブームにより、一気にスマホが普及しますが、iPhoneはWebのブックマークをホーム画面に貼り付けることができます。このとき使われる「ウェブクリップアイコン」は、サーバーのルートに置かれた"apple-touch-icon.png"という名前のPNG形式の画像ファイルから取得しているんです。
一気に普及すると同じ事がやりたくなるんでしょうか？ 数を持っていると強気になるのかもしれません。20世紀のマイクロソフトと同じことを21世紀のアップルもやっているんですね。
「売れている者の勝ち」というと、資本主義的で差別的な感じですが、「沢山のお客様に支持されている者の勝ち」というと民主主義的です。
そういう気持ちはわからなくもないですね。
こちらも今は、HTMLの<link>タグから名前や置き場所を変えられるようになっているようで、Andoroidはこのタグを見に行っているようです。
[ウェブクリップアイコン]
- 基本は、PNG形式で作成し"apple-touch-icon.png"というファイル名でルートに置く
最初にアップルがiPhone用にそう決めた。 - ファイル名等変更可能
現在はHTMLの中に<link>タグを使ってパスを指定可能。
● 作業
ということで、まずはアイコンを作ります。
ICO形式のファイルを作るには、複数のPNGファイルから、ICOファイルを作ってくれるサイトがあります。今回はここを使わせていただきました。
16x16、32x32、64x64、180x180のアイコンをPNG形式で作りました。
これを先ほどのサイトでまとめて、"favicon.ico"というファイルに変換します。
そして、180x180は"apple-touch-icon.png"というファイル名にします。
これら2つのファイルをルートに置きます。
Webブラウザから見えるように、"app.yaml"の"handlers:"のところに、下記のように追記します。
- url: /favicon\.ico
static_files: favicon.ico
upload: favicon.ico
- url: /apple-touch-icon\.png
static_files: apple-touch-icon.png
upload: apple-touch-icon.png
そして、HTMLに<link>タグを追記します。
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
とりあえずこれでPC用のブラウザとiPhoneとAndroidのホーム画面にアイコンが表示できるようになりました。
[参考]
0 件のコメント:
コメントを投稿