# 画像をICOに｜ファビコン・WindowsとmacOSのアイコン作成

画像を1枚入れれば、ブラウザもWindowsもMacも、求めるサイズがすべて出てきます。

> PNG・JPEG・SVGを、複数サイズを収めた本物の.icoやmacOSの.icnsにブラウザの中で変換します。ファビコン、Windowsのアプリアイコン、Macのアプリアイコン、さらにサイトに必要なAppleとAndroid向けのファイルまで。アップロードはありません。

これはhttps://abox.tools/ja/image-to-ico/にあるブラウザー用の対話型ツールです。ファイルはそのブラウザーを実行する端末上で処理します。意図した共有や任意の通信機能はページ内で説明します。以下は文章による説明です。利用するにはアドレスを開いてください。

## 画像は**ブラウザー内で処理**されます。処理のためのアップロードはありません。

縮小もアイコンファイルの組み立ても、どちらもお使いのブラウザの中で行います。画像を描くのはブラウザにすでに入っているキャンバスで、Windowsの`.ico`とmacOSの`.icns`という2つの入れ物は、誰でも読める数百行の`src/ico.js`と`src/icns.js`がそのピクセルから組み立てます。このツールにはネットワーク機能が一切ありません。取りに行く先も、送る先もありません。仮に送ろうとしても、このページの向こう側にロゴを受け取るサーバーが存在しません。

- ✗ アップロードなし
- ✗ 登録なし
- ✗ 透かしなし
- ✓ オフラインで動作
- ✓ ソース公開

## 何もアップロードせずに.icoファイルを作る手順

1. **画像を選びます。** PNG、JPEG、WebP、SVGを選択欄にドロップするか、複数選んで一度に変換してください。正方形がいちばん扱いやすく、256ピクセル以上あればどのサイズにも十分な情報が入っています。ブラウザがディスクから直接読み出します。その間に何かがどこかへ送られることはありません。
2. **必要なファイルを選びます。** Windowsとブラウザが読むのは`.ico`、Macが読むのは`.icns`で、こちらはもう一方を見向きもしません。どちらか、あるいは両方に配るものなら両方にチェックを入れてください。ウェブサイトにはApple、Android、タイル用の画像も必要で、それが3つ目のチェックです。
3. **そのアイコンが何のためのものかを決めます。** ウェブサイトのファビコンは16、32、48ピクセル。Windowsのアプリケーションはそれに加えて256を求めます。高DPIのノートPCできちんと見せたいアプリケーションなら、Windowsが125%と150%の拡大時に求める中間サイズも要ります。仕事に合うものを選ぶか、サイズを自分で選んでください。一覧のどのサイズにも、それを求めているのが何なのかを書いてあります。`.icns`にこの選択はありません。Appleがちょうど10個の枠を定めていて、その10個すべてが入るからです。
4. **形と背景を決めます。** アイコンは正方形ですが、ロゴの多くはそうではありません。余白を足せば、上下に空きを作って画像全体が残ります。切り抜けば中央が取られ、引き伸ばせば潰れます。透過は、後ろに置く色を選ばない限り透過のまま保たれます。
5. **ダウンロードの前に、16ピクセルのものを見てください。** そのアイコンがいちばんよく目にされる大きさであり、細い線や小さな文字が消えるのもそこです。プレビューの各正方形は、選んだファイルから実寸で描いています。いちばん小さいものがにじみになっているなら、直すべきは設定ではなく、もっと単純な絵にすることです。
6. **ファイルを受け取ります。** すべてのサイズを収めた.icoが1つ、そう指定した場合は`favicon.ico`という名前で出てきます。ブラウザが探しに行くアドレスがそれだからです。macOSアイコンにチェックを入れていれば、その隣に、Macのアプリケーションバンドルへそのまま入れられる.icnsが出ます。ウェブサイト用一式にもチェックを入れれば、Apple、Android、Windowsタイルの画像、マニフェスト、そしてページに貼るHTMLのかたまりまで付いてきます。ファイルが2つ以上になる場合は、1つのzipにまとめて届きます。

## 詳しい解説

