ツールを検索Ctrl K
日本語

ファビコン生成

画像やテキストから favicon.ico、アプリアイコン、site.webmanifest を一括で作成します。背景を透明にすることもできます。

アップロードなし・すべての処理はこのブラウザで実行

入力とオプション

入力方法
背景の処理
#FFFFFF
12%
アイコンの形
6%
アプリ情報 (site.webmanifest)

iOSは透明部分を黒で表示するため、apple-touch-icon にはこの背景色を塗ります。

プレビュー

市松模様＝透明部分

画像を選択するとここに表示されます。

My Website
https://example.com
My Website

ダウンロード

  • favicon.ico
  • favicon-16x16.png
  • favicon-32x32.png
  • apple-touch-icon.png
  • android-chrome-192x192.png
  • android-chrome-512x512.png
  • site.webmanifest

<head> に貼り付けるコード

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<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="manifest" href="/site.webmanifest">

favicon.ico をサイトのルートに置くと、ブラウザが自動的に読み込みます。

よくある質問

画像はサーバーにアップロードされますか？

いいえ。画像の読み込み、背景削除、サイズ変更、ZIP作成まで、すべてこのブラウザ内で処理します。

単色の背景削除はどのように動作しますか？

選択した色に近いピクセルを透明にします。初期設定では端につながった領域のみを削除するため、ロゴ内部の同じ色は残ります。許容範囲を上げると、より広い範囲の色が削除されます。

どのファイルが作成されますか？

favicon.ico（16・32・48px）、favicon-16x16.png、favicon-32x32.png、apple-touch-icon.png（180px）、android-chrome-192x192.png、android-chrome-512x512.png、site.webmanifest が作成されます。

ファイルはどこに置けばよいですか？

展開してサイトのルートに置き、表示されたコードを <head> 内に貼り付けてください。favicon.ico はルートにあればブラウザが自動的に見つけます。

関連ツール

PNG背景削除単色の背景削除やAIモデルで透過PNGを作成W×H画像リサイズ縦横比を保ったまま複数サイズを同時に書き出しWEBP画像形式変換PNG・JPG・WebP・AVIF を相互に変換