MacOSXシェルスクリプトだけでファビコン（Favicon）の全サイズを生成しicoファイルも出力する

概要

まずは、ファビコンってなに？って人は、WikipediaへGO！

Macだと意外にファビコン（Favicon）を作るのが面倒だと知りました。僕は、昔ながらのWindowsフリーソフトウェア作者なので、ICOファイル作成ツールはたくさんあり、さほど苦ではなかったのです。しかし、Macに移ってきたら、意外とツール類がない。

やはり、Faviconの歴史的な背景からか、Windows用ICOファイルによく使われる、16x16や32x32などのサイズが絡んでいるからでしょうか。

しかもブラウザのフォーマットとしても、ICOが優先して表示されることが多いようです。PNGでも良いそうですが、ICOファイル自体、Macでいうところのicnsファイルのような、各サイズを保存しておけるコンテナ的なフォーマットなので、こっちにしておいた方が、良さそう。

ファビコン（Favicon）についての参考サイト

僕は、２歩くらい歩くと忘れるアホ頭なので、以下をたびたび参考にさせてもらっていました。

favicon-cheat-sheet
https://github.com/audreyr/favicon-cheat-sheet

ところが、これを日本語訳した猛者が登場。

ファビコン・カンニング・ペーパー
http://hail2u.net/documents/favicon-cheat-sheet-ja.html

すごい！　めっちゃ助かる。ありがとう！

ファビコン（Favicon）のサイズ

書いた人曰く、「偏執狂」的に揃えるなら、こんだけ種類があるそう。
最近では、スマートフォンのショートカットとしてアイコンが使われるので、意外と高解像度を用意しておかないとキレイに出ないらしい。

PNGファイル主体に揃える

ファイル名	サイズ	説明
favicon.ico	16x16	IEのデフォルトで、残念ながらChromeとSafariはpngよりicoを優先します
favicon.ico	32x32	PNGファイルだけではダメで、この上記２つはiconファイル
favicon-32.png	32x32	特定の古いかといって古過ぎもしないChromeがicoを適切に扱わないバグへの対応
favicon-57.png	57x57	非RetinaのiOSのホーム・スクリーン(iPod TouchやiPhoneの第一世代から3Gまで)
favicon-72.png	72x72	iPadのホーム・スクリーン・アイコン
favicon-96.png	96x96	GoogleTVのアイコン
favicon-120.png	120x120	Retina iPhoneのタッチ・アイコン(iOS 7で114x114から変更)
favicon-128.png	128x128	Chrome ウェブストアのアイコン
favicon-144.png	144x144	IE10のピン留めされたサイト向けタイル・アイコン
favicon-152.png	152x152	Retina iPadのタッチ・アイコン(iOS 7で144x144から変更)
favicon-195.png	195x195	Operaのスピード・ダイヤル・アイコン

ICOファイル主体で揃える

ファイル名	サイズ	説明
favicon.ico	16x16	IE9のアドレス・バーやピン留めされたサイト、ジャンプ・リスト、お気に入りツールバー、新しいタブのサムネイルのオーバーレイ
favicon.ico	32x32	IEの新しいタブやWidows 7以降のタスクバー・ボタン、Safariのリーディング・リストのサイドバー
favicon.ico	48x48	Windowsサイト・アイコン
favicon.ico	24x24	IE9のアドレス・バーやピン留めされたサイト、ジャンプ・リスト、お気に入りツールバー、新しいタブのサムネイルのオーバーレイ
favicon.ico	64x64	高解像度デバイスでのWindowsサイト・アイコンやSafariのリーディング・リストのサイドバー

Macにある、謎の"sips"コマンドを使う

今回一応、チートシートにあるように、通常「これだけあればいいだろう」的な、「スタンダード」版と、いわゆる「obsessive（偏執的な方、用）」と呼ぶ、すべてを揃えておきたい版の、２つのスクリプトを用意しました。

ただ、すべてをカバーするには、最低でも素となる画像サイズは、256x256くらい欲しいところ。なので、512x512、および256x256サイズのファイルがあるときのみ、スクリプトが走るようにしました。

さて、本題。
MacOSXでは、デフォルトで、「sips」という画像処理のコマンドが用意されています。

