onul.works

ファビコン生成

画像やロゴをアップロードして、複数サイズのPNGファビコンとfavicon.icoを生成します。

◴ データ非保存 ⌁ 無料

コンセプト

ファビコンはブラウザタブ・ブックマーク・PWAの識別アイコン

faviconは単なる画像サンプルではなく、タブ表示・ブックマーク・ホーム画面起動まで含めた導入資産として扱う必要があります。

ブラウザタブでは16〜48px、ブックマークやPWAでは180px/192px/512px PNGが一般的で、用途別サイズを揃える必要があります。

透明背景とダークモードでのコントラストを確認し、実際のタブやブックマーク表示状態で読みやすさを検証してから採用します。

どこで使うか

favicon.ico、manifest、link rel="icon"/"apple-touch-icon"の組み合わせを整理し、タブ・ブックマーク・ホーム画面を一括準備する場面。

推奨サイズ

16px・32px・48px・180px・192px・512px PNGに加え、必要に応じてICOやSVGを用意すると互換性が上がります。

実運用前チェック

透過背景、ダークモード視認性、hrefのbase path、実ページタイトル表示の確認を環境で再現して行います。

アイコンプレビューだけで終わらず、実際にブラウザUIでの表示が意図どおりになること（タブ・ブックマーク・PWA画面）まで確認してください。

元画像
ファビコン結果
生成されたファビコンのプレビューがここに表示されます。

使い方

  1. 1 正方形に近い画像を選択またはドロップします。
  2. 2 ファビコン生成ボタンを押して、複数のPNGサイズとfavicon.icoを作成します。
  3. 3 必要なファイルを個別にダウンロードするかZIPで保存し、配布先に合わせてHTMLリンクコードの相対パスまたはベースパスを確認します。

主な使用例

  • ファビコンPNG/ICO一式を生成
  • ロゴ画像からファビコンを作成
  • Apple Touch Icon候補を作成
  • ファビコン用HTMLリンクコードを準備

よくある質問

ICOファイルも生成できますか？

はい。V2では複数サイズのPNGファビコン、favicon.ico、HTMLリンクコードを生成し、一式をZIPでダウンロードできます。HTML例は既定で相対パスを使うため、サブパスに配置する場合は各hrefの前にベースパスを追加してください。既定はブラウザ生成で、サーバー高品質生成ではCloud Runのリサイズを使います。

関連ワークフロー

ファビコン生成サイトアイコンに使う画像やロゴを、まず複数サイズのファビコンに変換します。 → Base64を画像に作業中に受け取ったBase64画像があれば、デコードして元画像と一致するか確認します。 → 画像圧縮アイコンと一緒に使う画像アセットを圧縮し、配布サイズを抑えます。