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のタブとデスクトップショートカットアイコン。
