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

SPONSORED LINK

Pocket

ちょっと個人的なまとめ。いまさらですが。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ついているとかっこいいですよね。よろしければ使ってみてください。

■ 関連記事

ツイッターもやっています!

SPONSORED LINK

  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. はじめまして。
    ほぉー
    favikonだと、画像をアップロードすれば簡単に作れそうですね。

    ちょっと構成を考えて私のサイトでも紹介させてもらいたいと思います。

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

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

    • kaishin
    • November 3rd, 2008

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

  7. 大変分かりやすく、
    手順に従って、
    すぐにファビコンを作る事ができました。

    早速、設置します!

  1. January 16th, 2009
  2. January 29th, 2009
  3. March 24th, 2009
    Trackback from : sabotem×web
  4. July 18th, 2009
  5. November 3rd, 2009
    Trackback from : The徒然★Re-Mix
  6. December 3rd, 2009
  7. February 4th, 2010
    Trackback from : WackyPress