Favicon Generator

Generate favicon.ico and mobile icons from transparent PNGs or other images. Processed entirely in your browser for maximum security.

Drag & drop image, or

Select File

HTML Example (Paste into <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">

* Extract the downloaded ZIP and upload all files to the same folder as your index.php.

Advanced Client-Side Processing

By leveraging the Canvas API and JSZip, this tool handles image validation, resizing, and ZIP compression entirely within your browser. It ensures maximum privacy as no image data is sent to the server, while simultaneously generating a PWA-ready webmanifest.

How it works

Securely loads the selected or dropped image locally using the FileReader API.
Batch-resizes the image into optimal resolutions for PC, iOS, and Android using the Canvas API.
Packages multiple generated PNGs and a dynamically built site.webmanifest into a ZIP archive in-memory via JSZip.
Following asynchronous point consumption via API, it triggers an instant ZIP download and generates the required HTML boilerplate.

Check out our other tools

Share this tool with friends

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

ツール一覧