LoginSignup
20
24

More than 3 years have passed since last update.

@hibara(Mitsuhiro Hibara)

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

Last updated at Posted at 2015-05-28

概要

まずは、ファビコンってなに？って人は、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とします。

20
24
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
20
24