ローンチ当日のために
オンラインで画像をアイコンに変換
OneImageTool は、ロゴ・アバター・マスコット・商品マークを、実際のウェブサイトやアプリに必要なアイコンファイルに変換します。画像をアップロードし、きれいな正方形に整え、ブラウザタブやモバイルのホーム画面でプレビューして、favicon.ico、PNG アイコン、Apple Touch Icon ファイル、PWA マニフェストを保存できます。ソースにまだ手入れが必要なら、まず正方形に切り抜くか、大きすぎる書き出しを圧縮するとよいでしょう — どちらのツールもブラウザ内で動作します。
すべてがブラウザ内で動作します。ソースが非公開のクライアントロゴ、未発表のアプリマーク、他のサーバーに送りたくない思いつきのアイデアであるときに、これが効いてきます。ライブのデバイスプレビューを見ながら、余白・背景色・角の丸みを調整できます。
ウェブサイト用ファビコン
同じソースからブラウザタブのアイコンを作成。大胆なマークには「切り抜き」を、ロゴにゆとりが必要なら余白付きの「合わせる」を使います。
ショートカット ICO
従来のファビコン対応やデスクトップショートカットのために、複数サイズの ICO をダウンロード。小さいサイズは、タブのプレビューでくっきり保たれるよう調整されています。
アプリと PWA のアイコン
ホーム画面やインストールプロンプト用に、より大きな PNG サイズを生成。パックには設定済みのウェブマニフェストと HTML スニペットが含まれます。
マルチデバイスプレビュー
タブだけのプレビューと違い、OneImageTool は iOS ホーム画面、Android のインストールバナー、Windows のタイルのモックアップを表示します — 編集に合わせてすべてライブで更新されます。
1 回のダウンロードで多くの用途に
画像→アイコンツールが生成するもの
良いワークフローは、小さなグラフィックを 1 つ渡して終わりにはしません。ランディングページ、ドキュメント、アプリ、PWA、サイドプロジェクトには、複数のアセットに加えて HTML スニペットが必要です。ブラウザ向けの一式を 1 つの ZIP で手に入れましょう。
パックには favicon.ico、よく使う PNG サイズ、ウェブマニフェスト、HTML スニペット、README が含まれ、通常のウェブサイトや PWA のセットアップをカバーします。
- favicon.icoICO
- favicon-16x16.png … 512x512.pngPNG
- apple-touch-icon.pngiOS
- android-chrome-192x192.pngPWA
- site.webmanifestJSON
- favicon-html.txtHTML
- README.txtDOC
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