ファビコンはどこまで行いますか？

Question

http://realfavicongenerator.net/favicon_result?file_id=p1b46a7431m1emo211dapssmkg6#.WFUn9WpBrIU
でファビコンなどを作ったのですが、下記すべて設定していますか？
たくさんありすぎてきりがなくどこまで対応していますか？
下記できたものをただそのまま、すべてルートディレクトリに入れておけば良いのでしょうか？

<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="manifest" href="/manifest.json">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="theme-color" content="#ffffff">

152pxの画像を上記サイトで作ればそれでいいんですかね？

Answer 1

このサイトで一括生成してしまいます。
https://ao-system.net/favicongenerator/

Comments

[退会済みユーザー]

ありがとうございます。とんでもない量ですね。180pxのpng画像をひとつ用意して、
これだけなんじゅうものアイコンを作るのですか？
ルートはアイコンだらけになりますが、現場ではそこまで作るのですか？

ただ
<link rel="manifest" href="/manifest.json">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="theme-color" content="#ffffff">

は必要ないのですかね。

[MEBITUS]

私もとんでもない量だと思います。
なので、ルートに置くのはやめましょう。
/img/favicon　などにでも片付けておいたほうが無難です。

こちらのサイトのジェネレータは、
最小公倍数みたいなものなので、
仰っているような行は省いても問題ないと思います。

もちろん、たくさんの種類を作ったほうが良い、というわけではありません。
現場の観点では、短時間でさっさと作ってしまえる、のが一番の利点です。

[退会済みユーザー]

ルートに置かないとfaviconって認識されないのではないのですね。

<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-160x160.png" sizes="96x96">
<link rel="icon" type="image/png" href="/favicon-196x196.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">
すべてのファイルを作るんですか？

180pxのpng画像を一つ作ればバーットつくってくれるんですかね？

[MEBITUS]

何も書いていなければ、ルートの favicon.ico を探しに行くだけで、
下記のように、きちんとパスを指定してやればどこに置いても問題ありません。

<link rel="shortcut icon" href="/img/favicon/favicon.ico" type="image/vnd.microsoft.icon">

先ほど紹介したサイトの場合は
> 最大サイズの画像は260×260pxですので、これ以上のサイズの画像を指定します。
と書いてありますね。

[退会済みユーザー]

260×260pxの画像をひとつ用意して、さっきのサイトですべての画像を自動に作ってくれるということですね。

[MEBITUS]

あとは不要な行と不要な画像を消してしまえばいいだけなので簡単ですね。

[退会済みユーザー]

<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="manifest" href="/manifest.json">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="theme-color" content="#ffffff">

上記では少なすぎなんですかね。

[退会済みユーザー]

教えていただいたじぇねれーたーを使ってみました。
私の添付先よりたくさん作ってくれるのはありがたいですが、どうも、縦横比の調整は行ってくれないようですね。
レイヤーでスライスを使っているので常に縦横比がそろわないのですが、その場合は自分でスライスするしかなさそうですね。

[退会済みユーザー]

現場ではどれを残してどれを削除していますか？
面倒なのですべて入れておけばいいのですかね？

またIEはルートにないとfaviconが出てこないとよく聞くのですが、パスを通せばそんなことないでしょうか？

[退会済みユーザー]

色々すいませんが、この画像まで、圧縮しますか？

[MEBITUS]

> レイヤーでスライスを使っているので常に縦横比がそろわないのですが、その場合は自分でスライスするしかなさそうですね。

縦横比で困らなくて済むように、
あらかじめ正方形にした画像を用意して渡した方が良いですよ。

> 現場ではどれを残してどれを削除していますか？
> 面倒なのですべて入れておけばいいのですかね？

これは要件次第です。
下記のように端末によって使われるサイズが異なるので、
どの端末まで対応するか、という話になります。
iPhone 7 Plus / 6 Plus … 180 x 180
iPhone 7 / 6 / 5 / 4s … 120 x 120
iPad Pro … 167 x 167
iPad / iPad mini … 152 x 152
iPad 2 / iPad mini (old) … 76 x 76

この対応範囲についてのコンセンサスが無かったり
特に具体的に決まっていない場合などは、
ジェネレータで生成される分をまとめて残しておいても、
対応範囲が広くなる分には問題ないと思います。

ただ、気をつけなければならないのは、
だからといって新しい端末にも
きちんと対応できている保証はないということです。

例えば上記に書かれている「iPad Pro … 167 x 167」が
ジェネレータには含まれておりません。

面倒なので入れておけばいい、のはいいですが、
だからといって全端末に対応できていると過信しないことです。

> IEはルートにないとfaviconが出てこないとよく聞くのですが、パスを通せばそんなことないでしょうか？

link 要素を書かなかった場合は、どのブラウザであっても、
デフォルトでルートの favicon.ico を探しに行きますが、
<link> タグで指定していればどこに置いてあっても問題ありません。