[16ピクセルでも読めるファビコンの作り方](https://abox.tools/ja/guides/make-a-favicon/): favicon.icoに実際に必要なサイズ、iPhone・Android・Macが求める追加ファイル、そしてポスターでは通用するロゴが16ピクセルでは消えてしまう理由。

## 箱の中のほかのツール

- [画像→データURI変換ツール](https://abox.tools/ja/image-to-data-uri/): 画像まるごとを1行のテキストに。そのままCSSやHTMLに貼れます。
- [SVG→画像変換ツール](https://abox.tools/ja/svg-to-image/): サイズを指定するだけ。ベクターには、失うサイズがそもそもありません。
- [画像→SVG変換ツール](https://abox.tools/ja/image-to-svg/): ひとつの形に、ひとつの輪郭。あってはいけないものを指さすだけです。
- [身長比較チャート](https://abox.tools/ja/compare-heights/): 身長を打ち込めば、絵が持ち帰れます。描くために何かを送ることはありません。

## よくある質問

### 画像はどこかにアップロードされますか？

されません。画像の読み込みと縮小はお使いのブラウザが手元のハードウェア上で行い、.icoはこのページから配信されたコードがそのピクセルから組み立てます。このツールにはネットワーク機能が一切なく、何も取りに行かず、何も送りません。ページの`Content-Security-Policy`には接続してよいアドレスがすべて挙がっていますが、そのどれも当サイトのものではありません。

### favicon.icoにはどのサイズを入れるべきですか？

16、32、48です。これは好みの問題ではありません。16はブラウザがタブに描く大きさ、32はWindowsがデスクトップのショートカットに使い、いくつかのブラウザがブックマークに使う大きさ、48はGoogleがサイトのアイコンを読む大きさです。それより大きいものは.icoの中ではなく、その隣のPNGに置くべきです。ここのウェブサイト用一式が作るのが、まさにそれです。

### Windowsのアプリケーションアイコンにはどのサイズが必要ですか？

16、32、48、256です。Visual Studioが既定で用意するapp.icoの中身もこれです。16はタイトルバーとエクスプローラーの小アイコン、32はデスクトップとタスクバー、48はエクスプローラーの中アイコン、256はスタートメニューと特大表示です。高DPIのディスプレイではWindowsは20、24、40、64、96も求め、なければ手持ちのいちばん近いサイズから作り直します。「すべての拡大率」のプリセットは、それらを入れます。

### 元の画像よりファイルが大きくなるのはなぜですか？

.icoは1枚の画像ではなく複数枚であり、しかも小さいものは何でも読めるように非圧縮で保存するからです。32×32のエントリは中身が何であれきっかり4,264バイト、256×256の非圧縮エントリは264KBになります。だから64を超えるサイズは既定でPNGとして保存します。「すべてのサイズをPNGに」を選べばいちばん小さいファイルに、「すべて非圧縮」を選べばいちばん互換性の高いファイルになります。

### PNGのエントリと非圧縮のエントリは何が違うのですか？

.icoの中でピクセルをどう保存するかだけです。非圧縮のエントリはWindows本来の並べ方、つまりビットマップのヘッダー、上下逆さのピクセル、1ビットの透過マスクで、これまでに出たすべてのWindowsが読めます。PNGのエントリはアイコンの中にPNGファイルを丸ごと入れたもので、大きなサイズでは3分の1から10分の1になりますが、理解されるようになったのはWindows Vistaからです。既定では、それぞれが勝つ場所で使います。64ピクセルまでは非圧縮、それより上はPNGです。

### 256ピクセルより大きいアイコンは作れますか？

作れませんし、どんな道具にも作れません。この形式は一辺を1バイトで保存し、しかも0は予約済みで、256を意味します。それが天井なので、512ピクセルの画像が入った.icoは「大きなアイコン」ではなく壊れたアイコンです。512が必要なら、必要なのはPNGのほうです。それはウェブサイト用一式に、Androidとウェブアプリのスプラッシュ画面のために入っています。

### 透過は保たれますか？

どちらの種類のエントリでも保たれます。さらに、アルファチャンネルの隣に昔ながらの1ビットマスクも書きます。アルファを読めないほど古いソフトでも、黒い四角を描くのではなくアイコンを切り抜けるようにするためです。意図的に不透明にする唯一のファイルは、ウェブサイト用一式の中のAppleタッチアイコンです。iOSはそれを自分のタイルに合成し、透過を黒に変えてしまうので、既定では白の背景色に合成して平らにします。

### ロゴが横長のワードマークです。どうなりますか？

何かをするしかありません。アイコンは正方形だからです。余白を足せば全体は残りますが小さくなります。16ピクセルの正方形に収めたワードマークは高さ3ピクセルほどで、読めません。中央で切り抜くほうがたいていうまくいきます。組み合わせからシンボルだけを取り出して使う、ほとんどのブランドがファビコンに対してしているやり方です。どちらが生き残るのかは、何かをダウンロードする前にプレビューでわかります。

### ウェブサイト用一式には何が入っていて、全部必要ですか？

7つのPNG、ウェブアプリのマニフェスト、browserconfig.xml、そして貼り付けるHTMLのかたまりです。必要な理由は、.icoがブラウザとWindowsしかカバーしないからです。iPhoneのホーム画面は独自の名前で180ピクセルのPNGを読み、Androidとすべてのインストール案内はマニフェストを読み、スタートメニューに固定されたタイルはXMLを読みます。そのどれも.icoの中を見ません。すべてここで、手元の端末で生成し、zipの中には各ファイルの用途を書いたメモを入れてあります。

### macOSのアイコンも作れますか？

作れます。*macOSアイコン*にチェックを入れると、`.ico`の隣に、あるいはその代わりに`.icns`が出てきます。同じ考えに対する別の入れ物で、どちらのシステムも相手のものを読みません。Windowsは.icoを求め、Macのアプリケーションバンドルは.icnsを求めます。そちらではサイズを選べません。Appleがちょうど10個の枠を公開しているからです。16、32、64、128、256、512、1024ピクセルで、そのうち3つは1段下のサイズのRetina版として2度ずつ登場します。7回の描画から10個すべてを作ります。.icnsのほうがファイルが大きいのは、そのためです。

### .icnsファイルはどう使えばいいですか？

アプリケーションなら、バンドルの`YourApp.app/Contents/Resources/`に置き、`Info.plist`の`CFBundleIconFile`で名前を指定します。Mac用のパッケージングツールにはどれもその欄があります。それ以外では、Finderでファイルを選んでcommand + Cを押し、変えたいフォルダやディスクイメージで「情報を見る」を開き、左上の小さなアイコンをクリックしてからcommand + Vを押してください。

### この.icnsはiconutilが作るものと同じですか？

同じ10個の枠、同じ4文字のタイプ、そしてそれぞれにPNGが入っています。`iconutil`が`.iconset`フォルダから作るものと同じです。意図した違いがひとつあります。Appleのツールは`TOC` 要素も書きます。後続する要素のタイプと長さの索引です。これは形式の一部というより最適化で、索引を持たない読み手は要素を端から辿って同じ答えにたどり着きます。誤った索引は索引がないより悪いので、入れていません。

### 複数の画像を一度に変換できますか？

できます。リスト上のどの画像も同じ設定で自分の.icoになり、まとめて1つのzipに、画像ごとのフォルダに分けて届きます。そうしないと2つがどちらもfavicon.icoという名前になり、一方がもう一方を上書きしてしまうからです。チェックを入れた出力は、どの画像に対しても作ります。行をクリックすれば、その画像をプレビューに出せます。

### 無料ですか。アカウントは必要ですか？

無料です。アカウントも、ログインも、試用期間も、透かしもありません。ファイルの数にもサイズにも制限はありません。その費用を払うサーバーが存在せず、処理が手元の端末で起きているからです。このサイトには広告があり、それが費用を賄っています。広告に画像の情報が渡されることはありません。

### オフラインでも動きますか？

動きます。ページを一度読み込んでから通信を切っても、そのまま使えます。何もアップロードされていないことを示す、いちばん簡単な方法でもあります。変換のためにロゴをどこかへ送っている道具なら、線を抜いた瞬間に止まるからです。

## この主張を確かめる方法

- **処理はこのブラウザー内で行います。** 入力と結果はブラウザー内で処理し、処理コードはそれらを処理用にアップロードしません。Content-Security-Policyは資源と接続先を制限しますが、許可済みの相手はリクエストを受け取れます。内容は検査せず、何も送られないことを単独で証明しません。具体的な操作の要求とソースを比較するか、切断中にローカル操作を完了してください。
- **何かを取りに行くコードがありません。** `src/`のどこにも`fetch`も`XMLHttpRequest`も`sendBeacon`もありません。縮小はキャンバスへの`drawImage`で、各アイコンはそのピクセルの前に`src/ico.js`か`src/icns.js`がこのページの中でヘッダーを書いたものです。
- **ファイルの説明は、そのファイル自身のバイト列から作っています。** できあがったアイコンの横に並ぶサイズの一覧は、指定したサイズの一覧ではありません。いま書いたばかりのファイルから`readIcoDirectory`や`readIcnsElements`が読み返したものです。ですから書き手が設定と食い違うことがあれば、Windowsが何も描かずmacOSが白紙を描いたときに気づくのではなく、その場でページがそう伝えます。
- **Googleが読み込むものと、渡されないもの。** 広告と計測のスクリプトはGoogleから、寄付ボタンはBuy Me a Coffeeから来ています。そのどれにも、画像に関する情報は渡されません。ファイルを読み、縮小し、書き出すコードはすべてこのオリジンから配信され、リポジトリに載っています。
- **オフラインで動きます。** 通信を切ってもこのツールは何も変わりません。もともと通信する段階が存在しないからです。これがいちばん単純な証明です。

**自分で確かめてください。**以上のどれも、鵜呑みにする必要はありません。このページは、リポジトリにあるテンプレートと設定から、誰でも読んで実行できるビルドスクリプトが生成しています。その結果は`dist`ブランチに置いてあるので、配信されているものと、ソースをビルドした結果とを差分で比べられます。 https://github.com/A-Box-of-Tools/website

まず読むとよいのは、Content-Security-Policyについては`config/site.toml`、2つのアイコン形式については`src/ico.js`と`src/icns.js`です。一方はディレクトリとエントリとマスク、もう一方はAppleが定めた10個の枠です。ページ上のすべてのサイズがどこから来ているのかについては`src/sizes.js`です。