Favicon作成

Favicon2026年版。透過PNGなどの画像から、ブラウザ用favicon.icoやスマホ用アイコンを一括生成します。ブラウザ上で完結するため安全です。

画像をドラッグ&ドロップ、または
ファイルを選択

HTML記述例(head内に貼り付けてください)
            
<!-- ブラウザのUIカラーをOS設定に合わせる -->
<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#000000" media="(prefers-color-scheme: dark)">

<!-- Favicon設定 -->
<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="manifest" href="/site.webmanifest">
<link rel="shortcut icon" href="/favicon.ico">
<meta name="msapplication-TileColor" content="#ffffff">

※ダウンロードしたZIPを解凍し、すべてのファイルを index.php と同じフォルダにアップロードしてください。

高度なクライアントサイド処理

本ツールはCanvas APIとJSZipを活用し、画像の検証・リサイズ・ZIP圧縮のすべてをブラウザ上で完結させます。サーバーへ画像データが送信されないため安全であり、PWA対応のwebmanifestも同時に自動生成します。

仕組みと技術要素

  1. FileReader APIにより、選択またはドロップされた画像をローカル環境で安全に読み込みます。
  2. Canvas API(2Dコンテキスト)を利用し、PC・iOS・Android各デバイスに最適な解像度へ一括リサイズします。
  3. JSZipを用いて、生成された複数のPNG群と動的生成された site.webmanifest をメモリ上でZIPアーカイブ化します。
  4. APIによる非同期のポイント決済完了後、パッケージ化されたZIPの即時ダウンロードとhead用HTMLコードを出力します。

他にも便利なツールがあります

このツールを友達に教える

🛠️ IVYWE企画開発のPortalサイトとおすすめサービス