AfroNamiHeiの箱

準備しておいた画像でファビコンをつくる

下記サイトに行き

Chami.com — Web Developer Tools

favicon from picsリンクをクリックです。

favicon from picsページへ移動

参照をクリックし、画像を読み込みます。

準備しておいた画像を選び
参照ボタンすぐ下のGanerate FavIcon.icoボタンを押す

画像はいくつか呼び出して複数使える。

画像をアップロードした後の画面
ここからさらに編集できる

アイコンは2パターン用意され

1つは静止画像、もう１つはアニメーション。

この状態でダウンロードする場合はDownload FavIcon Packageをクリックです。

編集しなくても十分使える
そのまま使う場合はDownload FavIcon Packageをクリックし保存

サイトにアップロードする

解凍するとファイルは3つで

• animated_favicon1.gif（アニメーション用）
• favicon.ico（静止画像）
• ReadMe.txt（読んでねテキスト）

アップロードするのはanimated_favicon1.gifファイルとfavicon.icoファイルの2つで

サイトのトップディレクトリ（rootディレクトリ）に配置します。

サイトに反映させる

アニメーション対応ソース

<link rel="shortcut icon" href="favicon.ico" >
<link rel="icon" type="image/gif" href="animated_favicon1.gif" >

アニメーション非対応ソース

<link rel="shortcut icon" href="favicon.ico" >

上記どちらかをサイトのindexファイルに埋め込むことになります。

埋め込む場所はbodyタグ内であればOK。

Afroはスタイルシートリンクの直下に追加。

<link rel="stylesheet" href="./style.css" type="text/css">
<link rel="shortcut icon" href="favicon.ico">
<link rel="icon" type="image/gif" href="animated_favicon1.gif">

例としてはこんな感じ。

これでFavIconは反映されます。

FavIcon from Picsページにアップロードした画像を編集する場合

Customizeリンクをクリックすると、ちょっとした編集ができます。

アニメーションを編集
アニメーションをさせたり文字を流したりバックグランドカラーを変えたり

• Add animated favicon（アニメーションをします。Customizeリンクをクリックすると自動でONになる）
• Add scrolling text and edit animation（アニメーション時のテキスト。Customizeリンクをクリックすると自動でONになる）
• Edit animation and add text（文字を流すことも可能。アップロードした画像の数に比例して{PIC1} {PIC2}として異なる画像を流すことができる。turn offをonにするとアニメーションが繰り返される）
• Add iPhone and iPod Touch icon（iPhoneとiPod Touchのアイコンにする？）
• Background color（アイコンのバックカラーを設定。透明化の指定）
• Make image background transparent（角の色を基準にしてバックカラーを透明にする）
• Add a border around the image（アイコンに枠線をつける）
• Convert to grayscale / black and white（グレイスケール化にする）

同じ外部のサービスはいくつもあると思います。