Q&A
ファイル名をfavicon.icoにすれば解決とかではないですよね
あえてその名前でなければいけない理由があるのでしょうか？
faviconについてですが
Chromeとedgeだと何しても表示されず
firefoxとIEは表示されている状況です。
で書いています
imgフォルダ内にicoファイルを入れて使ってます
直下でも試したのですが、全く状況が変わりません。
<link rel="shortcut icon" href="./okodukai.ico" /> <link rel="apple-touch-icon" href="./okodukai.ico" /> <link rel="shortcut icon" href="okodukai.ico" /> <link rel="apple-touch-icon" href="okodukai.ico" />
Chromeのキャッシュ全消し faviconのApp情報を消して再起動などやりましたが
どーしてもできません。
他の理由として何があるのか
調べても、これ以上出てこないので
詳しい方に教えて頂きたいです。
すいません、前のVerで貼ってしまったので
現在はこうです。
<link rel="shortcut icon" href="./img/favicon.ico" />
<link rel="apple-touch-icon" href="./img/favicon.ico" />
でfaviconオンライン作成で作ったファイルを置いたのですが
最初は、アンサーしてくれたとおり
自分の任意のファイル名にが駄目だと思い
通常のfavicon.icoになおしても駄目でした。
favicon.icoにするのでしたらWebルートに置くだけで良いと思います。
いわゆる「画像」とは役割が違うのでimgフォルダに置くのは微妙かなとも思います。
<link rel="shortcut icon" href="./favicon.ico" />
<link rel="apple-touch-icon" href="./favicon.ico" />
webルートに置いても駄目です
あと、なぜにブラウザーにより○と☓になるのでしょうか？？
Webルートに置くとリンクする必要がないかなと。
あとはWebブラウザの仕様にのっとって読みに行ってくれるはずなので（すぐすぐ反映はされないかなと）
回答3件
0
ベストアンサー
favicon.icoの形式はどのようなファイルを置いていますでしょうか。
正しいアイコンファイル以外を置いた場合、ブラウザの種類によっては認識できないことがあります。
逆に、apple-touch-iconはPNG形式で作るのが適切、とのことです。
投稿2019/07/30 02:51
総合スコア145201
幅 32px 高さ 32px です
ICO ファイル (.ico)
プロパティ情報をコピペしました。
正しい情報ですか。
サイズがあってないとかですか？
IE,Edge,firefoxでは認識しました
あとの後発ブラザウザーは全部駄目です。
apple-touch-iconはPNG形式が適切なのですか
勉強になります。
これかなぁ。
https://webnaut.jp/design/1178.html
16*16で作ったほうが間違いなさそうです。
16＊１６で作成してやってみましたが
やはり駄目ですね・・
他に作ったものは
問題なかったんですが
どうすればわかりません
サーバが.icoに対して適切なContent-Typeを返せていない、という可能性もあるかもしれません。
.htaccessを作成しないといけないでしょうか？
AddType image/x-icon .ico
５００エラーが出てて記述が違うと言われました。
maisumakun様のご指摘で、調べていたら
自分のサイトで正常にfaviconが表示される場合は
Chromeのデベロッパーを見ると
image/x-iconでotherにファイルタイプとして返ってきてますが
だめな場合はotherに何も表示されない、もしくわ
favicon 404エラーで
txet/htmlファイルタイプで返ってきます
このご指摘が怪しいと思います。
ただ直し方がわかりませんが
なんとか、自己解決しました。
いろいろな方のご指南と、繰り返し できてる部分とできていないを
見比べ
デバックを見て 気づきました
headタグに書いてあるはずが bodyタグにある！！
テキストエディターを見ても ちゃんと書いてある
一度全て削除してから
新しいファイルを作成し headタグの一番上にコードを書いたら
全てのfaviconが出るようになりました。
ありがとうございました。
0
私のサイトではpngでやって、各ブラウザでfaviconは正しく表示されてますね。
https://www.w3schools.com/tags/att_link_sizes.asp
html
1 <link rel="icon" href="/images/favicon/icon-16x16.png" sizes="16x16"> 2 <link rel="icon" href="/images/favicon/icon-24x24.png" sizes="24x24"> 3 <link rel="icon" href="/images/favicon/icon-32x32.png" sizes="32x32"> 4 <link rel="icon" href="/images/favicon/icon-36x36.png" sizes="36x36"> 5 <link rel="icon" href="/images/favicon/icon-48x48.png" sizes="48x48"> 6 <link rel="icon" href="/images/favicon/icon-72x72.png" sizes="72x72"> 7 <link rel="icon" href="/images/favicon/icon-96x96.png" sizes="96x96">
もしかしたらrel="icon"にしたら良いかもしれません。あと、最後のスラッシュはいらないです。
html
1<link rel="shortcut icon" href="./img/okodukai.ico" > 2<link rel="icon" href="./img/okodukai.ico" > 3<link rel="apple-touch-icon" href="./img/okodukai.ico" >
追記-chrome
chromeの場合、localで実行している場合はfaviconが表示されないみたいです。
https://stackoverflow.com/questions/16375592/favicon-not-showing-up-in-google-chrome
- Another thing could be the problem that chrome can't display favicons, if it's local (not uploaded to a webserver). Only if the file/icon would be in the downloads directory chrome is allowed to load this data - more information about this can be found here: local (file://) website favicon works in Firefox, not in Chrome or Safari- why?
投稿2019/07/30 05:17
編集2019/07/30 08:53
総合スコア38
各ブラウザーに対応するためにサイズ違いで作成されているんですね
一括で作成してくれるサイトがあり同じように配置しましたが駄目でした
Kuroe様のご指摘どおり re="icon"も試しましたが。。
これChrome自体再インストールですかね。。
chromeの場合、localで実行している場合はfaviconが表示されないみたいです。
URLやソースは回答に追記しました。実行環境はlocalですか？？
いえ テスト環境のため
無料レンタルサーバー エックスフリーです。
ローカルではないですね
あなたの回答
tips
プレビュー
