faviconを変えてみました

Pocket

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

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

<br />
TARGETS	= favicon.gif favicon.ico</p>
<p>BGCOLOR='rgb(00,00,255)'<br />
DIVCOLOR=white</p>
<p>FR='rgb(00,255,255)'<br />
SC='rgb(00,181,255)'<br />
TH='rgb(00,127,255)'<br />
FO='rgb(00,63,255)'</p>
<p># Image File's Image<br />
#<br />
#<br />
# +---+---+---+<br />
# |0,0|1,0|2,0|<br />
# +---+---+---+<br />
# |0,1|1,1|2,1|<br />
# +---+---+---+<br />
# |0,2|1,2|2,2|<br />
# +---+---+---+<br />
#<br />
#</p>
<p>all: $(TARGETS)</p>
<p>base.gif:<br />
convert -size 32x32 xc:$(BGCOLOR) ruler1.gif<br />
convert -fill $(DIVCOLOR) -draw "rectangle 0,0 1,31" ruler1.gif ruler2.gif<br />
convert -fill $(DIVCOLOR) -draw "rectangle 10,0 11,31" ruler2.gif ruler1.gif<br />
convert -fill $(DIVCOLOR) -draw "rectangle 20,0 21,31" ruler1.gif ruler2.gif<br />
convert -fill $(DIVCOLOR) -draw "rectangle 30,0 31,31" ruler2.gif ruler1.gif<br />
convert -fill $(DIVCOLOR) -draw "rectangle 0,0   31, 1" ruler1.gif ruler2.gif<br />
convert -fill $(DIVCOLOR) -draw "rectangle 0,10  31,11" ruler2.gif ruler1.gif<br />
convert -fill $(DIVCOLOR) -draw "rectangle 0,20  31,21" ruler1.gif ruler2.gif<br />
convert -fill $(DIVCOLOR) -draw "rectangle 0,30  31,31" ruler2.gif ruler1.gif<br />
mv ruler1.gif $@<br />
rm -rf ruler?.gif</p>
<p># 0,0<br />
00_00.gif: base.gif<br />
convert -fill $(FR) -draw "rectangle   2, 2  9, 9" $&lt; $@</p>
<p>00_01.gif: 00_00.gif<br />
convert -fill $(SC) -draw "rectangle  12, 2 19, 9" $&lt; $@</p>
<p>00_02.gif: 00_01.gif<br />
convert -fill $(TH) -draw "rectangle  22, 2 29, 9" $&lt; $@</p>
<p>00_03.gif: 00_02.gif<br />
convert -fill $(FO) -draw "rectangle  22,12 29,19" $&lt; $@</p>
<p>01_00.gif: base.gif<br />
convert -fill $(FR) -draw "rectangle  12, 2 19, 9" $&lt; $@</p>
<p>01_01.gif: 01_00.gif<br />
convert -fill $(SC) -draw "rectangle  22, 2 29, 9" $&lt; $@</p>
<p>01_02.gif: 01_01.gif<br />
convert -fill $(TH) -draw "rectangle  22,12 29,19" $&lt; $@</p>
<p>01_03.gif: 01_02.gif<br />
convert -fill $(FO) -draw "rectangle  22,22 29,29" $&lt; $@</p>
<p>11_00.gif: base.gif<br />
convert -fill $(FR) -draw "rectangle  12,12 19,19" $&lt; $@</p>
<p>11_01.gif: 11_00.gif<br />
convert -fill $(SC) -draw "rectangle  22,12 29,19" $&lt; $@</p>
<p>11_02.gif: 11_01.gif<br />
convert -fill $(TH) -draw "rectangle  22,22 29,29" $&lt; $@</p>
<p>11_03.gif: 11_02.gif<br />
convert -fill $(FO) -draw "rectangle  12,22 19,29" $&lt; $@</p>
<p>animation.gif: base.gif 01_00.gif 00_01.gif 01_02.gif 00_03.gif 01_03.gif<br />
rm -rf animation<br />
mkdir  animation<br />
cp -a base.gif  animation/00.gif<br />
cp -a 01_00.gif animation/01.gif<br />
cp -a 00_01.gif animation/02.gif<br />
convert -rotate -90  01_02.gif animation/03.gif<br />
convert -rotate -90  00_03.gif animation/04.gif<br />
convert -rotate -180 01_03.gif animation/05.gif<br />
convert -rotate -180 00_03.gif animation/06.gif<br />
convert -rotate -270 01_03.gif animation/07.gif<br />
convert -rotate -270 00_03.gif animation/08.gif</p>
<p>convert -delay 20 -loop 0 animation/*.gif animation.gif<br />
rm -rf animation<br />
mkdir animation<br />
mv animation.gif animation/00.gif<br />
convert -rotate -90 animation/00.gif animation/01.gif<br />
convert -rotate -90 animation/01.gif animation/02.gif<br />
convert -rotate -90 animation/02.gif animation/03.gif<br />
convert -delay 20 -loop 0 animation/*.gif animation/$@<br />
convert -resize 16x16 animation/$@ $@</p>
<p>favicon.gif: animation.gif<br />
convert -transparent white $&lt; $@</p>
<p>favicon.ico: base.gif<br />
convert -resize 16x16 $&lt; favicon.ppm<br />
ppmtowinicon -truetransparent --output=$@ favicon.ppm</p>
<p>clean-ppm:<br />
rm -rf *.ppm</p>
<p>clean-gif:<br />
rm -rf *.gif</p>
<p>clean-ico:<br />
rm -rf *.ico</p>
<p>clean: clean-ppm clean-ico clean-gif<br />
rm -rf animation<br />

コメントを残す