ファビコン生成ツール
1枚の画像から、favicon.ico、各サイズのPNG、Apple Touch Icon、Androidアイコン、Webマニフェスト、HTMLタグまでファビコン一式を作成できます。
ブラウザー内でローカルに処理されます。ファイルはアップロードされません。
このツールでできること
ロゴやアイコンをアップロードするだけで、モダンなWebサイトに必要なものがまとめて揃います。favicon-16x16.png、favicon-32x32.png、favicon-48x48.png、複数サイズを含む本物のfavicon.ico、180x180のapple-touch-icon.png、192x192と512x512のAndroid Chromeアイコン、そのまま貼り付けられるsite.webmanifest、対応するHTMLのlinkタグを出力します。
余白の追加、正方形・角丸・円形の形状選択、背景色の指定や透過の維持ができます。各サイズは、最終描画の前に半分ずつ繰り返し縮小する段階的なリサイズで生成されるため、一度に大きく縮小するよりも小さなアイコンがくっきり仕上がります。サイズごとにプレビューとダウンロードボタンがあり、ZIPにはすべてのファイルと、配置場所を説明するsnippet.txtがまとめられます。
ICOファイルは、16・32・48ピクセルのPNG画像を埋め込む形式で、ブラウザー上で組み立てられます。これは現行のすべてのブラウザーとWindowsが読み取れる形式です。画像はアップロードされず、お使いのデバイス上で読み込まれ、キャンバスに描画されます。
使い方
- 1PNG、SVG、JPG、WebPのいずれかの画像を追加します。512x512 px以上の正方形の画像がおすすめです。
- 2形状、余白、背景(透過または単色)を選びます。各サイズのプレビューが更新されます。
- 3Webマニフェストに使うアプリ名とテーマカラーを入力します。
- 4個別のファイルをダウンロードするか、ZIPをまとめてダウンロードします。
- 5ファイルをサイトのルートに配置し、HTMLスニペットをページの<head>に貼り付けます。
対応形式
入力:PNG、SVG、JPG/JPEG、WebP。出力:PNG、ICO(16/32/48 px)、site.webmanifest、テキストスニペット(ZIPにまとめて出力)。
プライバシー
このツールはブラウザー上で動作します。入力されたデータはお使いのデバイス上で処理され、当社のサーバーには送信されません。
制限事項
- 正方形でない画像は、引き伸ばさずに正方形の中に収めるため、アイコンに空白の帯ができます。事前にトリミングすると、より良い結果になります。
- 512 pxより小さい画像は、大きなアイコンのために拡大されるため、ぼやけて見えます。SVGは先に高解像度でラスタライズされるため、鮮明なままです。
- 16 pxのアイコンは非常に小さいため、細かいロゴは読み取れるように簡略化したバージョンが必要になることがよくあります。
- ベクター形式のfavicon.svg、マスカブル(セーフゾーン対応)アイコン、Windowsタイル画像は生成されません。
よくある質問
本当に必要なファイルはどれですか?
ほとんどのサイトでは、ルートに置くfavicon.ico、32x32のPNG、apple-touch-icon.png(180x180)、Webマニフェストから参照するAndroid用の192/512アイコンがあれば十分です。パッケージにはこれらすべてが含まれています。
ファビコンを差し替えたのに更新されないのはなぜですか?
ブラウザーはファビコンを強力にキャッシュします。スーパーリロードを行うか、サイトデータを消去するか、/favicon.ico?v=2のようなバージョン付きクエリ文字列をlinkタグに追加してください。
ICOファイルは本当に複数サイズ入りのアイコンですか?
はい。標準的なICOコンテナの中に、PNG圧縮された3つの画像(16、32、48 px)が入っているため、ファビコンを表示する場面ごとに最適なサイズが選ばれます。
写真やJPGも使えますか?
使えますが、写真は16 pxではほとんど判別できません。シルエットがはっきりしたロゴやシンプルな図柄が向いています。JPGには透過がないため、背景色を選ぶか、元画像の背景のまま使うことになります。
関連ツール
OGP画像ジェネレーター
タイトル、ロゴ、背景を組み合わせて1200x630のSNSシェア用画像を作成し、PNGでダウンロードできます。すべてブラウザー内で処理されます。
SVG最適化ツール
SVGOでSVGファイルを軽量化します。メタデータや不要なデータを削除し、精度を調整し、IDやviewBoxを保持したまま、最適化の前後を比較できます。
カラーパレット生成ツール
基準色から配色パターンを生成し、気に入った色をロックして、WCAGコントラストを確認できます。CSS、Tailwind、JSON、PNGでエクスポートも可能です。
画像からカラーパレット抽出
あらゆる画像から主要な色を抽出し、16進コードをコピーできます。スポイトで正確なピクセルの色を拾い、パレットとしてエクスポートも可能です。