Home > ライフハック > favicon.ico（ファビコン）の作り方

favicon.ico（ファビコン）の作り方

2008-02-11 (Mon) 14:14
ライフハック

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

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

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

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

favicon.ico Generator

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

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

こちらは日本語で安心。

Favicon Editor

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

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

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

favikon

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

Favicon Editor

こちらもさくさく作れて便利（2009年2月に追記）。

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ついているとかっこいいですよね。よろしければ使ってみてください。

■ 関連記事

こちらもあわせてどうぞ

Twitterもやっています！

Posted on February 11th, 2008

Comments:8

stakilog 08-02-11 (Mon) 18:30

favicon のこと

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

Cha's Bar 2.0 08-02-11 (Mon) 19:46

やっぱり Favicon が欲しい！

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

HUBLOG 08-02-12 (Tue) 9:13

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

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

takai 08-02-12 (Tue) 15:14

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

むっちゃん＠BiNDwebマニュアル 08-02-14 (Thu) 9:32

はじめまして。
ほぉー
favikonだと、画像をアップロードすれば簡単に作れそうですね。

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

CSS Lecture 08-07-31 (Thu) 0:06

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

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

kaishin 08-11-03 (Mon) 11:11

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

tigpig 09-11-26 (Thu) 9:28

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

早速、設置します！

Trackbacks:7

Trackback URL for this entry: http://www.ideaxidea.com/archives/2008/02/faviconico.html/trackback
Listed below are links to weblogs that reference: favicon.ico（ファビコン）の作り方 from IDEA*IDEA ～百式管理人のライフハックブログ

pingback from パソコンやインターネットのこと » Blog Archive » Favicon（?）－お気に入りなどで表示されるアイコン 09-01-16 (Fri) 9:37

[...] ■ Favicon.ico（ファビコン）の作り方（百式管理人のライフハックブログ） http://www.ideaxidea.com/archives/2008/02/faviconico.html [...]

pingback from Movable Type から WordPress への移行メモ | 東京ヘッドターミナル 09-01-29 (Thu) 17:29

[...] 下記のWebツールなどでサクッと設置。 favicon.ico（ファビコン）の作り方 – IDEA*IDEA ～百式管理人のライフハックブログ～ [...]

trackback from sabotem×web 09-03-24 (Tue) 6:37