favicon.icoとapple-touch-icon.pngの設置方法について一つの結論
2014.07.06 (Sun) : ウェブとパソコン
写真は本文とはまったく関係がない”てんとう虫”の写真。
※なおこの記事は、個人的な備忘録なので、一般の人には、たぶん意味不明な内容です。どうぞ読み飛ばして下さい。
※それとMacのSafariでの状況は未確認です。
まったく個人的な話だがfavicon（ファビコン、favicon.ico）とApple Touch Icon（apple-touch-icon.png）の設置方法について一つの結論に達したので記してみた。
これまでfaviconとapple-touch-iconに関しては正直、あまり重視しておらず、とりあえず<head></head>内に下記を書いとけばたぶんOKだろー的な感じだった。なぜなら、以前はfaviconが使われるのは、IEのお気に入りアイコンくらいだったから。しかし現在は、ほとんどのPC用ブラウザで利用されるようになったのとiPhoneやiPadの普及率が驚異的に高くなったので、設置しといて損はないと思われる。
<link rel="shortcut icon" type="image/vnd.microsoft.icon" href="http://ﾄﾞﾒｲﾝ/favicon.ico" />
<link rel="icon" type="image/vnd.microsoft.icon" href="http://ﾄﾞﾒｲﾝ/favicon.ico" />
<link rel="apple-touch-icon" href="http://ﾄﾞﾒｲﾝ/apple-touch-icon.png" />
しかしHTML5の場合、これらの記述だと「Another HTML-lint 5」などで構文チェックを行うと下記のようなエラーで大幅に減点されてしまう。
<LINK> の REL の属性値 `shortcut icon` は正しくありません。
<LINK> の REL の属性値 `apple-touch-icon` は正しくありません。
どうもHTML5では、<link rel="shortcut icon"～と<link rel="apple-touch-icon"～というのは正しくない（非推奨な）記述のようである。
なので、設置方法について、もっと良い方法はないかなーと思い有名サイトなどのソースコードをチェックしたりして調べてみた結果、たどり着いた一つの結論が下記。
結論： <link rel="shortcut icon"～、<link rel="icon"～、<link rel="apple-touch-icon"～をすべて削除する。ただしルートディレクトリにはfavicon.icoとapple-touch-icon.pngを置いておく。
ルートディレクトリとは、サイトのトップページのindex.htmlやindex.phpが置いてある最上階層のことで、httpdocsとかpublic_html、htdocs、wwwなどの名前がよく使われている。
理由その1： faviconは、ルートディレクトリにfavicon.icoという名称のファイルを設置しておけば、現行ブラウザなら勝手に読み込んでくれた。なのでHTML5やIE11、Firefoxなどの最新のブラウザで推奨される<link rel="icon"～も記述する必要はないと思われる。
理由その2： <link rel="shortcut icon"～は、IE5、IE6、IE7、IE8、IE9、IE10のブラウザ向けの指定方法だと思われるが、やはりルートディレクトリにfavicon.icoがあれば記述しなくてもたぶんOK。そもそもIE8以下はもうどーでもいいし。
理由その3： apple-touch-iconもルートディレクトリにapple-touch-icon.pngという名称のファイルを設置しておけば必要時にiPhoneもiPadも勝手に読み込んでくれた。
※ただしルートディレクトリ以外にicoファイルやapple-touch-icon.pngを設置する場合は必要かと。
いやー大手サイトとか見ても、意外にfaviconとpple-touch-iconの<link rel=～の記述がされてなかったんだよねー。それでも表示されているので、おそらくルートにファイルを置いてあるだけって事なんだと思った訳だ。
たとえばApple、ソースには記述されてなくてルートに置いてある。
https://www.apple.com/
https://www.apple.com/favicon.ico
https://www.apple.com/apple-touch-icon.png
しかし一つだけ問題が！
それはAndroidで、ブラウザがChromeの場合、ウェブサイトを「ホーム画面に追加」時にapple-touch-icon.pngを読み込んで使用される仕様らしいんだけど、<link rel="apple-touch-icon"～を<head></head>内に記述して指定してある場合に限られるらしい。さらにブラウザがAndroid標準のものは、apple-touch-icon自体も特に使用されない仕様っていう。
つまり、Android向けにもし記述する場合でもあくまでもChromeを使っているユーザーのみ対象という事になるのだ。
AndroidのしかもChromeで「ホーム画面に追加」するユーザーってほとんどいないだろ・・・。なぜってほとんどのユーザーはAndroid標準ブラウザを使っていると思われるからだ。
なんなんだよアンドロイドぉお（怒）！
というか、そもそもAndroidの標準装備のブラウザはなんでChromeじゃないんだよ～ほんとGoogleってムカつく！
それでその為だけに記述してHTML5チェックツールで減点されるのは頭にくるので、PHPでAndroidで表示した時だけ記述するようにしてみた。
<?php
$ua = $_SERVER['HTTP_USER_AGENT'];
if (preg_match("/Android/i", $ua)) {
echo "<link rel=\"apple-touch-icon\" href=\"http://ﾄﾞﾒｲﾝ/apple-touch-icon.png\" />\n";
}
?>
これでAndroidだけ、<link rel="apple-touch-icon"～が表示されて、無事、Chromeでホーム画面にアイコンが表示された。まあ、しかし、これ自体、正直、必要ないような気もするが・・・。
※Android 4.0.3でのみ確認、他のバージョンはもってないので不明。
めでたしめでたし
※しかし、ネット上にはこのような結論は今のところ見当たらないので、もしかしたら間違っている可能性もございます。その場合は、コメントなどで指摘していただければ助かります。
※なおこの記事は、個人的な備忘録なので、一般の人には、たぶん意味不明な内容です。どうぞ読み飛ばして下さい。
※それとMacのSafariでの状況は未確認です。
まったく個人的な話だがfavicon（ファビコン、favicon.ico）とApple Touch Icon（apple-touch-icon.png）の設置方法について一つの結論に達したので記してみた。
これまでfaviconとapple-touch-iconに関しては正直、あまり重視しておらず、とりあえず<head></head>内に下記を書いとけばたぶんOKだろー的な感じだった。なぜなら、以前はfaviconが使われるのは、IEのお気に入りアイコンくらいだったから。しかし現在は、ほとんどのPC用ブラウザで利用されるようになったのとiPhoneやiPadの普及率が驚異的に高くなったので、設置しといて損はないと思われる。
<link rel="shortcut icon" type="image/vnd.microsoft.icon" href="http://ﾄﾞﾒｲﾝ/favicon.ico" />
<link rel="icon" type="image/vnd.microsoft.icon" href="http://ﾄﾞﾒｲﾝ/favicon.ico" />
<link rel="apple-touch-icon" href="http://ﾄﾞﾒｲﾝ/apple-touch-icon.png" />
しかしHTML5の場合、これらの記述だと「Another HTML-lint 5」などで構文チェックを行うと下記のようなエラーで大幅に減点されてしまう。
<LINK> の REL の属性値 `shortcut icon` は正しくありません。
<LINK> の REL の属性値 `apple-touch-icon` は正しくありません。
どうもHTML5では、<link rel="shortcut icon"～と<link rel="apple-touch-icon"～というのは正しくない（非推奨な）記述のようである。
なので、設置方法について、もっと良い方法はないかなーと思い有名サイトなどのソースコードをチェックしたりして調べてみた結果、たどり着いた一つの結論が下記。
結論： <link rel="shortcut icon"～、<link rel="icon"～、<link rel="apple-touch-icon"～をすべて削除する。ただしルートディレクトリにはfavicon.icoとapple-touch-icon.pngを置いておく。
ルートディレクトリとは、サイトのトップページのindex.htmlやindex.phpが置いてある最上階層のことで、httpdocsとかpublic_html、htdocs、wwwなどの名前がよく使われている。
理由その1： faviconは、ルートディレクトリにfavicon.icoという名称のファイルを設置しておけば、現行ブラウザなら勝手に読み込んでくれた。なのでHTML5やIE11、Firefoxなどの最新のブラウザで推奨される<link rel="icon"～も記述する必要はないと思われる。
理由その2： <link rel="shortcut icon"～は、IE5、IE6、IE7、IE8、IE9、IE10のブラウザ向けの指定方法だと思われるが、やはりルートディレクトリにfavicon.icoがあれば記述しなくてもたぶんOK。そもそもIE8以下はもうどーでもいいし。
理由その3： apple-touch-iconもルートディレクトリにapple-touch-icon.pngという名称のファイルを設置しておけば必要時にiPhoneもiPadも勝手に読み込んでくれた。
※ただしルートディレクトリ以外にicoファイルやapple-touch-icon.pngを設置する場合は必要かと。
いやー大手サイトとか見ても、意外にfaviconとpple-touch-iconの<link rel=～の記述がされてなかったんだよねー。それでも表示されているので、おそらくルートにファイルを置いてあるだけって事なんだと思った訳だ。
たとえばApple、ソースには記述されてなくてルートに置いてある。
https://www.apple.com/
https://www.apple.com/favicon.ico
https://www.apple.com/apple-touch-icon.png
しかし一つだけ問題が！
それはAndroidで、ブラウザがChromeの場合、ウェブサイトを「ホーム画面に追加」時にapple-touch-icon.pngを読み込んで使用される仕様らしいんだけど、<link rel="apple-touch-icon"～を<head></head>内に記述して指定してある場合に限られるらしい。さらにブラウザがAndroid標準のものは、apple-touch-icon自体も特に使用されない仕様っていう。
つまり、Android向けにもし記述する場合でもあくまでもChromeを使っているユーザーのみ対象という事になるのだ。
AndroidのしかもChromeで「ホーム画面に追加」するユーザーってほとんどいないだろ・・・。なぜってほとんどのユーザーはAndroid標準ブラウザを使っていると思われるからだ。
なんなんだよアンドロイドぉお（怒）！
というか、そもそもAndroidの標準装備のブラウザはなんでChromeじゃないんだよ～ほんとGoogleってムカつく！
それでその為だけに記述してHTML5チェックツールで減点されるのは頭にくるので、PHPでAndroidで表示した時だけ記述するようにしてみた。
<?php
$ua = $_SERVER['HTTP_USER_AGENT'];
if (preg_match("/Android/i", $ua)) {
echo "<link rel=\"apple-touch-icon\" href=\"http://ﾄﾞﾒｲﾝ/apple-touch-icon.png\" />\n";
}
?>
これでAndroidだけ、<link rel="apple-touch-icon"～が表示されて、無事、Chromeでホーム画面にアイコンが表示された。まあ、しかし、これ自体、正直、必要ないような気もするが・・・。
※Android 4.0.3でのみ確認、他のバージョンはもってないので不明。
めでたしめでたし
※しかし、ネット上にはこのような結論は今のところ見当たらないので、もしかしたら間違っている可能性もございます。その場合は、コメントなどで指摘していただければ助かります。
スポンサード リンク
コメント(2)
valerothさん （2016-02-10）
ひと言でいいので、気軽にコメントしていってください！
あなたのそのひと言がこのブログ運営の原動力なのです。よろしくお願いします。
あなたのそのひと言がこのブログ運営の原動力なのです。よろしくお願いします。
関連記事：ウェブとパソコン
呪われたYahoo!ボックスは、ダストボックスだった
Windows XPがインターネットにつながらない表示されない不具合の原因
Windows8.1にアップデートしたら出るようになった「Microsoft OneDrive は動作を停止しました」というエラー（不具合）の原因と解決策
favicon.icoとapple-touch-icon.pngの設置方法について一つの結論
サーバとはなんぞや？
Windows8.1のメモ帳の上書き保存や名前を付けて保存をすると応答なし（フリーズ、固まる）状態になり保存できない不具合の原因と解決策
パンダ・ペンギンのリカバリーで効果があった施策は？
