faviconを変えてみました

Tweet

Pocket

サイトを閲覧する時のツールバーやブックマークリストに表示される faivorite icon 略して faviconを新しくしてみました
今ではgimpで作ったfaviconを使用してました
gimpで作ったと言っても「うーたまっくす」の「う」を象っただけ。ダサいけども無いよりもいいので。
より良いものをということで、ImageMagick で作ってみました。
Firefox でアニメーションのfaviconが見れますが、 のようにアニメーション GIF になっています。

作成方法は忘れそうなので Makefile にしてあります。

TARGETS	= favicon.gif favicon.ico

BGCOLOR='rgb(00,00,255)'
DIVCOLOR=white

FR='rgb(00,255,255)'
SC='rgb(00,181,255)'
TH='rgb(00,127,255)'
FO='rgb(00,63,255)'

# Image File's Image
#
#
# +---+---+---+
# |0,0|1,0|2,0|
# +---+---+---+
# |0,1|1,1|2,1|
# +---+---+---+
# |0,2|1,2|2,2|
# +---+---+---+
#
#

all: $(TARGETS)

base.gif:
convert -size 32x32 xc:$(BGCOLOR) ruler1.gif
convert -fill $(DIVCOLOR) -draw "rectangle 0,0 1,31" ruler1.gif ruler2.gif
convert -fill $(DIVCOLOR) -draw "rectangle 10,0 11,31" ruler2.gif ruler1.gif
convert -fill $(DIVCOLOR) -draw "rectangle 20,0 21,31" ruler1.gif ruler2.gif
convert -fill $(DIVCOLOR) -draw "rectangle 30,0 31,31" ruler2.gif ruler1.gif
convert -fill $(DIVCOLOR) -draw "rectangle 0,0   31, 1" ruler1.gif ruler2.gif
convert -fill $(DIVCOLOR) -draw "rectangle 0,10  31,11" ruler2.gif ruler1.gif
convert -fill $(DIVCOLOR) -draw "rectangle 0,20  31,21" ruler1.gif ruler2.gif
convert -fill $(DIVCOLOR) -draw "rectangle 0,30  31,31" ruler2.gif ruler1.gif
mv ruler1.gif $@
rm -rf ruler?.gif

# 0,0
00_00.gif: base.gif
convert -fill $(FR) -draw "rectangle   2, 2  9, 9" $< $@

00_01.gif: 00_00.gif
convert -fill $(SC) -draw "rectangle  12, 2 19, 9" $< $@

00_02.gif: 00_01.gif
convert -fill $(TH) -draw "rectangle  22, 2 29, 9" $< $@

00_03.gif: 00_02.gif
convert -fill $(FO) -draw "rectangle  22,12 29,19" $< $@

01_00.gif: base.gif
convert -fill $(FR) -draw "rectangle  12, 2 19, 9" $< $@

01_01.gif: 01_00.gif
convert -fill $(SC) -draw "rectangle  22, 2 29, 9" $< $@

01_02.gif: 01_01.gif
convert -fill $(TH) -draw "rectangle  22,12 29,19" $< $@

01_03.gif: 01_02.gif
convert -fill $(FO) -draw "rectangle  22,22 29,29" $< $@

11_00.gif: base.gif
convert -fill $(FR) -draw "rectangle  12,12 19,19" $< $@

11_01.gif: 11_00.gif
convert -fill $(SC) -draw "rectangle  22,12 29,19" $< $@

11_02.gif: 11_01.gif
convert -fill $(TH) -draw "rectangle  22,22 29,29" $< $@

11_03.gif: 11_02.gif
convert -fill $(FO) -draw "rectangle  12,22 19,29" $< $@

animation.gif: base.gif 01_00.gif 00_01.gif 01_02.gif 00_03.gif 01_03.gif
rm -rf animation
mkdir  animation
cp -a base.gif  animation/00.gif
cp -a 01_00.gif animation/01.gif
cp -a 00_01.gif animation/02.gif
convert -rotate -90  01_02.gif animation/03.gif
convert -rotate -90  00_03.gif animation/04.gif
convert -rotate -180 01_03.gif animation/05.gif
convert -rotate -180 00_03.gif animation/06.gif
convert -rotate -270 01_03.gif animation/07.gif
convert -rotate -270 00_03.gif animation/08.gif

convert -delay 20 -loop 0 animation/*.gif animation.gif
rm -rf animation
mkdir animation
mv animation.gif animation/00.gif
convert -rotate -90 animation/00.gif animation/01.gif
convert -rotate -90 animation/01.gif animation/02.gif
convert -rotate -90 animation/02.gif animation/03.gif
convert -delay 20 -loop 0 animation/*.gif animation/$@
convert -resize 16x16 animation/$@ $@

favicon.gif: animation.gif
convert -transparent white $< $@

favicon.ico: base.gif
convert -resize 16x16 $< favicon.ppm
ppmtowinicon -truetransparent --output=$@ favicon.ppm

clean-ppm:
rm -rf *.ppm

clean-gif:
rm -rf *.gif

clean-ico:
rm -rf *.ico

clean: clean-ppm clean-ico clean-gif
rm -rf animation