2011.05.25
html

ブラウザに表示させるアイコン favicon

ブラウザに表示されるアイコンはfavicon(ファビコン)と言います。
拡張子は.icoです。
自分のウェブサイトのロゴなどを表示させるのに使います。

ブラウザでブックマーク(お気に入り)に登録したときに表示されるアイコンもfaviconです。

作成方法は英語ですが、以下のサイトが便利。

http://www.favicon.cc/

自分でも書けるし、自分で作った画像ファイルなどを変換してくれます。
変換対応しているファイルは、jpg, jpeg, gif, png, bmp, ico, curです。

faviconは通常16ピクセル×16ピクセルのサイズ。
ここのサイトでも縮小してくれますが、画質が荒くなってしまう恐れがあるので、最初からこのサイズで作るのが良いと思います。

作り方

  • 1.Import imageをクリック。

  • 2.ファビコンにする画像ファイルを選択し、縮小タイプをラジオボタンから選択。そしてUploadボタンをクリック。

  • 3.アップロードした画像を確認し、画面中央下のほうのDownload Faviconをクリックしてダウンロード。

  • 4.HTMLのheadの中に以下のコードを記述。
<link rel="shortcut icon" href="favicon.ico" />

ダウンロードしたfavicon.icoファイルをHTMLファイルと同じ階層に置く場合は上記の記述でOKです。

もし、別の階層に置く場合は、favicon.icoを置くディレクトリに合わせてファイルのパスを合わせます。

<link rel="shortcut icon" href="ファイルのパス/favicon.ico" />
関連する記事

コメントをどうぞ

技術的なサポート、質問等にはお答えできない場合もございます。
また、現在更新頻度はかなり低めですので、返信できたとしてもかなり遅くなる場合があります。
ご理解くださいませ。


以下のHTMLタグが使えます。
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

*


おすすめの本
ネットで調べればなんとかなる!という時代ですが、良い本にめぐり合い、基礎をきっちり固めることで応用がきくテクニックを身に着けることができます。もっと上達したい人におすすめの本をいくつかご紹介します。
TO TOP