IT情報局
IT情報局 > デザイン関連サイト > ファビコン作成が5分でできる!favicon.icoの作り方・無料の作成ツールまとめ

ファビコン作成が5分でできる!favicon.icoの作り方・無料の作成ツールまとめ


ファビコン(お気に入りアイコン、サイトアイコン、faviconとも言う)は、特定のウェブサイトやウェブページに関連づけられたアイコンです。このファビコンは自分でオリジナルのものを作成することができ、お気に入りやデスクトップにそのサイトのショートカットを作る際に使用されます。

最近では、それぞれのサイトで独創的なファビコンを作ることでサイトを目立たせることが一般的になっています。




 

ファビコンを設定するには

ファビコンを設定する前にファビコンファイルを取得してくるか、自分で作成しなければなりません。ファビコンのサイズは、16×16もしくは32×32で作成し画像ファイルのフォーマットは拡張子が「ico」ファイルにしましょう。(例:foo.ico)

拡張子が「ico」ファイルを作成したら、サイトのルートディレクトリにおきます。ルートディレクトリは、ホームページを表示する際の一番上の階層のところです。

通常はトップページのindex.htmlなどがある場所と同じ場所です。ルートディレクトリにファビコンファイルをおいた場合は自動的にブラウザのアドレス欄に表示されます。ルートディレクトリ以外におきたい場合は、以下のタグを<head></head>内に記述します。

ファビコンのパスがルート(ホームページを表示する場所のトップ)で、ファビコン名がfavicon.icoの場合は以下のようになります。

※ サイトの表示時間に影響するので、画像はできるだけ小さいサイズにしておきましょう。

ファビコンを作成するには

ファビコンのファイルを自分で作成するには、WindowsやMaxで使える画像編集ツールやフリーソフトのアイコン作成ツールなどを使います。最近ではオンライン(Webページ上)で ファビコンを作れるサービスがたくさん提供されています。

一から自分でファビコンを作るのが難しい場合
ファビコンの画像デザインを一から作るのは難しいという方は、無料のファビコンファイルをダウンロードして それをベースとしてオリジナルのファビコンを作るのもいいでしょう。

無料のファビコン作成ツール

以下のサイトでは、無料でファビコンが作れるオンラインのサービスとファビコンのサンプルが見れたり無料でダウンロードできるサイトです。 是非自分のオリジナルファビコンを作成してみてください。

favicon.cc

普通の画像をアップロードして、アップロードした画像をファビコンとして編集できます。元画像をファビコン用に正方形にしたり、変形なしで編集するなどといった細かい制御をすることも可能です。画像を作成途中でも下段にファビコンのサイズのプレビュー画面が見れるので、実際のイメージがわかるようになっています。

http://www.favicon.cc

favikon

画像をアップロードしてファビコンを作れるサイトです。他のファビコン作成サイトと違うところはアップロード後に必要な部分だけを切り立ってファビコンにできるところです。アップロードする画像の一部だけをファビコンにしたいときなどに便利です。 ただし、できるのは画像の切り取りまでのようです。切り取った部分の画像をさらにサイト上で続けて編集するといったことはできないようです。

http://www.favikon.com

FavIcon Generator

海外のサイトですが、自分の持っているGIF, JPG, PNG, BMPなどの画像ファイルを16×16のファビコンのサイズのICOファイルに変換してくれます。オプションで32×32や64×64のファイルを入れ込むことも可能です。 アップロードするファイルは150KBまでのサイズ制限があります。 画像をファビコンサイズに変更するだけでアップロードしたファイルをブラウザ上で編集するなどはできないようです。

http://tools.dynamicdrive.com

x-icon editor

サイトがそのままアイコンエディタになっているので、ファビコンなどのアイコンを自分で自由に一からつくることが可能です。また、自分がすでにもっているアイコンをインポートして、編集することなども可能です。すでにファビコンファイルを持っている場合や、最初から自分で作りたい場合などにいいでしょう。

http://www.xiconeditor.com

Favicon & App Icon Generator

画像ファイルからファビコン用のサイズに変換してくれるツールです。各ブラウザで使用できるようにCSSが自動的に作成されます。また、下部にはキーワードでファビコンギャラリーを見ることもできます。こちらは、ダウンロードなどはできません。

http://favicon-generator.org

favicon.icoを作ろう!

PNG,GIF,JPG画像をアップロードして、16×16, 32×32, 64×64のアイコンに変換できるサービスです。 PNGアルファチャンネル対応(半透過対応)、BMPファイルの読み込みなどにも対応したようです。200kbまでのファイルサイズの制限があります。

https://ao-system.net/favicon/

FavIcon from pics

自分の画像をアップロードしてファビコンを作成するサイトです。変換後のオプションが豊富で、アニメーションや背景の透過、囲み線の追加などを加えることが可能です。海外サイトですが、シンプルな操作なので英語が苦手でもある程度は操作可能です。

http://favicon.htmlkit.com

favicon-generator.org

自分の画像を16×16のアイコンファイルに変換してくれる他、エディターでアイコン自体を自分でつくれます。さらに他の人が作ったファビコンをギャラリーとして展示しているので、作る際の参考になります。

http://favicon-generator.org

favicon.ico(ファビコン)変換ツール

自分の持っている画像をファビコンに変換してくれるサービスです。 シンプルに画像を選んで、サイズを選んで、「ファビコン作成」をするだけでファビコンが作れてしまう簡単ツールです。

http://favicon.7zone.org

online fav-icon creator

オンラインでアイコンがつくれるエディタです。カラーパレットがあらかじめ用意されているので簡単に色を選べます。自分のすでにもっている画像をアップロードして編集することも可能ですが、プレビューがないため確認しながら作成するのが少し不便です。

http://www.rw-designer.com/online_icon_maker.php

free favicon

動物や、ビジネス、国旗などのジャンルに分かれたファビコンのサンプルが豊富にあります。 一覧でアイコンが見れるので、探して気に入ったものがあればダウンロードするといった使い方ができます。

http://www.freefavicon.com

ファビコン作成の参考になるギャラリーサイト

favicon gallery.com

ファビコンのダウンロードはできませんが、いろいろなファビコンが一覧で見れるので作成する際の参考になります。 ファビコンの間隔を広く取っているのでとても見やすいです。ページ最下部にはカテゴリわけがあるので、自分の必要なカテゴリを選ぶことができます。

http://favicon-gallery.com

Yellowpipe Web Hosting

ファビコンだけではありませんが、テーマ別のアイコンと、テーマとは関係のない3500もの多くのアイコンをフリーでダウンロードできます。 一覧では見れないので、ダウンロードして自分の好みに近いものを探してください。

http://www.yellowpipe.com



キーワード