ファビコンはどこまで行いますか?
解決済
回答 1
投稿
- 評価
- クリップ 0
- VIEW 1,888

退会済みユーザー
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の画像を上記サイトで作ればそれでいいんですかね?
-
気になる質問をクリップする
クリップした質問は、後からいつでもマイページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
クリップを取り消します
-
良い質問の評価を上げる
以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します
-
評価を下げられる数の上限に達しました
評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる
teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 過去に投稿した質問と同じ内容の質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
-
メールアドレスの認証
メールアドレスの認証
-
質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
checkベストアンサー
+2
このサイトで一括生成してしまいます。
https://ao-system.net/favicongenerator/
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
15分調べてもわからないことは、teratailで質問しよう!
- ただいまの回答率 88.36%
- 質問をまとめることで、思考を整理して素早く解決
- テンプレート機能で、簡単に質問をまとめられる
2016/12/17 21:46
これだけなんじゅうものアイコンを作るのですか?
ルートはアイコンだらけになりますが、現場ではそこまで作るのですか?
ただ
<link rel="manifest" href="/manifest.json">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="theme-color" content="#ffffff">
は必要ないのですかね。
2016/12/17 22:04 編集
なので、ルートに置くのはやめましょう。
/img/favicon などにでも片付けておいたほうが無難です。
こちらのサイトのジェネレータは、
最小公倍数みたいなものなので、
仰っているような行は省いても問題ないと思います。
もちろん、たくさんの種類を作ったほうが良い、というわけではありません。
現場の観点では、短時間でさっさと作ってしまえる、のが一番の利点です。
2016/12/17 22:19
<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画像を一つ作ればバーットつくってくれるんですかね?
2016/12/17 22:28
下記のように、きちんとパスを指定してやればどこに置いても問題ありません。
<link rel="shortcut icon" href="/img/favicon/favicon.ico" type="image/vnd.microsoft.icon">
先ほど紹介したサイトの場合は
> 最大サイズの画像は260×260pxですので、これ以上のサイズの画像を指定します。
と書いてありますね。
2016/12/17 22:34
2016/12/17 22:36
2016/12/17 22:37
<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">
上記では少なすぎなんですかね。
2016/12/18 11:06
私の添付先よりたくさん作ってくれるのはありがたいですが、どうも、縦横比の調整は行ってくれないようですね。
レイヤーでスライスを使っているので常に縦横比がそろわないのですが、その場合は自分でスライスするしかなさそうですね。
2016/12/18 11:23
面倒なのですべて入れておけばいいのですかね?
またIEはルートにないとfaviconが出てこないとよく聞くのですが、パスを通せばそんなことないでしょうか?
2016/12/18 11:30
2016/12/18 11:51
縦横比で困らなくて済むように、
あらかじめ正方形にした画像を用意して渡した方が良いですよ。
> 現場ではどれを残してどれを削除していますか?
> 面倒なのですべて入れておけばいいのですかね?
これは要件次第です。
下記のように端末によって使われるサイズが異なるので、
どの端末まで対応するか、という話になります。
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 形式がそもそも圧縮ファイルみたいなものですし、
画像の大きさ自体が小さいので、
圧縮したところでそれほどファイルサイズに違いが出ないような気がします。
2016/12/18 12:00 編集
【基本原則】
・複数サイズが有るものは一番大きいものを使う。
・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">
2016/12/18 14:45
さすがにこれまで小さい画像は圧縮しないようですね。
またとりあえずつくられたファイルは画像もxmlのファイルsvgもすべてアップロードして使えば、特に問題なさそうですね。
ただ、これでもiPad Pro … 167 x 167でfaviconが作られない可能性があることをクライアントさんに伝えないといけないですね。
どれに対応しているのかを調べないといけないですが、そんな情報有りますかね?
実機確認もそこまでできないので、ある程度もののに対応できますが、
あまりに数が多すぎるので、どこまでかは断言できませんとクライアントさんにいうしかないですかね。
じゃあどれだといわれたら困りますが...
2016/12/18 16:20 編集
とはいっても、192 x 192 のものが自動的に縮小されて表示されるだけだったりするので、実際そこまで問題になることもないように思います。
> どれに対応しているのかを調べないといけないですが、そんな情報有りますかね?
探せば色々出てくるのですが、この情報については鮮度が落ちるのが早く、
2015 年の情報であっても、もうすでに古い情報になってしまっています。
何より厳密な話をしようとすると
(OS の種類) x (ブラウザの種類) x (端末の種類) の数だけ情報が必要ですので、
すべての情報が掲載されているページ、なんてものは期待しないほうが良さそうです。
【比較的新しい記事】2016.3.6
http://webnaut.jp/design/1178.html
2016/12/18 17:04
クライアントさんが具体的にどの機種に対応してるんだといわれても、
確実にこれとは誰も言えませんよね。
また教えていただいたジェネレーターはpng画像はたくさんあるのですが、
icoボタンは42しかないようですが、クライアントワークでこちらでクレームになったり、
することは特にないのですね。
そうであればこちらを使うのが一般的で100%保証はできませんが、主要なものをだいたい網羅していますので、基本料金ではこちらの対応にされてもらいます。
と伝えればいいですかね。
それでもこの端末で確実にやれと言われたら、3000円くらいもらって、クラウドソーシングに外注してやってもらうとすればいいですかね。
2016/12/18 17:10
することは特にないのですね。
ジェネレータのサイトの説明文も一度ご覧ください。
「favicon.icoは 16x16, 32x32, 48x48 を含むマルチアイコンとなります」と書かれております。
favicon.ico に関しては
基本的にこの 3 サイズが有れば問題ありません。
> そうであればこちらを使うのが一般的で100%保証はできませんが、主要なものをだいたい網羅していますので、基本料金ではこちらの対応にされてもらいます。
そうですね、追加料金にするのが正解です。
変になんでも対応しますと言っちゃうと
大変な目に遭うこともありますから…。
なので、ご自分の中で、あるいは御社の中で、
対応ガイドラインとして、基本料金の範疇で対応すべき
端末、ブラウザを予め決めておけばいいと思います。
2016/12/20 20:38
そのたまではなかなか厳しいですね。
macとIPONE6は中古でも買うしかないかなとも思っていますが。
またiphonetachicomまで作ってもらえるのはありがたいのですが、
こちらは背景がないと黒くなったり、角が丸くなるので、こちらだけ背景ありにしたいことってありませんか?
その場合は仕方ないのでフォトショで背景ありなし2つの画像を作って二回例のサイトでfaviconを作りますか?
背景もしかして指定できましたっけ。指定ありとなしで二回作ればいいんですかね。
2016/12/20 20:38