ローカルアイコン工房
PNG・JPG・WebP・SVG を favicon.ico、アプリアイコン、PWA マニフェストに変換。ブラウザタブ、iOS ホーム画面、Android のインストールプロンプトでアイコンがどう見えるかを、ダウンロード前にプレビューできます。
またはクリックして選択 — PNG・JPG・WebP・SVG
ライブプレビュー
アクティブなタブ内の 16×16 ファビコン
180×180 の Apple Touch Icon
ホーム画面に追加
192×192 の PWA インストールアイコン
ピン留め済み
48×48 のピン留めショートカットタイル
アイコンファイルを公開ルートに置いたあと、サイトの <head> に貼り付けます。
ローンチ当日のために
OneImageTool は、ロゴ・アバター・マスコット・商品マークを、実際のウェブサイトやアプリに必要なアイコンファイルに変換します。画像をアップロードし、きれいな正方形に整え、ブラウザタブやモバイルのホーム画面でプレビューして、favicon.ico、PNG アイコン、Apple Touch Icon ファイル、PWA マニフェストを保存できます。ソースにまだ手入れが必要なら、まず正方形に切り抜くか、大きすぎる書き出しを圧縮するとよいでしょう — どちらのツールもブラウザ内で動作します。
すべてがブラウザ内で動作します。ソースが非公開のクライアントロゴ、未発表のアプリマーク、他のサーバーに送りたくない思いつきのアイデアであるときに、これが効いてきます。ライブのデバイスプレビューを見ながら、余白・背景色・角の丸みを調整できます。
同じソースからブラウザタブのアイコンを作成。大胆なマークには「切り抜き」を、ロゴにゆとりが必要なら余白付きの「合わせる」を使います。
従来のファビコン対応やデスクトップショートカットのために、複数サイズの ICO をダウンロード。小さいサイズは、タブのプレビューでくっきり保たれるよう調整されています。
ホーム画面やインストールプロンプト用に、より大きな PNG サイズを生成。パックには設定済みのウェブマニフェストと HTML スニペットが含まれます。
タブだけのプレビューと違い、OneImageTool は iOS ホーム画面、Android のインストールバナー、Windows のタイルのモックアップを表示します — 編集に合わせてすべてライブで更新されます。
1 回のダウンロードで多くの用途に
良いワークフローは、小さなグラフィックを 1 つ渡して終わりにはしません。ランディングページ、ドキュメント、アプリ、PWA、サイドプロジェクトには、複数のアセットに加えて HTML スニペットが必要です。ブラウザ向けの一式を 1 つの ZIP で手に入れましょう。
パックには favicon.ico、よく使う PNG サイズ、ウェブマニフェスト、HTML スニペット、README が含まれ、通常のウェブサイトや PWA のセットアップをカバーします。
5 つの小さなステップ
PNG・JPG・WebP・SVG をドロップします。正方形のソースが最適ですが、横長の画像でも問題ありません。
「合わせる」「切り抜き」「引き伸ばし」を選びます。ブラウザ・iOS・Android のプレビューが瞬時に更新されます。
余白を足し、角を丸め、透過を保つか、単色の背景タイルを選びます。
16px のタブとホーム画面のモックを確認します。タブのアイコンが読みにくければ、余白や単色の背景を加えます。
favicon.ico、PNG ファイル、マニフェスト、HTML スニペット、README を含むアイコンパック一式を保存します。
極小からインストール対応まで
アイコンはまったく異なる場所に現れます。ブラウザタブには、ほとんどディテールのない大胆なシンボルが必要です。PWA のインストール画面では、より大きなマークを表示できます。この変換ツールは、1 枚のソース画像から、よく使うすべてのサイズを作成します。
| サイズ | よくある用途 | ツール内のプレビュー | ヒント |
|---|---|---|---|
| 16×16 | ブラウザタブ、従来のファビコン | ブラウザタブのモック | 力強いシルエットで、ディテールは最小限に |
| 32×32 | 最新のファビコン PNG、高精細タブ | サイズグリッド | ファビコン HTML の実用的な既定値 |
| 48×48 | デスクトップショートカット、Windows タイル | Windows タイルのモック | 形を中央に保つ |
| 180×180 | Apple Touch Icon | iOS ホーム画面のモック | iOS では単色の背景の方がきれいに見えることが多い |
| 192×192 | Android Chrome、PWA | Android インストールのモック | マニフェストのアイコンで使用 |
| 512×512 | PWA スプラッシュ、インストール UI | サイズグリッド | 高品質なソースから始める |
極小版をはっきりさせる
ファビコンは小さいものです — 細い線、小さな文字、ごちゃついた写真やスクリーンショットは、しばしばぼやけてしまいます。書き出す前に、ライブのタブとホーム画面のプレビューで読みやすさをテストしてください。
16px のタブプレビューが読みにくければ、より大胆な切り抜き、多めの余白、単色の背景を試します。はっきりしたコントラストの中央揃えの形は、大きな画像からアイコンへの縮小をずっとよく乗り越えます。
シンプルなロゴ、フラットなマスコット、正方形のマーク、大胆なイニシャル、高コントラストのシンボル。
細かい写真、細い輪郭、スクリーンショット、長い単語、端に接するマーク。
貼り付けて公開
静的サイトでは、本番にコピーされる公開ルートまたはアセットフォルダにファイルを置きます。HTML スニペットを <head> の中に貼り付けます。公開後もファビコンの URL を安定させておくと、ブックマークやインストール済みのショートカットが同じアイコンを保ちます。
ファビコンのキャッシュはテスト中しつこく残ります — 実験するときはプライベートウィンドウを使うか、ファイル名を変えてください。
public/
├── favicon.ico
├── favicon-32x32.png
├── apple-touch-icon.png
├── android-chrome-192x192.png
├── android-chrome-512x512.png
└── site.webmanifestかんたん Q&A
通常の画像を、ファビコン、デスクトップショートカット、アプリアイコン、PWA アイコン、小さなプロジェクトロゴのためのアイコンファイルとサイズに変換することです。
はい。PNG をアップロードしてパックをダウンロードすると、複数サイズの favicon.ico と対応する PNG 版が含まれます。
はい。ソースに透過がない場合は、単色の背景を使ってください。
正方形が最も簡単です。「切り抜き」はフレームを埋め、「合わせる」は画像全体を見せ、「引き伸ばし」は強制的に正方形にします。
いいえ。変換はブラウザ内でローカルに動作します。画像が端末から出ることはありません。
ブラウザタブ（16px）、iOS ホーム画面（180px）、Android インストールバナー（192px）、Windows タイル（48px）、加えて 16 から 512 までの全サイズグリッドです。
favicon.ico、16 から 512 までの PNG サイズ、Apple Touch Icon、Android Chrome アイコン、site.webmanifest、HTML スニペット、README です。
はい。基本的な変換は無料で、ブラウザ内で動作し、アカウントは不要です。