◎ Mac標準のソフトのみでfavicon.icoを作成する方法

2015年10月21日水曜日

image web



知人から、Macを使ったfaviconの作り方を聞かれた。要約すると次のとおり。
『favicon.icoを作成してくれるwebサービスもあるが、クライアントのロゴ画像なので、webにアップするのはちょと避けたい。できれば、自分のMacだけで作成したいが、そのためだけに専用ツールやプラグインを購入するのもばかばかしい。』

そこで、この「Mac標準のソフトのみでfaviconを作成する方法」をお勧めした。せっかくなので、シェアすることに。

faviconについて知らない方もいると思うので簡単な説明
faviconは、ブラウザのURL欄、タブ、お気に入りなどに表示される小さなアイコンで、そのサイトらしさを表現するもので、初期は拡張子が「.ico」のみだったが、最近はpngなどが多く使われている。しかし、古いInternet Explorerでは、 「.ico」しか認識してくれなかったため、今でも「.ico」にこだわる人が多い。

最近のInternet Explorerでは、pngでもfaviconとして認識してくれる。次の画像は、Windows 7のInternet Explorer 11を使用してfaviconを表示したサンプル。左が「favicon.ico」、右が「favicon.png」。

今回、favicon画像作成に使用するソフトは、当ブログでもたびたび登場しているが、Macに標準で付属している無料のソフトの中で、画像系としては最強の「プレビュー.app」。
次の画像は、左がMac OS 10.6.8、右が10.10.5の「プレビュー.app」アイコン。

favicon.icoを作成する方法
favicon用の素材画像を用意する。
使用する画像フォーマットは、一般的なものならほとんど大丈夫。なお、ここでのサンプルは、pngを使用。

プレビュー.appで画像を開き、カーソルでアイコンにする範囲を選択する。このとき選択範囲を正方形にするなら、shiftを押しながら、カーソルで選択する。もちろん正方形でなくても構わないが、正方形のほうが、後で各種サイズのアイコンを作成する際などに面倒がない。また、このときの選択はアバウトなものでかまわない。

カーソルキーを使って、選択範囲を上下左右に移動して微調整する。

command+Cのショートカットキーやメニューの「編集」→「コピー」など使ってコピーする。

プレビュー.appのメニューの「ファイル」→「クリップボードから新規作成」でアイコン用元画像を作成する。念のためpngなどで保存しておく。

次に、アイコン用元画像を表示しておき、メニューの「ツール」→「サイズの調整…」を選ぶ。

「サイズの調整…」ダイアログが開いたら、「縦横比を固定」、「イメージを再サンプル」のチェックを入れたまま、横、高さのどちらかに数値を入れる(もう一方は自動で入る)。このとき、48px以内にしておかないと、プレビュー.appではfaviconとして保存する際にエラーになる。

古いInternet Explorerでは、横、高さが16pxでなければfaviconとして認識されなかったが、もっと大きくても問題ない。webのfavicon作成サービスなどでは、62pxで書き出すものもある。今回は、プレビュー.appを利用する場合の最大サイズ48pxで保存する。

保存は、メニューの「編集」をプルダウンして「保存」、あるいは「別名で保存…」(Mac OS 10.6.8の場合)を選び、保存ダイアグラムを出す。下側の保存フォーマット一覧のセレクトをoptionキーを押しながら開いて、候補の中から「Miceosoft アイコン」を選ぶ(次の上の画像)。普通に開くとわずかのフォーマットしか表示されない。
また、Mac OS 10.6.8の場合だけ、optionキー無しで「Miceosoft アイコン」が表示される(次の下の画像)。


名前を付け、適当な場所に保存する。拡張子「.ico」のファイルができ上がる。

webにアップするときは、「favicon.ico」とリネームする。


以上は、Mac OS のバージョン10.10.5、10.9.2、10.8.5、10.7.5、10.6.8、それぞれのプレビュー.appで動作を確認した。サンプル画像は主に10.6.8にて作成。