フォトショで2種類作る
- スマホ用ウェブクリップアイコン 透過はダメ・背景設定(透過させると意図せず黒になったりする)
152×152px ファイル名 apple-touch-icon-152×152.png
大きさは諸説ありますが私は152*152一択で落ち着いてます。 - PC用ファビコン 透過OK 16×16px ファイル名 favicon-16×16.png
- ヘッダーに下記の通り設定(スマホ用はフルパスにすること、引越し後変更忘れないように)
<link rel="apple-touch-icon" href="images/apple-touch-icon-precomposed.png"><--(フルパス)--> <link rel="shortcut icon" href="images/favicon.ico" >