Q&A
## やりたいこと
favicon.icoを表示したいです。
ですが、teratail含む全てのサイトにて、ファビコンが非表示です..
##試したこと
ファビコンキャッシュ、ブックマークアイコンキャッシュの削除を実行しましたが、ファビコンは表示されません。
-
このサイトを参考に、”タブのウェブサイトアイコンを表示する” にチェックを入切入切を繰り返すと、サイトタイトルの位置が左右するのですが、ファビコンは表示されていない状態です。
-
safariは
バージョン14.0 (15610.1.28.1.9, 15610)なので、デフォルトでファビコンが表示されるはずなのですが....teratail含む全てのサイトにて、ファビコンが非表示です。
お気に入りサイト欄も、全て????マークになってしまっています。
##コード
HTML
1 <link rel="shortcut icon" href="favicon.ico" type="favicon.ico"> 2
HTML
1<html lang="en"> 2 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>Document</title> 7 <link rel="shortcut icon" href="favicon.ico" type="favicon.ico"> 8</head> 9 10<body> 11 12</body> 13 14</html>
質問は以上です。
お時間あるときに、ご返信頂けましたら幸いです????
回答1件
0
ベストアンサー
type="favicon.ico"を
type="image/x-icon" にすると良さそうです
html
1<!--アイコン指定--> 2<link rel="icon" type="image/x-icon" href="favicon.ico"> 3<!--アイコン指定スマホ用--> 4<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon-180x180.png">
上記コードを記載したhtmlをサーバー上にアップロードし
ファビコンの表示を確認しました。
macのsafari、chrome、firefox
androidのchrome
iphone11のsafari
上記コードだけで大半のデバイスでファビコンが表示されると思いますが、
デバイスによって表示されないこともあるようです。
teratailでファビコンが表示されるのでしたら
下記のteratail.comのファビコンに関する記述が参考になると思います。
html
1<link rel="apple-touch-icon-precomposed" size="72x72" href="https://teratail.com/img/favicon/apple-touch-icon-72x72-precomposed.png"> 2<link rel="apple-touch-icon-precomposed" size="114x114" href="https://teratail.com/img/favicon/apple-touch-icon-114x114-precomposed.png"> 3<link rel="apple-touch-icon-precomposed" size="144x144" href="https://teratail.com/img/favicon/apple-touch-icon-144x144-precomposed.png"> 4<link rel="apple-touch-icon-precomposed" size="152x152" href="https://teratail.com/img/favicon/apple-touch-icon-152x152-precomposed.png"> 5<link rel="apple-touch-icon-precomposed" size="180x180" href="https://teratail.com/img/favicon/apple-touch-icon-180x180-precomposed.png"> 6<link rel="icon" type="image/png" sizes="32x32" href="https://teratail.com/img/favicon/favicon-32x32.png"> 7<link rel="icon" type="image/png" sizes="16x16" href="https://teratail.com/img/favicon/favicon-16x16.png"> 8<link rel="mask-icon" href="https://teratail.com/img/favicon/safari-pinned-tab.svg" color="#f4c51c"> 9<link rel="icon" href="https://teratail.com/favicon.ico">
さらに追記 下記コードのみのhtmlファイルを作成して試してみてください。
html
1<!DOCTYPE html> 2<html lang="en"> 3 4<head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <link rel="apple-touch-icon-precomposed" size="72x72" 8 href="https://teratail.com/img/favicon/apple-touch-icon-72x72-precomposed.png"> 9 <link rel="apple-touch-icon-precomposed" size="114x114" 10 href="https://teratail.com/img/favicon/apple-touch-icon-114x114-precomposed.png"> 11 <link rel="apple-touch-icon-precomposed" size="144x144" 12 href="https://teratail.com/img/favicon/apple-touch-icon-144x144-precomposed.png"> 13 <link rel="apple-touch-icon-precomposed" size="152x152" 14 href="https://teratail.com/img/favicon/apple-touch-icon-152x152-precomposed.png"> 15 <link rel="apple-touch-icon-precomposed" size="180x180" 16 href="https://teratail.com/img/favicon/apple-touch-icon-180x180-precomposed.png"> 17 <link rel="icon" type="image/png" sizes="32x32" href="https://teratail.com/img/favicon/favicon-32x32.png"> 18 <link rel="icon" type="image/png" sizes="16x16" href="https://teratail.com/img/favicon/favicon-16x16.png"> 19 <link rel="mask-icon" href="https://teratail.com/img/favicon/safari-pinned-tab.svg" color="#f4c51c"> 20 <link rel="icon" href="https://teratail.com/favicon.ico"> 21 <title>Document</title> 22</head> 23 24<body> 25 26</body> 27 28</html>
投稿2020/09/29 02:11
編集2020/09/29 13:12
総合スコア1373
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/09/29 02:14 編集
2020/09/29 06:16
2020/09/29 06:31 編集
2020/09/29 11:16 編集
2020/09/29 11:46
2020/09/29 11:56 編集
2020/09/29 12:26 編集
2020/09/29 12:43
2020/09/29 12:50
2020/09/29 13:03 編集
2020/09/29 13:16
2020/09/29 13:43
2020/09/29 15:39 編集
2020/09/29 21:03
2020/09/29 21:41
2020/09/29 22:09