« 吉ブーマウス&マウスパッド当選！ | 英語の広告 »
お気に入りのアイコンの作り方
自分のサイトで、ブラウザのお気に入りやアドレスバーの横に自作アイコンを表示させる方法です。
１．縦横32ピクセル（256色）と、16×16ピクセル（16色）の2種類の画像を用意します。
２．画像を「アイコン形式の画像（ .ico ）」に変換します。
例：アイコン変換ソフト @icon変換 （Windows用）を使用した場合の変換手順
(1) 作成した２つの画像を「@icon変換」へドラッグ＆ドロップします。
(2) 左画面のファイル名を、両方選択した状態にします。（キーボードのシフトボタンを押しながらクリック）
(3) メニューから「ファイル」→「マルチiconとして保存」 を選択します。
(4) 適当な名前を付けて保存。（例：favicon.ico）
３．作成したアイコンをサーバーへアップします。
４．アイコンを表示したいページの、<head>～</head>間に、アイコンファイルへのリンクを記述します。
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
※ htmlに上記のリンクタグを記述しない場合、ブラウザはドメイン直下に favicon.ico がないか探すようです。
アイコン画像変換ソフト（Windows用） - @icon変換
１．縦横32ピクセル（256色）と、16×16ピクセル（16色）の2種類の画像を用意します。
２．画像を「アイコン形式の画像（ .ico ）」に変換します。
例：アイコン変換ソフト @icon変換 （Windows用）を使用した場合の変換手順
(1) 作成した２つの画像を「@icon変換」へドラッグ＆ドロップします。
(2) 左画面のファイル名を、両方選択した状態にします。（キーボードのシフトボタンを押しながらクリック）
(3) メニューから「ファイル」→「マルチiconとして保存」 を選択します。
(4) 適当な名前を付けて保存。（例：favicon.ico）
３．作成したアイコンをサーバーへアップします。
４．アイコンを表示したいページの、<head>～</head>間に、アイコンファイルへのリンクを記述します。
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
※ htmlに上記のリンクタグを記述しない場合、ブラウザはドメイン直下に favicon.ico がないか探すようです。
アイコン画像変換ソフト（Windows用） - @icon変換
タグ：
Comments
コメントを書く
※ スパム対策のためコメント内の URL は全角で書いてください。あとで半角に変換します。