favicon生成

元画像から32px、180px、192pxのPNGアイコンと、設置用HTMLタグを作成します。

アイコン元画像正方形に近い画像がおすすめです

Guide

このツールでできること

JPEG、PNG、WebPの元画像から32px、180px、192pxの正方形PNGを生成し、faviconとApple Touch Icon用のHTML例も作成します。

元画像が正方形でない場合は縦横比を維持せず正方形へ変形します。余白や切り抜きが必要なロゴは、先に正方形の素材へ整えてください。

How it works

処理の仕組み

画像をCanvasへ読み込み、32×32、180×180、192×192へ再描画してPNG Blobを生成します。HTML例には32px faviconと180px apple-touch-iconのlink要素を含めます。

Examples

具体的な使用例

ロゴから3サイズを作成

入力: 512×512pxの透過PNG
結果: favicon-32x32.png、icon-180x180.png、icon-192x192.png

小さい32px表示では細い文字が潰れやすいため、生成画像を原寸で確認し、必要なら記号だけの簡略版を元画像にします。

Cautions

利用時の注意点

ICO形式やWeb App Manifestは生成しないため、対応範囲に応じて別途用意してください。
ブラウザキャッシュで古いアイコンが残る場合があるため、公開確認ではキャッシュとHTMLのhrefを確認します。

Next step

結果の活用方法

headへlink要素を設置し、各画像URLが200で配信されることを確認します。
ダークテーマやホーム画面表示も考慮し、透明背景でも形が識別できるか確認します。

更新日：2026.07.29

Guides

特徴

3サイズをまとめて生成
各PNGを個別保存
設置用linkタグをコピー

Steps

使い方

正方形に近い画像を選択します。
faviconを生成します。
画像とHTMLタグを保存します。

PitaTools

活用例

Webサイトのfavicon作成
Apple Touch Icon作成
PWAアイコンの下書き

Example

入力例・結果例

入力例: 加工したい画像、色、サイズなどの設定
結果例: 3サイズをまとめて生成

ファイルや複数項目を使うツールでは、安全のためサンプルを自動選択せず利用イメージのみ表示します。

Privacy

プライバシーとデータ処理

公開中のツールはブラウザ完結です。入力した文章、URL、画像、PDF、ファイル、パスワードをPitaToolsのサーバーへ送信せず、端末内で処理します。

FAQ

よくある質問

ICO形式に対応していますか？

現在はブラウザで扱いやすいPNG形式を生成します。

Explore · 画像・デザイン

不具合報告・改善要望

「favicon生成」についてお気づきの点を運営者へお知らせください。

報告・要望を送る