sipsとは、scriptable image processing system の略だそうです。１へぇ。
https://developer.apple.com/library/mac/documentation/Darwin/Reference/ManPages/man1/sips.1.html

ちなみに、使う前に、その書いたスクリプトファイルに実行権限を与えておくことを忘れずに。

$ chmod a+w+x /Users/mhibara/Desktop/create-favicon-standard.command

ってな感じで。

png2icoツール

実は、本来なら、前回やったように sips コマンドだけで行こうと思ったのですが、本来、Windows用フォーマットであるICOファイルがあるため、別途、png2ico というツールを使いました。とはいえ、GitHub にも併せて上がっているので、特にどこからか落としてくる必要はありません。

でも一応、png2ico ソースコードはコチラ
http://www.winterdrache.de/freeware/png2ico/

Macバイナリ版はコチラ
http://harvey.nu/installers/png2ico.html

いずれにしても、大元は、libpngと呼ばれるライブラリが中で使われています。
libpng Home Page
http://www.libpng.org/pub/png/libpng.html

今回は、特に中身には触れませんが、興味のある方は上のサイトを当たってみてください。

ではさっそくサンプルソースを。まずはスタンダードな Favicon の作成から。

#!/bin/sh
#このシェルスクリプトを実行した場所をカレントディレクトリにする（お約束）
cd `dirname $0`

# 出力ディレクトリの生成
outdir="favicon"
mkdir -p $outdir

if [ -e "icon_512x512.png" ]; then
	BASE_FILE="icon_512x512.png"	#すべてのアイコンのベースサイズ
else
	if [ -e "icon_256x256.png" ]; then
		BASE_FILE="icon_256x256.png"	#すべてのアイコンのベースサイズ
	else
		echo "素になる大きなサイズのファイルが見つかりません。\n処理を中止します。"
		exit
	fi
fi

# ----------------------------------------------------------------------
# favicon.ico の作成
# ----------------------------------------------------------------------

if [ -e "favicon-48.png" ]; then
	echo "favicon-48.png はすでに存在しています。"
else
	sips -Z 48 ${BASE_FILE} --out favicon-48.png
fi

if [ -e "favicon-32.png" ]; then
	echo "favicon-32.png はすでに存在しています。"
else
	sips -Z 32 ${BASE_FILE} --out favicon-32.png
fi

if [ -e "favicon-16.png" ]; then
	echo "favicon-16.png はすでに存在しています。"
else
	sips -Z 16 ${BASE_FILE} --out favicon-16.png
fi

# favicon.ico の作成
png2ico favicon/favicon.ico favicon-16.png favicon-32.png favicon-48.png

# ----------------------------------------------------------------------
# favicon.png の作成
# ----------------------------------------------------------------------

if [ -e "ifavicon-152.png" ]; then
  echo "favicon-152.png はすでに存在しています。処理をスキップします。"
else
  sips -Z 152 ${BASE_FILE} --out ${outdir}/favicon-152.png
fi

cp -vf "favicon-152.png" "${outdir}/favicon-152.png"

次は、ファビコン・チートシートにもあった、「obsessive（偏執的な方、用）」。

#!/bin/sh
#このシェルスクリプトを実行した場所をカレントディレクトリにする（お約束）
cd `dirname $0`

# 出力ディレクトリの生成
outdir="favicon"
mkdir -p $outdir

if [ -e "icon_512x512.png" ]; then
  BASE_FILE="icon_512x512.png"	#すべてのアイコンのベースサイズ
else
  if [ -e "icon_256x256.png" ]; then
    BASE_FILE="icon_256x256.png"	#すべてのアイコンのベースサイズ
  else
    echo "素になる大きなサイズのファイルが見つかりません。\n処理を中止します。"
    exit
  fi
fi

# ----------------------------------------------------------------------
# favicon.ico の作成
# ----------------------------------------------------------------------

if [ -e "favicon-64.png" ]; then
  echo "favicon-64.png はすでに存在しています。"
else
  sips -Z 64 ${BASE_FILE} --out favicon-64.png
fi

if [ -e "favicon-48.png" ]; then
  echo "favicon-48.png はすでに存在しています。"
