ちょこっとお気に入りやタブブラウザーに表示してくれるFavicon。
うちでは足跡マークを使用していますが、たまに「apple-touch-icon」が404エラーで見つからないというアクセスログがあることをに気づきました。
何かと思うと、iPhoneとかiPadでホーム画面にショートカットを作成する際に要求されるらしいです。
誰かが、こんなページをブックマークしているとは思えませんが404エラーが出ることはなんとなくよろしくないので対応することにしてみました。
ちなみに、WebClip Bookmark Iconというらしいです。
さてさて、何を作らなければいけないのかと調べてみるとどうやらいっぱい作らなければ行けない模様（汗
iPhone以外にもAndroid用とかGoogleTV用Opera用とさまざま！
しかも、XMLも作らないといけないんだって！？
ざっと書くと↓のような感じになるそうです。
- favicon.ico
- favicon-16×16.png
- favicon-32×32.png
- favicon-96×96.png
- android-chrome-36×36.png
- android-chrome-48×48.png
- android-chrome-72×72.png
- android-chrome-96×96.png
- mstile-70×70.png
- mstile-144×144.png
- mstile-150×150.png
- mstile-310×310.png
- mstile-310×150.png
- apple-touch-icon-57×57.png
- apple-touch-icon-60×60.png
- apple-touch-icon-72×72.png
- apple-touch-icon-76×76.png
- apple-touch-icon-114×114.png
- apple-touch-icon-120×120.png
- apple-touch-icon-144×144.png
- apple-touch-icon-152×152.png
- apple-touch-icon-180×180.png
- apple-touch-icon.png
- apple-touch-icon-precomposed.png
（以上、後述するサイトから引用）
なんとめんどくさいことかー。
いろいろな端末の登場。いろいろなブラウザーの登場。今日のマルチメディア対応はなかなか大変なようです。
むかしはファビコンだけ用意すればよかったのになー。
そこで便利なのがRealFaviconGeneratorというサイト。
画像を用意するだけでさまざまな対応画像を作成してくれる便利なサイト。
しかも、端末ごとの背景色設定からヘッダー用のソースコードや設置状況のチェックもしてくれます！！
これは便利便利。
早速作ってみて、アップロードとヘッダー情報を反映。
これはらくだ！
ココからはあとがき的なメモ書き的なあとがき的なもの。
実機でのチェックのため自分のAndroid端末に入ってるOpera（Ver27）にて動作チェック。
スピードダイヤルに自分のブログのアドレスを入れるも画像が表示されない･･･
あれ？と思っていろいろ試行錯誤するもどうもだめなようだ。
なんとなく、Webサーバのファイアーウォールログを見てみるとなんかブロックされてる～！？
（ちなみに、このサイト。ほぼ他人に見せる気はなかったので日本以外のIPアドレスはファイアーウォールではじいています･･･）
理由とか仕組みはわかりませんが、Android用のOperaでスピードダイヤルに追加した際の画像取得は直接端末とWebサーバー間でやるのではなく、Opera社があるノルウェーを経由して取得しているようです。
Opera社のIPアドレスレンジを許可リストに突っ込んだらAndoroid用のOperaスピードダイヤル側でもアイコン画像が正常に表示がされました。
めでたしめでたし？でも、何でだろうね･･･通信データ圧縮するオフロードモードを使ってるわけでもないし･･･
日々くだらないことを追い求め、黒歴史をまとめておくための自由なブログ。
あんまり役立つことは書きませんが主に日記・ゲームや買ったものについての記事を気まぐれで好き勝手書いています。