うぇぶかにほん Webka.Jpうぇぶかにほん-駅と旅のガイドすみません、まだβ版です。
  Webka.Jp ホーム  >  ブログス  >  日本Web化計画  Peaceful Paradise Life
うぇぶかにほん公式ツイッター  うぇぶかにほん公式フェイスブック  Peaceful Paradise Life FILMS  最新記事のRSS
Peaceful Paradise Life
blog ホーム 旅、カメラ、そしてウェブ... 堀田けいすけのブログ
about
recent
tweet
movie
search
pepalife.com
ようこそ、ピースフルパラダイスライフへ
このブログは南国生活をする人のブログではありません。いつか、のんびり南国生活を夢見るおっさんブログです。
本当はもう、自分の力でどこにでも自由に行けるはずなのに、まだ、どこへも行っていない事に最近気がつきました。
でも、本当は夢見る南の島だって、どこにだって自由に行けるはずなのです。だから、そろそろ、ちょっと、そろそろ、と夢想しているおっさんブログです。
最近の記事タイトル (すべての記事タイトルを表示する
うぇうかにほん公式ツイッター
このブログの新しい記事の更新情報も[うぇふかにほん公式ツイッター]でチェック!
※PPL FILMS動画最新順、前へ/次へで動画を切り替えられます。
こちらもおすすめ→Webka.Jp FILMS
ブログ内
TAG
一人旅E-3国内の旅OLYMPUS地元神奈川横浜わんにゃん止まらない衝動本州タイ海外の旅映画PANASONICデジタルガジェット動画あり北海道PCトラブル音楽旅道具備忘録イベントトイカメラ神戸小豆島SONYソフト&アプリ九州夜景NIKONSEIKO旅(複数)PCスマートフォンパソコンGirlsAward鉄道アメリカウェブ浅田真央屋久島フィルムカメラあまちゃん撮影道具白谷雲水峡土讃線金比羅山四国パソコン周辺機器ロジクールiPod_touch4th台湾終わらない断捨離の記録RICHO-PENTAXアユタヤE-520高松摩耶山讃岐うどん道後温泉ポートタワー大部港予讃線ノニ風鈴動画横浜駅礼文島江ノ島浅草キャメロン・ディアス小樽グラム単位の軽量化FUJIFILMCANON大洗港松山駅LEICAXJAPANミニチュア風WiMAXバックパック香港南京町浜松青森東京駅日生駅水戸駅双子浦水戸黄門松山城瀬戸内海観音寺駅エンジェルロード日生港東京スカイツリー川奈汐吹公園スキンダイビング北海道&東日本パス平泉東伊豆シュノーケリングはやぶさJR東日本パス東北新幹線新青森予土線トレイルランニング阿波池田駅東北メリケンパーク富士山戸田恵梨香藤木直人中古車屋フリー写真素材福島駅水着スポーツジム実験阿部寛桂浜はりまや橋高知高知城窪川駅高知駅坪尻駅サッカー二俣川テレビジャガー琴平駅四万十川塔のへつり駅阿武隈急行線RADWIMPS被災地南会津会津鉄道スーザン・ボイルブライアン・セッツァーオルガ・キュリレンコレオナルド・ディカプリオ仲間由紀恵トム・ハンクスROSEROSE男鹿高原駅八重の桜ハワイCOSINAラオスカンボジアGM5ミャンマーGoPro会津田島駅大川ダム公園駅兜駅あぶくま駅秋の乗り放題パス豊川悦司ジョージ・クルーニー宗谷本線YMO名寄駅稚内駅三ノ宮駅きゃりーぱみゅぱみゅ角島大橋JRしおサイダー東北本線MAMMUTカラビナ二俣川駅熊ヶ根駅小樽運河いしかりライナー保土ヶ谷バイパスはまなすiPod_touch4thスマートフォン函館中井貴一LS-10Milky_Bunny水道橋駅東京ドーム伊予大洲駅八ツ森駅

favicon.icoとapple-touch-icon.pngの設置方法について一つの結論

2014.07.06 (Sun) : ウェブとパソコン

てんとう虫
≫ 拡大する

Camera:OLYMPUS OM-D E-M1 + Lens:M.ZUIKO DIGITAL ED 12-40mm F2.8 PRO

写真は本文とはまったく関係がない”てんとう虫”の写真。

※なおこの記事は、個人的な備忘録なので、一般の人には、たぶん意味不明な内容です。どうぞ読み飛ばして下さい。
※それと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でのみ確認、他のバージョンはもってないので不明。

めでたしめでたし

※しかし、ネット上にはこのような結論は今のところ見当たらないので、もしかしたら間違っている可能性もございます。その場合は、コメントなどで指摘していただければ助かります。
スポンサード リンク
この記事に拍手・コメント・共有する
share
コメント(2)

valerothさん (2016-02-10) edit

Perfectly written!
I’ll right away seize your rss feed as I can’t in finding your
e-mail subscription link or newsletter service.
Do you’ve any? Kindly allow me know so that I may subscribe.

匿名さん (2016-02-22) edit

参考になりました!
Androidでは、アイコンのサイズでも苦労しました。
ひと言でいいので、気軽にコメントしていってください!
あなたのそのひと言がこのブログ運営の原動力なのです。よろしくお願いします。

関連記事:ウェブとパソコン
スポンサード リンク
Profile
x
Author: 堀田けいすけ
駅と旅のガイドうぇぶかにほん及びPEPACOMのウェブディレクター。うぇぶかにほん公式ツイッターで「ほた」でつぶやき中~、顔写真はすでに10年以上前のもの~、
好きな**:PC/スマホ/一人旅/鉄道旅/降り鉄/乗り鉄/駅鉄/撮り鉄/鉄道ファン/カメラ/ロック/パンク/ハードコア/温泉/散歩/トレッキング/ハイキング/ウォーキング/サイクリング/焼肉/すし
Web Site
うぇうかにほん(Webka.Jp)日本には駅の数だけ旅がある。
うぇうかにほん公式ツイッター
Calendar
08 | 2021/09 | 10
- - - 1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 - -
スポンサード リンク
旅の計画に便利なサイト
人は皆、自分がなぜ生まれてきたのかを確かめるために生きているのです。でも、その答えがだせる人はめったにいません。もし、答えが知りたくなったら旅にでましょう。旅にでるのは、美しい景色を見にいくためです。美しい景色を見るとなんで自分が生まれてきたのかが、わかるといいます。
My recommendation