OKADA LABO

faviconの設定(簡易メモ)

とても簡易なメモですが、favicon制作で迷いたくないのでメモをいたす。
heml head 表記

link rel="shortcut icon" href="http://XXXXX.com/wp-content/themes/XXXXX/images/favicon.ico">
link rel="icon" href="http://XXXXX.com/wp-content/themes/XXXXX/images/favicon.ico" type="image/vnd.microsoft.icon">
link rel="apple-touch-icon" href="http://XXXXX.com/wp-content/themes/XXXXX/images/apple-touch-icon.png">
link rel="apple-touch-icon" sizes="72x72" href="http://XXXXX.com/wp-content/themes/XXXXX/images/apple-touch-icon-72x72.png">
link rel="apple-touch-icon" sizes="114x114" href="http://XXXXX.com/wp-content/themes/XXXXX/images/apple-touch-icon-114x114.png">

wordpressの時

link rel="shortcut icon" href="/images/favicon.ico">
link rel="icon" href="/images/favicon.ico" type="image/vnd.microsoft.icon">
link rel="apple-touch-icon" href="/images/apple-touch-icon.png">
link rel="apple-touch-icon" sizes="72x72" href="/images/apple-touch-icon-72x72.png">
link rel="apple-touch-icon" sizes="114x114" href="/images/apple-touch-icon-114x114.png">

用意するのは、
favicon.ico
apple-touch-icon.png サイズ57 57
apple-touch-icon-72x72.png
apple-touch-icon-114x114.png

4つ

favicon.icoは

参考
http://minakul.jp/favicon-2290

pngでーた
64px × 64px
48px × 48px
32px × 32px
16px × 16px

4つ作って、
http://ao-system.net/alphaicon/index.php

で一気にに作る

apple-touch-icon
114px 72px 57px で作る