かっちょええファビコンを作ってみよう!!

ファミコン、ではなくてファビコンとは?

最近、というよりかなり昔から?ブラウザのタブとかに表示されているサイト名の左側に小さなアイコンが表示されるようになっているっぽい...タブだけではなくて、お気に入り/ブックマークで表示されるサイト名の左側とか、アドレス欄の左側にも。

でも表示されないサイトもあるような。

https://hkjunk0.com/wp-content/uploads/favicon01.jpg

俺様の秘蔵のブックマーク、の一部分。左端のアイコンに注目。

調べてみると、このアイコンは「ファビコン」というものらしい。

何故こういうネーミングかというと、Favorite icon(フェイバリット・アイコン)の短縮形だからだそうな...かなり安直かも(^^;)。

俺様のファビコン

...折角だから俺様もファビコンを作ってみたい!という欲求が増大してきたので、早速作ってみることにした。

Wikiによると、ファビコンの仕様は以下のとおり。

  • ICO形式:複数の色数と解像度(16×16と32×32の4ビット16色、8ビット256色、24ビット1600万色、さらにWindowsでは24×24, 48×48, 64×64[1]、Mac OS Xなどで利用される64×64と128×128サイズのものを任意の色数)を保存したものをマルチアイコンとして保存

...何だかよく分からない(^^;)。

要するに、

  • 好きな画像を作成 → GIFアニメでもオッケー
  • 作成したファイルをICON形式に変換し、ファイル名をfavicon.icoとする
  • ウェブサイトにアップロードということらしい

アイコンファイル自体をエディタで作成する方法もありだが、俺様は絵心が全くないので出来上がりの画像を変換することにした。

ここで何の画像を俺様のサイトのファビコンにするのか、考えてみた...俺様のサイトを象徴する何か...やっぱりあれか、ファビコンというからにはファミコンか?

ということで、手持ちのファミコンの画像をアレしてファビコンを作ってみることに。

https://hkjunk0.com/wp-content/uploads/favicon02.jpg

この画像をファビコンにすることに決定。

次に、この画像をファビコン用のICON形式に変換するわけだが、世の中にはファビコンを自動生成してくれるサイトも色々とある。

俺様は下記のサイトのサービスを使ってお手軽に変換してみた → 現在リンク切れの模様。すんまそん。

あと、画像は予め正方形に整形しておくのが吉ということで。

https://hkjunk0.com/wp-content/uploads/favicon03.jpg

その名もファビコンジャパンというサイト。サービスが充実している。

で、出来上がった16×16サイズのファビコン...非常に小さいが俺様のオリジナルだ!

https://hkjunk0.com/wp-content/uploads/favicon04.jpg

小さい。以上。

このファビコンをウェブサイトの「index.html」のルートに置いて、<head>タグに <link rel=”shortcut icon” href=”favicon.ico”> と記述を追加しアップロードし、サイトのトップページを表示してやると...。

目出度くファビコンが表示された!

俺様はFirefoxをデフォルトのブラウザとしているが、ばっちりとタブの左側とかブックマークの左側に作成したファビコンが表示されている。

https://hkjunk0.com/wp-content/uploads/favicon05.jpg

こんなに小さくてもしっかりとファミコンに見えるのは不思議かも。

ということで、思ったより簡単にファビコンを作成し、使うことができた俺様、もっと早くやっとけば良かったと思ったのは言うまでもない。

ウェブサイトを開設している奴でファビコンがない奴は絶対作っとけ!ということで。