favicon.ico（ファビコン）の作り方
February 11, 2008 2:14 PM written by Gen Taguchi

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

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

■ オンラインで作る（エディター付き）

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

• favicon.ico Generator



2.0っぽい作りが良いかも。慣れている人だと便利かな。画像をアップしてそれを編集することもできます。

• Favicon Japan!! -ファビコン作成方法-

こちらは日本語で安心。

• Favicon Editor

こちらもよろしければ。画像をアップする機能もついていますね。

■ オンラインで作る（エディターなし）

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

• favikon



個人的には最強。シンプルで使いやすいっす。画像をアップしたあとに微調整できます。

• Favicon Japan!! -ファビコン作成方法-



こちらはアップしたらそのまま変換してくれます。微調整とかはなしですね。

• FavIcon from Pics -- how to create a favicon.ico for your website

こちらも定番。たまに落ちてますが。

• Dynamic Drive- FavIcon Generator

これも上とほぼ同じ。

• Favicon Generator | Make Free Favicons | Create a Favicon.ico Design

こっちも同じ。

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

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

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

• @icon変換 - 画像とアイコンの相互変換ツール。favicon作成にも。

■ faviconの設置方法

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

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

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

■ 関連記事

• これが決定版じゃね？とってもお手軽なFavicon作成ツール『Favikon』 | 100SHIKI.COM
• 百式ブログシリーズにFAVICONがついた、の巻 | IDEA*IDEA
• Faviconをつくるときに参考にしたいデザイン＆ツールいろいろ | POP*POP
• 百式ブログシリーズにFAVICONがついた、の巻 | IDEA*IDEA
• ブラウザ上で簡単にFaviconが作れる『favicon.cc』 | POP*POP

Info: Lifehacks | 固定リンク | コメント (2) | トラックバック (3) | ↑