PNG画像をICOに変換

ICOファイルとは？

ICOはWindowsのアイコン形式で、ブラウザのタブ、ブックマーク、履歴に表示される小さな画像「ファビコン」にも使われています。いちばんの特徴は、1つの.icoファイルの中に、大きさの違う画像を複数入れられることです。Windowsは一覧やタスクバーには16×16、中くらいのアイコンには32や48、エクスプローラーの特大アイコンには256を表示し、ブラウザは画面の細かさに応じて16か32を使います。そのため、.pngファイルの名前を.icoに変えるだけでは不十分です。本物のICOは、中に入っているサイズの一覧を書いたヘッダーから始まります。このツールはその決まりどおりにファイルを作り、各サイズを、Windows Vista以降と現在のすべてのブラウザが対応しているPNG形式で保存します。

サイトのファビコンを作る

正方形のシンプルなロゴを用意して、ファビコン一式をダウンロードしましょう。中身は、favicon.ico（16、32、48ピクセル）、apple-touch-icon.png（180×180。iPhoneでサイトをホーム画面に追加したときのアイコン）、icon-192.pngとicon-512.png（Androidやウェブアプリ用）、それらを登録するsite.webmanifest、そしてコピーするHTMLの行です。ファイルをサイトのルート（いちばん上の階層）に置き、HTMLの行を各ページのheadタグの中に貼り付けます。WordPress（サイトアイコン）、Wix、BASEなどのサービスでは、正方形のPNG画像1枚を求められることが多いので、その場合はicon-512.pngを使ってください。ブラウザは古いファビコンを長く覚えているので、変更後はCtrl+F5で再読み込みするか、しばらく待ちましょう。

Windowsでフォルダーやショートカットのアイコンを変える

フォルダーの場合は、右クリックして「プロパティ」を開き、「カスタマイズ」タブの「アイコンの変更...」ボタンを押して、「参照...」から.icoファイルを選びます。ショートカットの場合は、「プロパティ」の「ショートカット」タブにある「アイコンの変更...」ボタンから設定します。.icoファイルは、移動しないフォルダーに保存しておきましょう。ファイルを移動したり削除したりすると、Windowsは元のアイコンに戻してしまいます。エクスプローラーのどの表示（小アイコン、中アイコン、大アイコン、特大アイコン）でもくっきり見せたいなら、「Windows」プリセットで16〜256ピクセルの全サイズにチェックを入れてください。

16ピクセルでも見やすいアイコンにするコツ

16×16のアイコンは、たった256ピクセルしかありません。細かい模様や文字、とても細い線は消えてしまいます。キャッチコピーまで入ったロゴ全体よりも、頭文字や記号のような、正方形いっぱいに広がるシンプルでコントラストの強い形を選びましょう。明るいタブと暗いタブの両方でプレビューを確認してください。透明背景の黒いロゴはダークモードでは見えなくなるので、色つきの背景をつけると解決できます。画像が正方形でないときは、中央を残す「正方形に切り抜く」と、透明または色つきの余白を足す「全体を残して余白を追加」から選べます。SVGファイルはサイズごとに描き直してから縮小するので、いちばんくっきり仕上がります。