Article:

favicon、定期的に作るタイミングこそくるものの、そんな頻繁に作るものでもないので作り方忘れちゃうんですよね。もう人生で何回もググってる気がするのでいい加減メモしておこうと思います。

なんかググってもwebツール使えみたいな記事しか出てこなくてつらいです。 なんとなくwebツールって嫌なのでなんとかローカルのツールでがんばります。

昔はIcon Composerってアプリがあって便利だったのだが…

Imagemagickを使う

皆さんインストール済みだと思うのでそのへんは省きます。

せっかくアイコンをベクタで作ってるのに、ラスタの画像をリサイズしてfaviconを作るのはなんかダサいですよね。

なので、複数枚の画像から作成するのが目的です。

ただ、Imagemagickでは一発で複数pngから一つのicoを生成する方法は用意されていないので、「個別コマンドでそれぞれのサイズを単一icoに」 -> 「複数の単一icoファイルを一つにまとめる」 と、必要があります。

1
2
3
4
5
6
7

# それぞれをicoファイルにする
convert input1.png output1.ico
convert input2.png output2.ico
convert input3.png output3.ico

# 複数のicoファイルを一つにまとめる
convert output1.ico output2.ico output3.ico favicon.ico

ただ、faviconは大きさの種類がたくさんあるのでシェルスクリプトにしたほうが楽ですね。

ファイルはIllustratorのスクリーン用に書き出しが便利に使えますね。(プリセットを自分で作れたらもっと便利なのですが)

スクリーン用に書き出しの設定 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

#!/bin/sh

#usage: favicon.sh fileprefix

prefix=$1
target=( 16 24 32 40 48 64 96 128 192 256 )

for i in ${target[@]}
do 
	convert $prefix$i".png" $prefix$i".ico"
done

command="convert "

for i in ${target[@]}
do 
	
	command="${command} ${prefix}${i}.ico"
done

command="${command} favicon.ico"

$command

for i in ${target[@]}
do 
	rm $prefix$i".ico"
done
Category:
Tags:
ツール(10)

Share: