ファビコンとウェブアプリのアイコンをすぐに作成
素材ひとつから、現代のサイトに必要なファイルが一式そろいます。マルチ解像度の favicon.ico、ベクターの favicon.svg、Apple タッチアイコン、Android のランチャー用とマスカブルのアイコン、ウェブマニフェスト、そしてそれらをつなぐ head スニペットです。
生成するファイル
これを <head> に貼り付けてください
チェックしたファイルに合わせて内容が変わります。パックをサイトのルートに置き、このブロックを貼り付けてください。
<link rel="icon" href="/favicon.ico" sizes="32x32"> <link rel="icon" href="/favicon.svg" type="image/svg+xml"> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"> <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> <link rel="manifest" href="/site.webmanifest"> <meta name="theme-color" content="#3b82f6">
使い方
素材を選ぶ
絵文字、1〜3文字のテキスト、または自分のロゴ。ファイルを読み込んでも保留されるだけで、指示するまで何も生成されません。
土台を整える
形、単色かグラデーション、枠線、内側の余白。変更するたびにプレビューが描き直されます。
手で配置する
ドラッグで移動、ホイールでカーソル位置を中心にズーム、回転も可能。Ctrl+Z でどの操作も元に戻せます。
パックを配置する
ZIP をダウンロードしてサイトのルートに置き、head 用のスニペットを貼り付けます。
本物のマルチフレーム ICO
16・32・48ピクセルのフレームを、正しい AND マスク付きの32ビット BMP として書き出します。古い Windows のシェルや厳格なアイコンパーサーでも受け付けられます。
本物のスクワークル
角丸の土台はスーパー楕円で、iOS がアプリアイコンに使っているのと同じ曲線の系統です。角丸長方形で代用していません。
ベクターの favicon.svg
絵文字と文字のアイコンは本物のベクターとして書き出されるため、どのディスプレイでもダークモードでも鮮明なままです。
正しい iOS タッチアイコン
iOS はホーム画面の透明部分を黒く描くため、Apple のアイコンは選んだ色で塗りつぶして書き出します。
他のツールとつながる
できあがったアイコンを、ダウンロードして再アップロードすることなく、圧縮・切り抜き・変換・背景削除へそのまま送れます。
タブの外に出ない
ブラウザ内で動く Canvas と ZIP 書き出しだけです。アップロードも API も登録も不要で、オフラインでも動き続けます。
1024ピクセルで一度描き、正しく縮小
絵文字を16ピクセルの枠に直接描くことこそ、生成されたファビコンの多くがつぶれて見える原因です。カラー絵文字フォントは最小のビットマップ版に落ちてしまいます。FaviconBolt は1024ピクセルのマスターを一度だけ描き、そこからすべてのサイズを導きます。16ピクセルでは、その場で描く場合に比べて理想的な縮小との差が実測で87%小さくなりました。乗算済みアルファ上で行う任意のシャープ処理が、平均化で失われた輪郭のコントラストを補います。
100% ローカルで生成
ロゴがパソコンの外に出ることはありません。描画も ICO のバイナリも ZIP もページ内で組み立てられ、このページのイラストもインライン SVG なので、CDN から取得するものもありません。
ブラウザが実際に要求するファイルをすべて
ZIP をサイトのルートに展開し、生成された head のブロックを貼り付けるだけです。マニフェストには仮の名前ではなく、実際のサイト名・start URL・スコープが入るので、インストールの案内も正しく表示されます。
ICO のフレームは埋め込み PNG ではなく AND マスク付きの BMP、Apple のタッチアイコンは不透明で書き出し、Android のマスカブルアイコンは塗り足し込みなので、システムのマスクで二重に切り取られることがありません。
よくある質問
Qfavicon.ico の中には何が入っていますか？+
16x16、32x32、48x48 の3つのアイコンフレームが1つのバイナリにまとめられています。1ビットの AND マスク付き32ビット BMP として格納しており、これはあらゆるアイコン読み取り側が理解できる形式です。PNG 圧縮のフレームは Windows Vista 以降でしか対応しておらず、今も拒否するパーサーがあります。
QApple のタッチアイコンの背景が塗りつぶされているのはなぜですか？+
iOS はホーム画面のアイコンでアルファチャンネルを無視し、透明な部分を黒の上に合成します。選んだ色で塗りつぶすことが、インストール後の見え方を制御できる唯一の方法です。
Qマスカブルアイコンは何のためのものですか？+
Android は独自のマスクをかけ、ランチャーによって円だったりスクワークルだったりします。マスカブルアイコンは塗り足し込みで描き、絵柄を安全領域の内側に収めるため、システムが切り取ってもロゴが欠けません。
Qベクターの favicon.svg は手に入りますか？+
はい。絵文字と文字のモードでは本物のベクターです。SVG のロゴを読み込んだ場合もベクターのまま保たれます。ラスター画像の場合は512ピクセルの描画を SVG の中に埋め込み、その旨も明記します。JPEG をトレースしたかのように見せることはしません。
Qアイコンを手で配置できますか？+
キャンバスをドラッグして絵柄を動かし、ホイールでカーソルに向かってズームし、回転スライダーを使えます。矢印キーで微調整、プラスとマイナスでズーム、0 でリセット、Ctrl+Z で履歴を戻れます。Alt を押している間は元の画像が表示されます。
Qどこかにアップロードされますか？+
いいえ。ファイルの読み込み、描画、ZIP 化はすべてお使いのブラウザが行います。どの段階でもサーバーへの通信はなく、だからこそネットワークを切っても動き続けます。