スマホ・モバイルでのショートカットアイコン apple-touch-icon.png

HTMLを見直したらあちこち調子悪くなった。

以前よりHTML5はシンプルに、CSS3はより詳細な記述で多様なデザインが可能になった。W3Cでも最新のHTML5を推奨しているが、過渡期ではある。

どこのWEBサイトもかっこ良くなった。
買ったレシピ集見てるだけでも、こんなデザインが素人にもできるとは喜。
知っているのと知らないのとでは大違いだわ。


以前に作ったファビコンをそれぞれのページに使っていたが、そのファビコンfavicon.icoはアンドロイドスマホではブックマークする際には出てくるが、どうしてホーム画面への追加でショートカットアイコンにならないのか?と、ずっと疑問だった。

任意のページにショートカット用アイコンを設置したい。
今日はその作業メモ。

favicon.icoはスマホ・モバイルと、PCでは挙動が違うという事が分かった。

favicon.icoはスマホ・モバイルではブックマークの際に出てくるだけだった。PCではブラウザのタブに出てくるし、同じfaviconがショートカットアイコンにもなった。だが、だいぶ昔に作ったものでものすごくサイズが小さいため、解像度が粗くなっていた。

allabout様によれば、apple-touch-icon.pngを設定する、と分かった。これがスマホやモバイルの時に「ホーム画面に追加」でショートカットアイコンとなる。

だから結局favicon.icoとapple-touch-icon.pngの二つを設定するわけよ。

favicon.icoはPCでブラウザのタブとショートカットアイコンになり、スマホ・モバイルではブックマークとキャッシュの削除の際にサイト名の横に出ていた。

apple-touch-icon.pngはスマホ・モバイルでブラウザのショートカットのためだけに設定する。

ページごとに別のfavicon.icoを使わないでドメイン内全てのページで同じで良いなら、ドメイン直下のディレクトリに(インデックスページと同じ階層に)favicon.icoとapple-touch-icon.pngを入れる。

画像サイズ120px四方位で大丈夫だった(解像度粗すぎなかった)。

favicon.icoはWEB上で作成可能なサイト様で作らせてもらい、自分のPCにダウンロードし、また自分のサーバーにアップ。

・・・むかしむかしもそうだった。

私は関連するHTMLページごとにheader内で違うファビコンを設定して表示させていた。link rel=””を記述するとそれが優先されるそうだ。

ドメイントップのインデックスページ以外には他のファビコンにしていたので、PCではその粗い解像度のfavicon.icoがショートカットアイコンとなるが、まいいや。いずれ作り替えていこう。自分のサイトのショートカットアイコンは自分しか使わないだろうから。

PCではfavicon.icoだけでブラウザタブとショートカットアイコンはOK。

ドメイントップのインデックスページにはlink rel=””を記述せずに同階層ディレクトリにfavicon.icoとapple-touch-icon.pngを入れておけば、これを最初に読み込むそう。大したことでもないのに、キャッシュを削除しつつ何度もサイトを表示させて確認しながら、やっとできた。(上の画像:スマホでスクリーンショットしようとするとこの画面が消えるのでVAIOのカメラで撮った)

スマホ・モバイルでは任意ページheader内でlink rel=””でファビコンを設定するとブックマークに、同じくlink rel=””でapple-touch-icon.pngも設定するとショートカットアイコンになった

と思ったのは一瞬で、ならなかったよ。

スマホにではapple-touch-icon.pngには違う画像を設定(リネーム)してlink rel=””にしたけど、ファビコンがショートカットになってたわ。

どゆこと?😵🌀

も、わがんね。一回タンマ。

下はPCのタブとデスクトップショートカットアイコン。