favicon.ico(ファビコン)の作り方

ちょっと個人的なまとめ。いまさらですが。favicon.icoの作り方&設置方法です。

fav_top.gif

↑ ブラウザのアドレスバーとかブックマークに出てくるこのアイコンがfavicon.icoね。

■ オンラインで作る(エディター付き)

いくつかありますね。ちょいちょいと作りたいときに便利。エディター付きのものをご紹介。

■ オンラインで作る(エディターなし)

こちらはただ画像をアップするだけですね。ピクセル単位の編集とかはできません。

■ ソフトウェアを使って作る

Faviconは普通の画像をicon形式に変換するだけでOKです。画像はPhotoshopなり、Paintなりで作ってください。GIFアニメもOKですよ。

そうして作った画像を次のソフトウェアで変換すると良いでしょう。

■ faviconの設置方法

設置方法はHTMLのHead部分に次の一行を加えるだけ。もちろんfavicon.icoをアップロードしておくことも忘れずに。

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

以上ですかね。他にもあれば教えてください。Faviconついているとかっこいいですよね。よろしければ使ってみてください。

■ 関連記事

Pocket

SPONSORED LINK

15 Comments

  1. favicon のこと

    IDEA*IDEA の記事でちょっと疑問に思った事が。
    Faviconは普通の画像をicon形式に変換するだけでOKです。画像はPhotoshopなり、…

  2. やっぱり Favicon が欲しい!

    「Cha’s Bar」でも設定していますが、以前から思っていた Favicon (ファビコンと読みます)の設定を作成、設定してみました。といっ…

  3. 今更ですがfaviconを設置してみたよ

    このブログを開設して早半年。ここ1ヶ月ほどはアクセス数が飛躍的に増加した状態が続いてます。僕のチラシの裏に付き合ってくれている大勢の方々には心より感謝申し…

  4. はじめまして。私は数ヶ月前までファビコンの存在は知ってても
    ファビコンという名前すら知らなかったのですが
    自分のブログにもファビコンを載せたいと思い以前調べました。
    フォトショップを持ってる方であれば、プラグインがありますので
    こちらのサイトからDLして入れれば、フォトショで作った画像を
    そのままico形式で保存できるようになります。
    http://www.telegraphics.com.au/sw/#icoformat

  5. Faviconギャラリーサイトのまとめ

    Favicon?って方は以前エントリーしたファビコン作成方法・ファビコンの埋め込み方をご覧下さい。 今回はFaviconのデザインにをまとめてくれているサ…

  6. 前から気になって仕方なかった事が出来そうだと大喜びでチャレンジしています。 @icon変換 でfaviconを作りタグをいれUPしました。フレームを使ってないサイトはちゃんと頭にアイコンが表示されるのですがフレームを使ってるサイトは色々工夫をして見るのですがどうしても表示されません何か他に方法とかあるのでしょうか、ちなみにiframeを使ってるものはちゃんと表示されます。

  7. Pingback: パソコンやインターネットのこと » Blog Archive » Favicon(?) - お気に入りなどで表示されるアイコン

  8. Pingback: Movable Type から WordPress への移行メモ | 東京ヘッドターミナル

  9. Pingback: sabotem×web

  10. Pingback: Favicon(ファビコン) | L-Studio

  11. Pingback: The徒然★Re-Mix

  12. Pingback: 【暮らしデザイン工房】 〜丸善工業3代目(予定)の建築日誌〜

  13. Pingback: WackyPress

Leave a Reply

Your email address will not be published. Required fields are marked *