faviconはサイトの顔なので作り込んだ方が良いのは判ってるのですが、昨今ではリクエストサイズが増えすぎて何が何だかもー訳がわかりません。
飽和すると投げ出しがちな性格なので、そもそも16×16の基本ファビコンすら描かずに以前やってたサイトのfaviconを流用して適当に済ませていました。
んが。
サーバログ見てたら「apple-touch-iconが無いよ」というエラーがいっぱい出てたので、これを機にマルチデバイス用アイコンを設定することにします。
まずは自サイトのアイコンをチェック
各サイズのアイコンを用意する前に、まず自サイトのアイコン設定状況を realfavicongenerator.net でチェックしてみます。
ページ下部の「Check your favicon」にURLを入れると、自サイトのアイコンが他人からどのように見えてるか確認することが出来ます。
favicon.ico がルートディレクトリにない場合は、近傍の「My favicon files are not in the root directory of my web site.」にチェックを入れると良いようです。
Favicon Generator for all platforms
おち研の場合は大きいアイコンを用意してなかったので、案の定モバイルでエラーが出ています。では早速マルチサイズアイコンを作りましょう。
大きな画像からアイコンを一括生成する
まず大きめの元絵を描いて各サイズに縮小します。
タブレット用アイコンはかなり大きなサイズとなりますが、最小サイズは16×16だと判っているので線が潰れないよう「ざっくり」した線で描くようにします。
基本のアイコンデザインには、いつもお世話になってるたぬきフォントを使いました。フォントの印象が変わらない程度にアウトラインを一回り拡張して角を出してます。
画像データの変換は「様々なファビコンを一括生成。favicon generator」さんを利用してます。まとめてリサイズしてくれるのめっちゃ便利。ありがとうございます。
様々なファビコンを一括生成。favicon generator
画像の複数リサイズについては、冒頭の realfavicongenerator.net さんでもほぼ同じことが可能です。ただ、私が使ったときはマルチ解像度favicon.icoのアーカイブに不具合が見られました。
カラーテーブルによっては相性があるかも知れないので、もし希望の画像が得られなかった場合は両方試すなどしてみて下さい。
ファビコン生成により得られる画像サイズ一覧
原画1枚から得られるアイコンデータは以下の通りです。
【HTML】
<link rel="shortcut icon" href="/favicon.ico" type="image/vnd.microsoft.icon">
<link rel="icon" href="/favicon.ico" type="image/vnd.microsoft.icon">
<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png">
<link rel="icon" type="image/png" href="/android-chrome-192x192.png" sizes="192x192">
<link rel="icon" type="image/png" href="/favicon-48x48.png" sizes="48x48">
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<link rel="manifest" href="/manifest.json">
<meta name="msapplication-TileColor" content="#2d88ef">
<meta name="msapplication-TileImage" content="/mstile-144x144.png">
うへぇ、こんなにあるのかよ！ヽ(´Д｀;≡;´Д｀)丿
…って感じですが、最悪の話2枚あれば何とかなるようです。
ファビコン画像の選択と設定用の記述
ファビコン一括生成 ＞ ファビコンダウンロード
より、ダウンロードしたフォルダから画像データを抜粋します。選ぶのはfavicon.icoと、apple-touch-icon-*.pngのうちの最低限どれか1枚です。
ちなみにここで出力されるfavicon.icoは 16×16、32×32、48×48ピクセルが同梱されたマルチパッケージとなっているので1枚で実質3サイズの画像となってます。（対応ツールで見ると3枚入ってることが確認出来ます）
apple-touch-iconは結局どれがベストなの…
apple-touch-iconについてはどのサイズを採用するか悩ましいところですが、iPad用アイコンが152×152なのでapple-touch-icon-152×152.pngを使うことにします。
Android用アイコンについてはChromeの開発者向け情報に「sizes=”192×192″ が推奨」と書かれてますが、各デバイスのデフォルトサイズがない場合は適当に縮小されるのが救いですね。
もしGoogle系のデバイスや古いiPhoneにも最適化したい場合は必要に応じてファイルを増やして下さい。
Add to Homescreen – Google Chrome
ファビコンの設定とアップロード手順
実際にアップロードの体裁を整えていきます。 apple-touch-icon-152×152.png を apple-touch-icon.png にリネームしましょう。全部入りでアップロードする予定なら、もちろんそのままでも構いません。
追ってヘッダにiconファイルの宣言をします。古いfavicon.icoの指定があれば併せて問題がないか確認して下さい。
【HTML】
<link rel="icon" href="/favicon.ico" type="image/vnd.microsoft.icon">
<link rel="shortcut icon" href="/favicon.ico" type="image/vnd.microsoft.icon">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon.png">
画像の配置場所はルートディレクトリに置くのが基本ですが、パスが通っていれば任意の場所に変更することが出来ます。
もし読み込まれてない場合、バックグラウンドで地味に404エラーが多発することになるので注意して下さい。（私がアイコン対応しようと思った動機もこれ。ほんと超迷惑だと思うんですよ。）
各デバイスごとにサイトアイコンを設置してみた
…ということで無事サイトアイコンを各デバイスごとに設定出来たようです。OSのバージョンによっては見えたり見えなかったりという事もあるようなので、不具合あったら教えて下さい。新生おち研faviconも変わらぬご愛顧よろしくお願いします。(´ω｀*)
それにしても、たぬきフォントの安定感ハンパないですね。ほんとこの書体大好きです。
フリーフォント『たぬき油性マジック』を公開しました。 | たぬきフォント
かつてMicrosoftが16×16のicoフォーマットを採用したときは「テメー勝手なことしてんじゃねぇよ」とか思いましたが、気がつけばAppleがやらかしてくれたので、いずれGoogleが独自拡張する未来が待ってるんだぜ。(；・`д・´)
コメントをどうぞ(´ω｀*)