ななつーるず 自分用に作ったツールのうち、有益そうなものを置いています。

Favicon・Webアイコン一括作成ツール

1枚の画像から、Webサイトに必要なfavicon・Apple Touch Icon・Webアプリアイコンをまとめて作成できます。必要な場合だけsite.webmanifestも追加できます。画像はサーバーへ送信せず、このブラウザ内で処理します。

無料 広告なし 登録不要 ブラウザ内で処理 画像は外部へ送信しません ZIP一括保存対応 SVG・HEICには未対応 複数画像の一括処理には未対応

画像を読み込んでアイコンを設定する

PNG・JPEG・WebPに対応しています。設定中はプレビューだけを更新し、保存用ファイルは「ファイルを生成する」を押したときに作成します。

1. 元画像を選ぶ

画像をここへドロップ または、下のボタンから選択

最大30MB、最大2,500万画素、縦横それぞれ12,000pxまで。拡張子ではなく画像データを確認します。

2. 表示方法と余白を調整する

表示方法
8%

「全体を収める」で使用します。16×16でも形が分かる程度の余白がおすすめです。

3. 背景を設定する

背景の種類

4. プレビューのガイド

AppleやAndroid側で角丸・円形へ切り抜かれる場合があります。生成画像自体には角丸を付けません。

プレビュー

画像未選択
画像を選ぶとここに表示されます 透明部分は市松模様で確認できます。

5. 配置先とWebマニフェストを設定する

faviconやPNGを置く場所です。例：/、/images/、/assets/icons/。先頭と末尾の「/」は自動調整します。

使い方

元画像を選ぶ

PNG、JPEG、WebP画像を読み込みます。正方形でない画像も利用できます。

表示方法を調整する

画像全体を収めるか、キャンバスいっぱいに広げるかを選び、余白や背景色を調整します。

配置先と必要な設定を入力する

アイコンを配置するURLパスを入力し、必要な場合だけWebマニフェストを有効にします。

ファイルを生成する

favicon.ico、PNGアイコン、HTMLタグを生成します。Webマニフェストを有効にした場合はsite.webmanifestも含まれます。

保存して設置する

個別保存またはZIP一括保存を行い、生成されたHTMLタグをサイトのhead内へ追加します。

補足・注意事項

  • 小さなfaviconでは細かい文字や線が見えにくくなります。16×16プレビューで判別できる画像がおすすめです。
  • 余白が多すぎるとアイコンが小さく見えます。
  • AppleやAndroid側で角丸・円形へ切り抜かれる場合がありますが、生成画像自体には角丸を付けません。
  • JPEGは元々透明部分を持ちません。画像の外側にできる余白は透明にできます。
  • SVG・HEICには対応していません。
  • 画像はサーバーや外部APIへ送信されません。
  • ページを閉じると、読み込んだ画像や生成結果は失われます。
  • HTMLタグの配置先パスは、ご自身のサイト構成に合わせてください。site.webmanifestは必要な場合だけ有効にできます。
  • 既存のfaviconファイルを上書きする前にバックアップを取ってください。

よくある質問

正方形ではない画像も使えますか？

利用できます。画像全体を収めるか、正方形へ合わせて中央部分を切り取るかを選べます。

画像はサーバーへ送信されますか？

送信されません。対応ブラウザ上でJavaScriptとCanvasを使って処理します。

favicon.icoだけ作れますか？

生成後、各ファイルを個別に保存できます。

どの画像を使うのがおすすめですか？

正方形に近く、小さく表示しても形が分かりやすい画像がおすすめです。細かい文字や細い線は避けてください。

背景は透明のままにできますか？

PNGやWebPの透明部分を保持し、余白も透明にできます。単色背景を付けることもできます。

生成したファイルはどこへ置けばよいですか？

通常はWebサイトの公開フォルダへ配置します。サブフォルダへ置く場合は、ツール内の「画像を配置するURLパス」を実際の場所に合わせてください。