スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
RSSフィード twitter Google Bookmarks スポンサーサイトをはてなブックマークに登録 はてなブックマーク
タグ /

favicin(ファビコン)の作り方

favicin(ファビコン)の作り方

アドレスバー横に表示されるファビコン(favicon.ico)。

今更ですが、案外まだ需要あるかもと思いつつ、エントリーを立ててみました。ファビコンの作成方法を一通り記しておきますので、ご興味のある方はどうぞ。

favicin(ファビコン)とは?

ファビコンとは、上にある画像にもあるように、「アドレスバー横」にあるアイコンや「お気に入り」に入れた時に表示されるアイコンのことです。

なお、画像サイズは16×16pxで、ファイル形式(拡張子)は「.ico」になります。

ファビコンはサイトオリジナリティの第一歩なので、

未設定の方はぜひ使って頂ければと思います。

favicin(ファビコン)の作り方 その一

一つ目はフォトショップやGIMPなどの画像編集ソフトでファビコンの元となる画像を作り、変換ツールで「.ico」に変換する方法です。私も普段この方法をとりますが、手っ取り早くて良いです。

元画像を画像編集ソフトで作る際には、16×16だと作業がしにくいので、64×64(4倍)で作成し、作成後に縮小するのがお勧めですね。保存形式はpng,gif,jpegのいずれかでOKです。

ファビコンの元画像(png,gif,jpeg)を作成したら、以下のツールで変換します。

Source FAVICONメーカー 16×16に自動補正

Source FavIcon from Pics 16×16に自動補正

Source Favicon Generator

↑いずれの変換ツールも似たような操作方法ですが、画像をアップロード→「変換」→「Favicon作成」という流れです。後は出来あがったアイコンをダウンロードすれば完了です。

「その一」の方法は元画像を作れる人には簡単な方法ですね。

favicin(ファビコン)の作り方 その二

ファビコンを作成する専用のジェネレータを使います。

Source favicon.cc

右のカラーピッカーで色を選択し、キャンバスに描いていくというもの。画像編集ソフトを使うことなく作成することが出来ます。

最初からやり直したい場合は、左サイドの「Create New Favicon」で初めからやり直すことが出来ます。

favicon.cc

リアルタイムでアドレスバーや画面下にプレビューが出るのは、

実によく出来ているな、と感じます。

favicon.cc

作業が終了したら画面下の「Download Favicon」をクリックすれば完了です。

他にはこういったサイトもあります。ご参考程度にどうぞ。

Source 256pixels

favicin(ファビコン)の作り方 その三

ファビコン素材を配布しているサイトをダウンロードし、そのまま使う方法です。手間が掛からない分、オリジナリティに欠けるかもしれません。

以下のサイトでファビコン素材が配られています。

Source free favicon

28000種以上のフリーファビコン配布サイト。画面上部に「Business Favicons」「Flag Favicons」「Misc Favicon」といったメニューからファビコンを見ることが出来ます。

free favicon

Source ファビコン工房

ファビコン工房

favicin(ファビコン)の設置方法

ダウンロードが終わったら、次はファビコンをサイトに設置します。

ファビコンを任意の場所(サーバー)にアップロードしておいてください。

headタグ内(metaタグ下あたり)に以下のソースを記述します。

<link rel="shortcut icon" href="http://ドメイン/image/favicon.ico" />

この時、ファビコンをアップロードしたURLに書き換えて記述してくださいね。

それではまた。

■関連記事

HTMLや画像編集の手間を省く為の8つのツール

Webサイトの画像作りに猛烈に役立つ17のジェネレータ

ブログ背景の左右にツイッターリンクバナーを表示させるツール

関連記事

RSSフィード twitter Google Bookmarks favicin(ファビコン)の作り方をはてなブックマークに登録 はてなブックマーク
コメント一覧

むーさん

こんにちは!
ブログへのご訪問
ありがとうございました。

ファビコンはそのうち
使ってみたいと思っていたので、
この記事はとても参考になりそうです。

暇ができたら作ってみたいと思います^^

それではまたお邪魔させていただきます。

2010/05/17 Mon 07:40 | URL

コメントを残す


管理者にだけ表示を許可する

 | BLOG TOP | 

人気記事

スポンサードリンク

新着記事

プロフィール

日刊ウェブログ式を運営するナカタと申します。まだ開設して日も浅い拙いブログですが、どうぞよろしくお願いします。

リンク

LOOMICDESIGN

タグクラウド

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。