umedaファビコンとiPhone用アイコンの作り方
先日、ファビコンとiPhone用アイコンを設定する機会があったのですが、
忘れていたことが多かったので、今更ですがまとめてみました。
●ファビコン
【画像サイズ】 16×16
※正方形であればサイズは不問。保存形式は、GIF、PNGなど。
【注意事項】
作成した画像は、ファビコン用の形式（.ico）に変換してアップロード。
（変換サイト）「FavIcon from Pics」
http://favicon.htmlkit.com/favicon/
【設置方法】
（A）ファビコンを設置したいページのHTMLに直接記述する。
<link rel="shortcut icon" href="favicon.ico">
（B）ファビコンを設置したいサイトの「.htaccess」に設定。
AddType image/xicon .ico ＜Files favicon.ico＞ ErrorDocument 404 【ファビコンまでのパス】/【ファビコンのファイル名】.ico ＜/Files＞
【参考】
・もう何も恐くない…綺麗なfavicon作成の基本的なコツ・アイデアまとめ | 株式会社LIG
http://liginc.co.jp/web/design/material/16853
・WordPress のよくあるカスタマイズコード functions.php 多め | Webデザインレシピ
http://webdesignrecipes.com/wordpress-customize-with-functions-php/#p7
●iPhone用アイコン
【画像サイズ】 129×129 ～ 150×150
正方形を推奨。PNG形式。
（実際には、適当なサイズで作っても自動的に縮小（または拡大）・トリミングされるそうです。）
【アイコンのサイズ】
iPhone や iPadなど、デバイスによってアイコンの表示サイズは若干異なりますが、
自動的にリサイズされてアイコン化されます。
・Retinaディスプレイ
iPhone・iPod touch： 114×114、 iPad： 144×144
・旧モデル（Retinaディスプレイではない）
iPhone・iPod touch： 57×57、 iPad： 72×72
【注意事項】
・ロゴなどを中央に配置したい場合は、若干上寄りに設置するとバランスが良く見える。
（参考）Apple.com で設置されているアイコン（129×129）
http://www.apple.com/apple-touch-icon.png
・角丸、つやつやした効果、ボタンの影は自動的に追加されるため
白っぽい画像だと目立たなくなってしまう。
・透明部分は黒く塗りつぶされるため、設定しない。
【設置方法】
（A）ルートに設置する。
※HTMLなどに特に記述する必要はありません。（自動的に読み込んでくれます。）
（B）任意の場所へアップする。
画像をアップロード後、ウェブページの＜head＞～＜/head＞内へ以下の1行を追加。
<link rel="apple-touch-icon" href="（画像のアップ場所）"/>
【参考】
・研究室／iPhone、iPod touch、iPad用Webクリップ用アイコンの作り方 - iをありがとう
http://arigato-ipod.com/lab-webclip-apple-touch-icon.html
※Android用アイコンの設定については、こちらをご参照ください。
・Androidは「apple-touch-icon」でいろいろハマるので要注意 | Tips Note
https://www.tam-tam.co.jp/tipsnote/mobile/post1232.html
