本文へスキップ

ファビコン生成ツール

画像をアップロードして様々なサイズのファビコンを生成するツールです。

💡 ファビコンとは？

ウェブサイトのブラウザタブやブックマークに表示される小さなアイコンです。

📋 生成されるサイズ

  • 16x16, 32x32 - 基本ブラウザファビコン
  • 180x180 - Apple Touch Icon (iOS)
  • 192x192, 512x512 - Android/PWA

🎨 推奨事項

  • 正方形画像使用 (1:1比率)
  • シンプルなデザイン (小さく表示されることを考慮)
  • 高コントラスト色 (可読性向上)
  • PNG形式推奨 (透明背景可能)

📌 HTML使用法

<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/favicon-180x180.png">

生成されるサイズ​

サイズ用途
16x16基本ブラウザファビコン
32x32標準ファビコン
48x48高解像度ブラウザ
64x64Windowsタイル
128x128iOSアプリアイコン
180x180Apple Touch Icon
192x192Android/Chrome
512x512PWAスプラッシュ

HTML使用方法​

<!-- 基本ファビコン -->
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">

<!-- Apple -->
<link rel="apple-touch-icon" sizes="180x180" href="/favicon-180x180.png">

<!-- Android/Chrome -->
<link rel="icon" type="image/png" sizes="192x192" href="/favicon-192x192.png">

<!-- PWA -->
<link rel="icon" type="image/png" sizes="512x512" href="/favicon-512x512.png">

デザイン推奨事項​

Good​

  • 正方形の画像
  • シンプルなデザイン
  • 高コントラストの色
  • PNG形式（透過可能）

Avoid​

  • 複雑なディテール
  • 長いテキスト
  • 低コントラストの色
  • 横長の画像

活用のヒント​

ヒント1: 元画像​

最低512x512px以上の高解像度画像を使用してください。

ヒント2: テスト​

複数のブラウザで実際にテストしてみてください。

ヒント3: ブランディング​

会社のロゴやブランドアイコンを使用してください。

ファイル構造​

生成されたファビコンをウェブサイトのルートに配置：

/
├── favicon-16x16.png
├── favicon-32x32.png
├── favicon-48x48.png
├── favicon-180x180.png
├── favicon-192x192.png
└── favicon-512x512.png

よくある質問​

Q: ICOファイルも生成されますか？​

A: 現在はPNGのみサポートしています。ICOはPNGを変換して使用してください。

Q: 透明背景は可能ですか？​

A: PNGファイルなので透明背景が可能です。

Q: すべてのサイズが必要ですか？​

A: 基本的に16x16、32x32、180x180があれば十分です。

プライバシー​

  • すべての処理がブラウザ内で完結
  • 画像がサーバーに送信されることはありません
  • 安全に利用できます

💬 このツールは役に立ちましたか？​

ご意見やご提案がございましたら、お気軽にお送りください！