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

画像ファイルを選択して実行ボタンを押すだけでファビコンがお手軽に作成できます。

特徴は「透明色」や「半透明色」(不透明度)を維持したまま自動で画像を拡大縮小します。さらに「高品質な減色機能」も搭載していますので綺麗なファビコン(favicon.ico)を作成できます。

一般的な「GIF/PNG/JPEG/TIFF/BMP/ICO」ファイルの読み込みに対応しています。

※さらに高度なアイコンを作成する場合は「マルチアイコンの作成」をご利用ください。

...

このWebアプリケーションは「HTML5」「JavaScript」のみで動作しますので最新のブラウザがあればどなたでもご利用可能です。

画像の各種変換は「あなたのブラウザ」で実行します。ですのでサーバーにファイルをアップロードする事はありませんのでご安心して下さい。

目次

1. 使い方
2. 機能
3. 推奨ブラウザ
4. 動作確認
5. バージョン
6. FAQ
7. その他のWebアプリケーション
8. 運営者のブログ

[目次]

1. 使い方

最初の画面に戻るには「こちら」をクリックしてください。
※左上にある「ファビコンの作成」のバナーをクリックでも可能です。

1.1 画像ファイルを読み込む

ファイルを読み込むには画面左上にある「画像の読み込み」のボタンから行います。
※画面上にファイルをドロップすることで読み込むことも可能です。

1.2 ファビコンの作成

アイコンの「サイズ」と「色数」を任意に選択して実行ボタンを押します。すると、ブラウザの下部に「通知バー」が表示されますので、そちらからファビコンを保存します。保存方法は「画像ファイルの保存方法」をご確認ください。

[ファイル名]
ファイル名は「作成日」になっていますので各自で「favicon.ico」に名前を変更します。

[アイコンのサイズ]
「16x16」だけのファビコンが比較的に多いです。上級者の方は「32x32」「48x48」も含めます。

[アイコンの色数]
色数は任意です。お好きな色数にして下さい。
※PNG/ICOの半透明を維持する場合は「1670万色(32bit)」にする必要があります。

1.3 ファビコンの設定(HTML側の設定)

作成した「favicon.ico」をWebサーバーにファイル転送します。

そして、HTMLの<head></head>内に次のように記述します。

<head>
...
<link rel="shortcut icon" href="http://example.com/favicon.ico" type="image/vnd.microsoft.icon">
<link rel="icon" href="http://example.com/favicon.ico" type="image/vnd.microsoft.icon">
...
</head>

「http://example.com/」の部分は各自の環境に置き換えてくださいね。

[目次]

2. 機能

・ 画像からファビコンを作成する
・ 「透明/半透明」及び「高品質な減色」に対応
・ GIF/PNG/JPEG/TIFF/BMP/ICOファイルの読み込み ※1

※1 BMP/ICOファイルはWindowsでのみ確認しております。その他のOSでは読み込めない場合があります。TIFFファイルはIEまたはEdgeでのみ読み込み可能です。また、ファイルの読み込みはブラウザの標準機能を使用していますので、ブラウザによってはその他の画像ファイルも読み込める場合があります。

※ 高品質な拡大縮小は「画像の縮小」または「画像の拡大」をご利用ください。

[目次]

3. 推奨ブラウザ

Chrome / FireFoxの最新版

[目次]

4. 動作確認

・ Internet Explorer 11(32bit/64bit)
・ Microsoft Edge(32bit)
・ Chrome / FireFoxの最新版
※タブレット、スマートフォンは未対応です。
※HTML5に対応していればその他のブラウザも動作すると思います。

[目次]

5. バージョン

v1.00(2016年4月16日版)

[目次]

6. FAQ

Q1 ファビコンの中のアイコンの順番を変更できますか?

このツールでは常に「16x16、32x32、48x48」の順で保存されます。

順番の変更は姉妹ツールの「アイコンエディタ」で変更可能です。操作方法はファビコンを読み込んで「アイコンの管理」の「並び替え」でアイコンの順番を変更した後に「アイコンを作成」ボタンでアイコンを出力すれば完成です。

アイコンエディタはアイコンの編集のみならず、後からアイコンを追加する事も可能です。

[目次]

7. その他のWebアプリケーション

プチラボ
https://www.petitmonte.com/labo/
50種類以上の便利なツールを無料で公開しています。(フリーソフト)

[目次]

8. 運営者のブログ

プチモンテ
https://www.petitmonte.com/

スポンサーリンク