ImageMagickでfaviconの生成とHTMLタグの吐き出し

ロゴ画像からリサイズした画像群とicoファイルと、それらを読み込むHTMLを生成したかった。

今風ではないし、網羅しているわけでもないけれどサクッと指定したい時に。

使い方

• generate-favicon logo.png

同じフォルダにリサイズした画像とfavicon.icoが出力され、このようなHTMLが標準出力に出力される。

<link rel="shortcut icon" sizes="16x16 24x24 32x32 48x48 64x64" href="/favicon.ico">
<link rel="apple-touch-icon" sizes="57x57" href="/logo-57.png">
<link rel="apple-touch-icon" sizes="72x72" href="/logo-72.png">
<link rel="apple-touch-icon" sizes="114x114" href="/logo-114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/logo-120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/logo-144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/logo-152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/logo-180.png">
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="/logo-57.png">
<meta name="msapplication-TileImage" content="/logo-144.png">

導入方法

• ~/.zshrc 等に下記の定義を記述する
• . ~/.zshrc 等で読み込む

function generate-favicon(){
    for i in 16 24 32 48 64
    do
        convert -resize ${i}x${i} $1 ${1%%.*}-$i.${1##*.}
    done
    convert ${1%%.*}-16.${1##*.} ${1%%.*}-24.${1##*.} ${1%%.*}-32.${1##*.} ${1%%.*}-48.${1##*.} ${1%%.*}-64.${1##*.} favicon.ico
    echo '<link rel="shortcut icon" sizes="16x16 24x24 32x32 48x48 64x64" href="/favicon.ico">'

    for i in 57 72 114 120 144 152 180
    do
        convert -resize ${i}x${i} $1 ${1%%.*}-$i.${1##*.}
        echo '<link rel="apple-touch-icon" sizes="'$i'x'$i'" href="/'${1%%.*}-$i.${1##*.}'">'
    done
    echo '<link rel="apple-touch-icon-precomposed" sizes="57x57" href="/'${1%%.*}-57.${1##*.}'">'
    echo '<meta name="msapplication-TileImage" content="/'${1%%.*}-144.${1##*.}'">'
}

他の手段

Node.jsの cli-real-favicon パッケージもあるみたい。

Webで色々設定して生成するならここが便利。

realfavicongenerator.net