一凡人 求職中の素人視点なので、真に受けずに疑って読んでくれ。
本日は小ネタだがファビコン作成の方法を題材とする。
その前にそもそも「ファビコン」とは何なのか?少し説明する。
ファビコンというのは平たく言うとウェブページ自体を表すアイコン画像の様なものだ。
俺の考えでは、ファビコンというのはブランディング的な要素もあるだろうが、一番の採用理由は「ブックマーク」でページの認識を容易にする事だと思う。なぜなら、アイコンで識別できるからだ。ブックマークバーを使用していると、そのブックマークの説明テキストが長いとバーに入れられるブックマークの数が限られてしまう。アイコンを並べる形式にできればたくさんブックマークが表示可能になって、わかりやすいアイコンであればテキストよりも判別が早く、使い勝手が良くなるというわけだ。だがアイコンが同じだと何のブックマークかわからない。アイコン自体で識別できるのが望ましい。そこでファビコンの出番となる。
ここで大事なのは、ブックマークを使用するのが不特定多数の読者であるという事だ。つまり自分がブックマークやブックマークバーを使用しないからと言って、ファビコンを導入しない理由にはならない。
さて、ファビコンを作るには、まずファビコンの大元となるフリー素材を探す。
これは各自やり方あるだろうが、俺は簡便にフリー素材サイトを使用している。自作でも良いだろう。とにかく、著作権で問題のないモノを使うのが大切だ。また、アイコンであるから元が大きいと縮小されたときに判別しづらくなりやすい。小さくても分かりやすい意匠が望ましい。写真などを元にすると縮小した際のチェックが必要だ。
以下の方法ではjpg画像を元にすると仮定している。変換は可能なので他の形式でも問題ない。
このブログでも冒頭の画像をファビコンに使用している。これをこのまま上げると、まずファイルサイズが100kbまでだと怒られるので、サイズを縮小する。色々方法はあるが、以下のコマンドを使用:
> jpegoptim --size=90k original.jpg
original.jpg 1600x1200 24bit N JFIF [OK] 161594 --> 95234 bytes (41.07%), optimized.
また、ファビコンは「正方形画像」でないと受け付けられない。この画像のサイズを再確認する:
> identify original.jpg
original.jpg JPEG 1600x1200 1600x1200+0+0 8-bit sRGB 95234B 0.000u 0:00.000
サイズは1600x1200で、見た感じ左右200pxずつ削れば良さそうだ。そのような領域削減を「crop」という。cropも色々方法があるが、以下のコマンドを使用:
> convert original.jpg -crop 1200x1200+200+0 abt100K_1200x1200.jpg
これで大元の「original.jpg」から、サイズ100kb以下で1200x1200のファビコンファイル「abt100K_1200x1200.jpg」が完成。
本当は、これに加えて「背景色」を無色(透明)にしたほうが良い。冒頭の画像では白色で中の絵が分かりづらい。だが面倒だし判別にはこれくらいで充分としてそのまま使用している。
ファビコン等というモノは「前時代的」だとわかっているが、ブックマークに入れる際にテキストが無くてもアイコンで識別できるというのがどうしても捨てがたく、いつも思わず作ってしまう。あまり意味がないが、作成手順を載せるのも一興として本日の題材とした。どうだろうか。