ファビコン作成 – ICO・PNG・manifest

ロゴを選ぶだけで、ブラウザのタブ、スマホのホーム画面、Androidに必要なアイコンとsite.webmanifestを1つのZIPにまとめます。画像は端末の外に出ません。

  • PNG → ICO
  • 最大 ⁦10 MB⁩
  • 登録不要
  • 端末内で動作

36 ファビコン作成

  1. 01 選ぶ
  2. 02 処理
  3. 03 保存

端末の中で処理 · アップロードなし

PNG

選択したファイル

サイズ: 準備完了

処理状況

ファイルを読み込み中

結果

できました。

0個のファイルをZIPに

0 Bサーバーに送ったあなたのデータ: 0 バイト · 端末の中で処理しました0 の理由: このページのセキュリティ規則が、ブラウザーの段階でデータの送信を防ぎます。処理はすべてこのタブの中で行われます。 CSP · connect-src 'none' · form-action 'none'

変換できませんでした。

背景
形

極細の線は16ピクセルで消えることがあります。小さなサイズにはシンプルなマークが向いています。

  • 処理はこのタブの中、あなたの端末で行われます。
  • ICO、PNG、manifest、HTMLを1つのZIPで。
  • ファイルがサーバーに送られることはありません。タブを閉じるとすべて消えます。

まずロゴを選んでください

処理の流れ

  1. ファイルを読み込み中
  2. アイコンを描画中
  3. ファイルを準備中

01

Webサイトに必要なファビコンのファイルは？

ファビコンは、ブラウザのタブやブックマーク、検索結果でサイト名の横に表示される小さなアイコンです。ファイル1つでは足りません。新旧のブラウザはfavicon.icoを、iPhoneやiPadはホーム画面に追加されたときの180ピクセルのapple-touch-iconを、Androidやインストール可能なWebアプリは192・512ピクセルのアイコンとsite.webmanifestを探します。

難しいのは小さなサイズです。16ピクセルに縮めたロゴはぼやけたり、細部が消えたりします。また、iPhoneのホーム画面では透明部分が黒く表示されるため、apple-touch-iconには塗りつぶした背景が必要です。

このツールはロゴ（PNG、SVG、JPG、WEBP）を一度1024ピクセルで描き、半分ずつ縮小して各サイズを作るため、小さなアイコンもくっきりします。背景色、余白、四角・角丸・円の形を選べ、タブとホーム画面のプレビューで確認できます。favicon.ico、PNG、site.webmanifest、ページに貼るHTMLを1つのZIPにまとめます。画像の処理はブラウザ内で行われます。

02

3ステップでファビコン一式を作成

  1. ロゴを選ぶ: 正方形またはそれに近いPNG、SVG、JPG、WEBP（10 MBまで）を選びます。SVGか512ピクセル以上のPNGがおすすめです。

  2. 見た目を調整: 背景を透明のままにするか色を選び、余白と形（四角・角丸・円）を決めます。プレビューはすぐに更新されます。

  3. ZIPを保存: 「ファビコン一式を作成」ですべてのファイルを1つのZIPで保存。ファイルをサイトのルートフォルダに置き、HTMLをページの<head>に貼り付けます。

03

こんな人に役立ちます

  • Webサイト・ブログ: 新しいサイトのタブやブックマーク用アイコンを用意する。

  • ネットショップ: ショップのロゴを、タブ、検索結果、ホーム画面に合うサイズにする。

  • Webアプリ: インストール可能なWebアプリ（PWA）用の192・512ピクセルのアイコンとmanifestを作る。

  • 制作会社・デザイナー: クライアントのロゴから、ファビコン一式を数分で納品する。

  • 開発者: プロジェクトに入れるファイルと<head>用のHTMLをすぐに用意する。

  • 個人サイト: ポートフォリオや履歴書サイトにイニシャルのアイコンを付ける。

04

サイズ・品質・上限

  • 作成されるファイル: favicon.ico（16・32・48ピクセル）、favicon-16x16.png、favicon-32x32.png、apple-touch-icon.png（180ピクセル）、android-chrome-192x192.png、android-chrome-512x512.png、site.webmanifest、HTML。SVGを指定した場合はfavicon.svgも入ります。

  • くっきりさ: まず1024ピクセルで描き、半分ずつ段階的に縮めるため、一度に縮めるよりも小さなアイコンが鮮明になります。それでも極細の線は16ピクセルで消えることがあり、小さなサイズにはシンプルなマークが向いています。

  • 透明: PNGとICOは透明を保ちます。apple-touch-iconはiPhoneで黒くならないよう常に不透明で、背景色を選ばない場合は白になります。

  • 元画像: 正方形でない画像は切り抜かずに中央に配置します。256ピクセル未満の画像では大きなアイコンがぼやけることがあり、ツールがお知らせします。

  • ICO形式: ICO内の画像はPNGとして保存されます。現在のすべてのブラウザとVista以降のWindowsが読める形式です。

  • プライバシーと上限: 画像は10 MBまで。ロゴはアップロードも保存もされず、すべてのファイルはブラウザ内で作られます。

05

プライバシーと自動削除

このツールはファイルをサーバーに送りません。処理はすべてお使いのブラウザ、つまりあなたの端末の中で行われます。ページには、ファイルの内容を外部に送れないよう技術的に制限するセキュリティポリシー（Content-Security-Policy）が設定されており、このページでは分析や広告のスクリプトは動作しません。

結果のファイルも端末の中で作られ、ダウンロードするのはあなただけです。タブを閉じるか「新しいファイル」を選ぶと、ブラウザのメモリから消えます。この処理について、ファイル名や内容の記録がサーバーに残ることはありません。

詳しくはプライバシーポリシーをご覧ください

06

よくある質問

ファビコンのサイズは？

タブとブックマーク用に16・32ピクセル（favicon.icoには48も）、iPhoneのホーム画面用に180ピクセルのapple-touch-icon、Androidとインストール可能なWebアプリ用に192・512ピクセルです。ツールはすべてを一度に作ります。

サイトにファビコンを設定するには？

ZIPのファイルをサイトのルートフォルダ（ドメイン直下）にアップロードし、ツールのHTMLをページの<head>に貼り付けます。WordPressなどでは、512ピクセルのPNGを「サイトアイコン」に設定するだけでも大丈夫です。

SVGのロゴからファビコンを作れますか？

はい。SVGが最もきれいに仕上がり、各サイズをベクターから描きます。さらにfavicon.svgも追加するので、対応ブラウザではどの画面でもくっきり表示されます。

iPhoneでアイコンの背景が黒くなるのはなぜ？

iOSはホーム画面のアイコンで透明をサポートせず、透明部分を黒く表示します。そのためツールはapple-touch-iconを常に不透明にし、背景を選ばない場合は白にします。ブランドに合う色を選ぶこともできます。

変更したのに古いアイコンが表示されるのはなぜ？

ブラウザはファビコンを長くキャッシュします。強制再読み込み（Ctrl+F5、Macでは⌘+Shift+R）をするか、シークレットウィンドウで開くか、HTMLのファイル名に?v=2などを付けてください。

ロゴはサーバーにアップロードされますか？

いいえ。画像はブラウザ内で描かれ、すべてのファイルもそこで作られます。このページには外部への接続を技術的に禁止するセキュリティポリシーがあるので、未発表のブランドにも安心して使えます。

もう1つ変換する？

ドラッグ・ドロップ・変換ファイルを選択