Favicon 製作工具

Favicon 2026年版。透過 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 相同的資料夾。

運作原理與技術要素

透過 FileReader API，在本機環境安全地讀取所選取或拖放的圖片。
使用 Canvas API（2D 環境），一次縮放至最適合 PC、iOS、Android 各裝置的解析度。
使用 JSZip，將生成的多個 PNG 檔案與動態產生的 site.webmanifest 於記憶體中打包成 ZIP 壓縮檔。
透過 API 完成非同步點數扣款後，立即輸出打包好的 ZIP 下載檔與 head 用 HTML 程式碼。

Favicon 製作工具

HTML 範例程式碼（請貼到 head 標籤內）

進階客戶端處理技術

運作原理與技術要素

還有其他實用工具

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