ブラウザのタグ等に出てくるファビコンだけでなく
最近はスマホホーム画面用のアイコンも作成することが増えたのでいつものやり方をメモ
①ファビコンの作成
いつもこちらのサイトで作らせてもらってます
ファビコン favicon.ico を作ろう! リアルタイム版
ファビコン favicon.ico を作ろう! リアルタイム版。16x16と32x32と48x48ピクセルのマルチアイコンが簡単に作れます。プレビューはリアルタイムに確認できます。
ao-system.net
16×16 px 、32×32pxでそれぞれpngファイルを作り、アップロードするだけですぐにfavicon.icoをダウンロードできます
②スマホホーム画面用アイコンの作成
iphone用…180×180px ファイル名： apple-touch-icon.png
Android用…192×192px ファイル名：android-touch-icon.png
で、それぞれpngファイルを作ります
③アップロードしてlinkタグを記述
ルートディレクトリにアップしてタグを記述
上から
通常のファビコン
iphoneホーム画面用
Androidホーム画面用
<link rel="shortcut icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180">
<link rel="icon" type="image/png" href="/android-touch-icon.png" sizes="192x192">
コメント