IE できちんと表示されない原因としては、
単に ico ファイルになっていない場合なども多いです。
ちなみに IE 以外のブラウザでは、
ショートカットアイコンは png ファイルなどでも問題なく表示されますが、
IE では ico ファイルしか許されないという制約があります。

> 色々すいませんが、この画像まで、圧縮しますか？

PNG 形式がそもそも圧縮ファイルみたいなものですし、
画像の大きさ自体が小さいので、
圧縮したところでそれほどファイルサイズに違いが出ないような気がします。

[MEBITUS]

どうしても最小限にしたい、ということでしたら、これだけでいいと思います。

【基本原則】
・複数サイズが有るものは一番大きいものを使う。
・Windows Mobile は対象外とする。

<!-- Windows -->
<link rel="shortcut icon" href="/img/favicon/favicon.ico" type="image/vnd.microsoft.icon">
<!-- iOS Safari -->
<link rel="apple-touch-icon" sizes="180x180" href="/img/favicon/apple-touch-icon-180x180.png">
<!-- Android Chrome -->
<link rel="icon" type="image/png" href="/img/favicon/android-chrome-192x192.png" sizes="192x192">

[退会済みユーザー]

ありがとうございました。
さすがにこれまで小さい画像は圧縮しないようですね。

またとりあえずつくられたファイルは画像もxmlのファイルsvgもすべてアップロードして使えば、特に問題なさそうですね。

ただ、これでもiPad Pro … 167 x 167でfaviconが作られない可能性があることをクライアントさんに伝えないといけないですね。

どれに対応しているのかを調べないといけないですが、そんな情報有りますかね？
実機確認もそこまでできないので、ある程度もののに対応できますが、
あまりに数が多すぎるので、どこまでかは断言できませんとクライアントさんにいうしかないですかね。
じゃあどれだといわれたら困りますが...

[MEBITUS]

> ただ、これでもiPad Pro … 167 x 167でfaviconが作られない可能性があることをクライアントさんに伝えないといけないですね。

とはいっても、192 x 192 のものが自動的に縮小されて表示されるだけだったりするので、実際そこまで問題になることもないように思います。

> どれに対応しているのかを調べないといけないですが、そんな情報有りますかね？

探せば色々出てくるのですが、この情報については鮮度が落ちるのが早く、
2015 年の情報であっても、もうすでに古い情報になってしまっています。

何より厳密な話をしようとすると
(OS の種類) x (ブラウザの種類) x (端末の種類) の数だけ情報が必要ですので、
すべての情報が掲載されているページ、なんてものは期待しないほうが良さそうです。

【比較的新しい記事】2016.3.6
http://webnaut.jp/design/1178.html

[退会済みユーザー]

添付頂いたサイトくらいの情報しかないですよね。
クライアントさんが具体的にどの機種に対応してるんだといわれても、
確実にこれとは誰も言えませんよね。

また教えていただいたジェネレーターはpng画像はたくさんあるのですが、
icoボタンは42しかないようですが、クライアントワークでこちらでクレームになったり、
することは特にないのですね。

そうであればこちらを使うのが一般的で100%保証はできませんが、主要なものをだいたい網羅していますので、基本料金ではこちらの対応にされてもらいます。
と伝えればいいですかね。
それでもこの端末で確実にやれと言われたら、3000円くらいもらって、クラウドソーシングに外注してやってもらうとすればいいですかね。

[MEBITUS]

> icoボタンは42しかないようですが、クライアントワークでこちらでクレームになったり、
することは特にないのですね。

ジェネレータのサイトの説明文も一度ご覧ください。
「favicon.icoは 16x16, 32x32, 48x48 を含むマルチアイコンとなります」と書かれております。

favicon.ico に関しては
基本的にこの 3 サイズが有れば問題ありません。

> そうであればこちらを使うのが一般的で100%保証はできませんが、主要なものをだいたい網羅していますので、基本料金ではこちらの対応にされてもらいます。

そうですね、追加料金にするのが正解です。
変になんでも対応しますと言っちゃうと
大変な目に遭うこともありますから…。

なので、ご自分の中で、あるいは御社の中で、
対応ガイドラインとして、基本料金の範疇で対応すべき
端末、ブラウザを予め決めておけばいいと思います。

[退会済みユーザー]

そうですね。フリーランスだと自分が持っているネクサス５とwindow10は対応しますが、
そのたまではなかなか厳しいですね。

macとIPONE6は中古でも買うしかないかなとも思っていますが。

またiphonetachicomまで作ってもらえるのはありがたいのですが、
こちらは背景がないと黒くなったり、角が丸くなるので、こちらだけ背景ありにしたいことってありませんか？
その場合は仕方ないのでフォトショで背景ありなし2つの画像を作って二回例のサイトでfaviconを作りますか？
背景もしかして指定できましたっけ。指定ありとなしで二回作ればいいんですかね。

[退会済みユーザー]

角丸は角に画像が入らないようにするしかないですね。