ファビコンの設置

favorite icon(お気に入りアイコン)を略してfavicon(ファビコン)というらしい。

ファビコンとはお気に入りやブラウザのアドレスの横にある小さいアイコンのことです。

最近のブラウザではほとんど対応しているらしく

お気に入りから分かりやすくユーザビリティに優れています。

導入は元になる画像さえあれば外部サイトを利用してすぐに作ることが可能。

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

下記サイトに行き

Chami.com — Web Developer Tools

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

favicon-01favicon from picsページへ移動

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

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

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

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

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

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

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

favicon-04編集しなくても十分使える
そのまま使う場合は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リンクをクリックすると、ちょっとした編集ができます。

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

  • 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(グレイスケール化にする)

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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です