favicon(ファビコン)=Favorite iconの設置。

<favicon.icoの作成>

Photoshopで.icoを開く為のプラグインをインストール
↓↓↓
★Photoshop ICO (Windows Icon) Format plugins
http://www.telegraphics.com.au/sw/icoformat.ja.html

マルチアイコンを作成するので、
icoサイズ: 32×32px、16×16pxの2種類の.icoを作成。(RGB/8bit)
※縮小する場合は、画像の再サンプル:バイキュービック法(シャープ)
(保存先: C:\Program Files\Adobe\Adobe Photoshop CS3\プラグイン\ファイル形式\ICOFormat.8bi)

複数サイズの.icoを1つの.icoに変換するソフト
↓↓↓
★@icon変換
http://www.towofu.net/soft/aicon.php

2つの.icoファイルを読込み、2つを選択したまま、
ファイル→マルチiconとして保存。(ファイル名:favicon.ico)


<アップロード>
ルートディレクトリにfavicon.icoをアップロードする。

-HTML-
<head>
~
<link rel="shortcut icon" type="image/x-icon" href="http://xxxx.co.jp/favicon.ico" />
</head>

※ルートディレクトリにfavicon.icoをアップしている場合、特に記述の必要はない。
м: &#1084;
д: &#1076;
ю: &#1102;
☺: &#9786;
☻: &#9787;
♠: &spades; = &#9824;
♥: &hearts; = &#9829;
♦: &diams; = &#9830;
⋆: &#8902;
☠: &#9760;
☤: &#9764;
☥: &#9765;
☪: &#9770;
♅: &#9797;
♆: &#9798;
♓: &#9811;
♛: &#9819;
✞: &#10014;
✟: &#10015;
✡: &#10017;
✯: &#10031;
ⓒ: &#9426;
ⓚ: &#9434;
<sup(superscript) -上付文字->
⁰: <sup>0</sup> = &#8304;
¹: <sup>1</sup> = &sup1; = &#185;
²: <sup>2</sup> = &sup2; = &#178;
³: <sup>3</sup> = &sup3; = &#179;
⁴: <sup>4</sup> = &#8308;
⁵: <sup>5</sup> = &#8309;
⁶: <sup>6</sup> = &#8310;
⁷: <sup>7</sup> = &#8311;
⁸: <sup>8</sup> = &#8312;
⁹: <sup>9</sup> = &#8313;

<sub(subscript) -下付文字->
₀: <sub>0</sub> = &#8320;
₁: <sub>1</sub> = &#8321;
₂: <sub>2</sub> = &#8322;
₃: <sub>3</sub> = &#8323;
₄: <sub>4</sub> = &#8324;
₅: <sub>5</sub> = &#8325;
₆: <sub>6</sub> = &#8326;
₇: <sub>7</sub> = &#8327;
₈: <sub>8</sub> = &#8328;
₉: <sub>9</sub> = &#8329;
<JPEG/GIF/PNG>
非可逆圧縮(画質劣化あり)/可逆圧縮(画質劣化なし)/可逆圧縮(画質劣化なし)
約1678万色(24bit)/256色(8bit)/約1678万色(24bit)、約280兆色(48bit)

<透過PNG書き出し>
Photoshop: [Web用に保存]→PNG-8(256色/8bit)
(Fireworks:PNG32)


IE6でPNG画像を表示する↓↓↓

★背景PNG
#div {
background: transparent url(../img/alpha.png) no-repeat left top !important;
background: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="../img/alpha.png", sizingMethod="scale");
}

※~IE6は、同一プロパティ内の!important指定よりも、常に後に書いた方が優先される。


★img画像PNG
-HTML-
<div>
<img src="../img/alpha.png" width="100" height="100">
</div>

-CSS-
* html div {
background-image:url(../img/bg.gif);
width:100px;
height:100px;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=../img/alpha.png);

}
* html div img {
display:none;
}
<~IE6>
* html #div { color: #000; }
(#div { _color: #000; } )

<IE7>
*:first-child+html #div { color: #000; }
(*+html #div { color: #000; } )

<IE6、7>
#div { /color: #000; }

<IE8>
#div { color: #000\9; }

<Firefox>
#div, x:-moz-any-link { color: #000; }

<Safari 3~, Chrome, Opera 9~, Firefox 3.5~>
body:first-of-type #div { color: #000; }

<iPhone>
/* iPhone / mobile webkit */
@media screen and (max-device-width: 480px) {
#div { color: #000; }
}