"favicon" タグがついている記事

  • 2008/01/22 18:03

    手軽にfavicon生成 -Favicon Editor-

    ラウザのアドレスバー左に表示されるfavicon.icoを簡単に作成することができるサービスを紹介します。
    DeGrave.comのFavicon Editorです。

    このサービスは、faviconにしたいロゴ画像をアップロードすることで、自動で作成してくれます。もちろんすべて手動で色を生成することも可能です。早速弊社のロゴを用いて作成してみました。

    1. 画像を準備
    弊社のロゴ画像から、favicon.icoにしたい部分を抜き出し、別ファイルとして保存します。

    2. 保存したファイルを、Favicon Editorにアップロードします。

    3.取り込む範囲をマウスでドラッグし、決定します。

    4. 背景を透過させたい場合は、グレーと白のチェックになっているピクセルで塗りつぶします。

    5. Make Favicon! ボタンをクリックすると、faviconが表示されるので、それをローカルマシンに保存します。

    6. WebサイトのドキュメントルートにFTPします。

    7. HTMLに下記の通り記述します。
    <head>
    <link rel=”shortcut icon” href=”/favicon.ico”>
    …
    </head>

    以上で完了です。一度背景を透過させたバージョンを作成してみましたが、Firefoxのブックマークツールバーに表示しているときにマウスオーバーさせるとシャギーが目立ってしまったので、背景を白で塗りつぶしました。

    256色で生成されるので、なかなかきれいにできました。

    faviconがあるのと無いのでは、ほんの少しですが印象がよくなりますね！