フォトショで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" >