else
  sips -Z 48 ${BASE_FILE} --out favicon-48.png
fi

if [ -e "favicon-32.png" ]; then
  echo "favicon-32.png はすでに存在しています。"
else
  sips -Z 32 ${BASE_FILE} --out favicon-32.png
fi

if [ -e "favicon-24.png" ]; then 
  echo "favicon-24.png はすでに存在しています。"
else
  sips -Z 24 ${BASE_FILE} --out favicon-24.png
fi

if [ -e "favicon-16.png" ]; then
  echo "favicon-16.png はすでに存在しています。"
else
  sips -Z 16 ${BASE_FILE} --out favicon-16.png
fi

# favicon.ico の作成
png2ico favicon/favicon.ico favicon-16.png favicon-24.png favicon-32.png favicon-48.png favicon-64.png


# ----------------------------------------------------------------------
# favicon.png の作成
# ----------------------------------------------------------------------

if [ -e "favicon-152.png" ]; then
  echo "favicon-152.png はすでに存在しています。処理をスキップします。"
else
  sips -Z 152 ${BASE_FILE} --out favicon-152.png
fi

cp -vf "favicon-152.png" "${outdir}/favicon-152.png"

# 32x32
if [ -e "ifavicon-32.png" ]; then
  echo "favicon-32.png はすでに存在しています。処理をスキップします。"
else
  sips -Z 32 ${BASE_FILE} --out favicon-32.png
fi

cp -vf "favicon-32.png" "${outdir}/favicon-32.png"

# 57x57
if [ -e "ifavicon-57.png" ]; then
    echo "favicon-57.png はすでに存在しています。処理をスキップします。"
else
    sips -Z 57 ${BASE_FILE} --out favicon-57.png
fi

cp -vf "favicon-57.png" "${outdir}/favicon-57.png"

# 72x72
if [ -e "ifavicon-72.png" ]; then
    echo "favicon-72.png はすでに存在しています。処理をスキップします。"
else
    sips -Z 72 ${BASE_FILE} --out favicon-72.png
fi

cp -vf "favicon-72.png" "${outdir}/favicon-72.png"

# 96x96
if [ -e "ifavicon-96.png" ]; then
    echo "favicon-96.png はすでに存在しています。処理をスキップします。"
else
    sips -Z 96 ${BASE_FILE} --out favicon-96.png
fi

cp -vf "favicon-96.png" "${outdir}/favicon-96.png"

# 120x120
if [ -e "ifavicon-120.png" ]; then
    echo "favicon-120.png はすでに存在しています。処理をスキップします。"
else
    sips -Z 120 ${BASE_FILE} --out favicon-120.png
fi

cp -vf "favicon-120.png" "${outdir}/favicon-120.png"

# 128x128
if [ -e "ifavicon-128.png" ]; then
    echo "favicon-128.png はすでに存在しています。処理をスキップします。"
else
    sips -Z 128 ${BASE_FILE} --out favicon-128.png
fi

cp -vf "favicon-128.png" "${outdir}/favicon-128.png"

# 144x144
if [ -e "ifavicon-144.png" ]; then
    echo "favicon-144.png はすでに存在しています。処理をスキップします。"
else
    sips -Z 144 ${BASE_FILE} --out favicon-144.png
fi

cp -vf "favicon-144.png" "${outdir}/favicon-144.png"

# 152x152
if [ -e "ifavicon-152.png" ]; then
    echo "favicon-152.png はすでに存在しています。処理をスキップします。"
else
    sips -Z 152 ${BASE_FILE} --out favicon-152.png
fi

cp -vf "favicon-152.png" "${outdir}/favicon-152.png"

# 195x195
if [ -e "ifavicon-195.png" ]; then
    echo "favicon-195.png はすでに存在しています。処理をスキップします。"
else
    sips -Z 195 ${BASE_FILE} --out favicon-195.png
fi

cp -vf "favicon-195.png" "${outdir}/favicon-195.png"

以上です。

これらのソース一式は、例のごとく GitHub に上がっています。サンプルアイコンなどもありますので、動作確認もできるかと思います。

ライセンス

今回は、これら僕の作ったソースは、png2ico のライセンスに準じて、GPLv2とします。