コンテンツにスキップ
ToolsMinify logo
ジェネレーターツール

favicon ジェネレーター

ブラウザでロゴやアイコンを favicon PNG フルパックに - アカウント・アップロード不要。1画像から 16、32、48、180 (Apple touch)、192、512 px PNG、ZIP と HTML link タグ付き。Canvas リサイズは端末内でブランドマークは端末外に出ません。ソースが巨大なら Image…

favicon ジェネレーターについて

ブラウザでロゴやアイコンを favicon PNG フルパックに - アカウント・アップロード不要。1画像から 16、32、48、180 (Apple touch)、192、512 px PNG、ZIP と HTML link タグ付き。Canvas リサイズは端末内でブランドマークは端末外に出ません。ソースが巨大なら Image Compressor、SNS プレビューも必要なら Open Graph Tag Generator。

favicon ジェネレーターの使い方

  1. JPG、PNG、WebP、GIF、BMP、SVG (最大 8 MB) をドロップまたは画像貼り付け。ローカル読み込み - アップロードなし。
  2. 6 PNG プレビュー待機: 16、32、48、apple-touch 180、Android 192、512。非正方形は透過パディングで fit。
  3. 単一 PNG または ZIP パック(HTML link タグ入りテキストファイル付き)をダウンロード。
  4. HTML スニペットを document head にコピーし PNG を対応パス(通常サイトルート)に配置。
  5. DevTools Network で生成時リクエストなしを確認。

favicon ジェネレーターの例

新サイト用正方形ロゴ

1024 px PNG ロゴをドロップ。ZIP をダウンロードし /public に展開、HTML link タグを root layout head に貼る。

パディング付き横長ワードマーク

横長ワードマークは各正方形内中央配置、透過余白でタブが文字を不自然に切らない。

Apple touch icon のみ

パック生成後、他サイズが揃っていて iOS ホーム画面用だけ必要なら apple-touch-icon.png (180x180) のみダウンロード。

Chrome PWA アイコン

ZIP 後、web app manifest の icons 配列に android-chrome-192x192.png と android-chrome-512x512.png を使用。

先に圧縮してから favicon

ソースが数 MB のロゴ写真なら Image Compressor で小 PNG を取得してから Favicon Generator を開く。

一般的な使用例

  • 新しい Next.js や静的サイト向け favicon 一式
  • iOS ホーム画面ブックマーク用 Apple touch icon
  • 1ロゴから Android Chrome / PWA サイズ
  • アップロード型デザインツールなしでブランドアイコン更新
  • PNG パックと一緒に HTML link タグをコピー

favicon ジェネレーターに関するよくある質問

ロゴから favicon を作るには?
ロゴをドロップまたは貼り、6 PNG サイズを待ち、1ファイルまたは ZIP をダウンロード。すべてブラウザ内 - アップロードなし。
含まれるサイズは?
16x16、32x32、48x48、180x180 (apple-touch-icon.png)、192x192、512x512 PNG - 一般的なタブ、Windows、iOS、Android サイズ。
ロゴが正方形でない場合は?
各正方形内に object-fit contain で fit、透過パディング。全面アイコン風ならアップロード前に正方形クロップ。
ZIP に HTML は含まれる?
はい。ZIP に head 用 link タグの小テキストファイル。ダウンロードなしでもページから同スニペットをコピー可能。
SVG を favicon ソースにできる?
ブラウザが decode できる SVG をソースに可。出力は常に PNG サイズ(タブ/ホーム画面互換)。ベクタータブ対応ブラウザ向け SVG favicon は別途プロジェクトに保持。
ロゴはサーバーにアップロードされる?
いいえ。FileReader、Canvas、ZIP 構築はこのタブ内のみ。未公開ブランドに安全。生成中 DevTools Network で確認。