[Favicon]faviconの記述（いまさらだけど）【apple-touch-icon-precomposed】

最近のパターンを記載しました
こちらをごらんください

各ブラウザごとに
サポートするようになっているので
自分用のメモもかねて

GIFファイルを使う
<link rel="shortcut icon" href="favicon.gif" />

<link href="http:/XXXXXXXXXX/favicon.gif" 
rel="shortcut icon" type="image/gif"/> 

PNGファイルを使う
<link rel="shortcut icon" href="favicon.png" />

<link href="http:/XXXXXXXXXX/favicon.png" 
rel="shortcut icon" type="image/png"/> 

WindowsIcoファイルを使う
<link href="favicon.ico" rel="icon" 
type="image/vnd.microsoft.icon"/> 

方法があります。

WindowsIcoファイルを使う場合↓のような記述をする場合もあります。
<link href="http:/XXXXXXXXXX/favicon.ico" 
rel="shortcut icon" type="image/x-icon"/> 

面白いのが
FireFoxのみがGIFアニメーションをサポートしている事です。

各ブラウザで
透過PNGをサポートしていますので

こんな感じの
縦16px横16pxの透過PNGを指定すると

こんな感じで透過します。

GIFアニメのFaviconサンプル[Source]
【[force4u]favicon-GIF】[LINK]

透過PNGのFaviconサンプル[Source]
【[force4u]favicon-PNG:ALFA】[LINK]

Windowsicoのサンプル[Source]
【[force4u]favicon-WinIcon】[LINK]

Windows対策で
ルートディレクトリにicoファイルおいて
HTML上ではPNGやGIFを指定するのが良いかもしれませんね。

こちらのサイト等は

アイコンサイズが32x32
　　　

今はあまり細かく作らなくても表示されるんですね。

こんなタグも良く見かけますね

<link rel="apple-touch-icon-precomposed" href="" /> 

512px×512px
の画像をリンクします。

これは
ADD　homeした時に

登録用のアイコンになり

HOMEにアイコンとして表示されます

これは
必須ですね。

また

<link rel="apple-touch-icon" href="" />

と書く方法もあるようで
こちらは
57x57
の

サイズで画像を作ります。

登録は同じように

add home から

タイトル等きめて
登録になります。

表示はこんな感じ

最終的に
57x57で表示されているので
<link rel="apple-touch-icon-precomposed" href="" /> 
で記述して
57x57でアイコンを用意した方が
狙った通りに表示されますね。
（圧縮されないから）

どちらを使うか？は好みですね。

通信時間がありますから
小さい画像を用意して
<link rel="apple-touch-icon-precomposed" href="" /> 
の方が良いでしょうか？

ちなみに両方記述すると
apple-touch-icon-precomposed
を優先するようです。

注意したいのが
apple-touch-icon-precomposed
apple-touch-icon
の表示の違いです。

アルファが入るか入らないか？
の違いです。
これは好みの問題かなぁ

iTuneストアの
アイコンは

72x72