ファビコン(favicon)

用語集インデックスに戻る

記事作成日:2021/9/8
最終編集日:2022/8/27
ファビコン(Favicon)とは主にウェブサイトで掲載される自分自身や団体などをイメージする簡素化されたマークやイラストのことである。聞き慣れないこの語は「お気に入りアイコン(favorite icon)」の略語で、ブラウザで当該サイトをお気に入り登録すると、サイト名の先頭にこのアイコンが表示されることに由来する。

ブラウザでお気に入り一覧を表示させることで、多くのサイトがファビコンを設定していることが分かる。Facebook では四角い青に f を白抜きしたイラスト、Yahoo! では特徴的な字体の Y! が赤で表示される。簡素なファビコンは、当該サイトのトレードマークや商標として援用される。

サイトにファビコンを設定するのは容易で、ルートディレクトリにファビコンとして表示させたいイラストを favicon.ico のファイル名で置くのみである。詳細は「Wikipedia - Favicon」を参照されたい。ここでは主に宇部マニアックスのホームページ向けファビコンについて記述し、それ以前の個人ホームページ向けに作成していたファビコンについても若干記述する。
《 宇部マニアックスのファビコン 》
この総括記事を書いている現時点で、後述するホームページで昔使っていたファビコンに置換して既に使っている。しかしデザインや制作過程はまだ明らかにしていない。自分で気に入り面白いと思ったものでも複数の人に意見を聞いたうえで公表しようと思っている。
【 制作のきっかけ 】
まったくの一個人の思いつきに始まった郷土探索とホームページによる情報配信も、今やある程度の作品を世に送り出し宇部マニアックスとして相応な知名度も頂いている。送り出すものはコラムやホームページの記事といった形のないものである。特産品のような商品を世に送り出す人や会社は、一目みてあの会社(人)の作品だと分かるようなトレードマークを作成し商品に刷り込む。情報という形のない作品を送り出し続けてきたが故に、トレードマークの必要性は今まで特に認識されていなかった。

コラムやエッセイのような無形物を商品化するには、紙媒体やパンフレットによる供給が有力である。この方面での需要は非常に限られた人々の間ではあるが、確かに存在することを感じていた。時は宇部市制施行100周年の年であり、何か形にして世に送り出す必要性というよりも「今やっておきたい」意識があった。

このとき印刷されたパンフレットや名刺などに共通するアイコンを刷り込めば、宇部マニアックスを視覚化した形で記銘して頂くことができる。サインについては、事前にじっくり考えておくよりも実際に求められる場面が先に訪れ、暫定サインをさっと描いてその場を凌いでいる。宇部マニさんの知名度が拡がってきた今、マスコットキャラクタのようなものがあってもいいのではないかという意見が一部にあり、個人的にも同感するところであった。

アイコンの候補を考える上でベースとなった出来事がある。それはある人物が全くの思いつきで宇部マニアックスのイメージを描画したときのことだった。
【 宇部市章ベースのアイコン 】
いつのことだったか失念したが、宇部マニアックスのマスコットキャラクタかトレードマークのようなものを作って印刷物に刷り込めば良いのではという話を知り合いとしていた過程だったと思う。彼はアイコンの候補としてサクッと描画したものを見せてくれた。あいにくそれをここに掲載することができない(と言うか本人も画像は保存していないと言っていた)のでイメージだけ説明すると、宇部市章の中に黒いサングラスを掛けた如何にも怪しいふいんきの男の顔を埋め込んだアイコンだった。
宇部市章については Wikipedia - 宇部市の項目に掲載されている

私はそのイメージを一目見て爆笑した。イメージぴったりだったからである。是非ともそれを使いたいと話し彼も同意したが、私は惜しみながらもこう答えた:「面白いけど、紀藤閑之介が地面の下で目を回すだろう」[1]

そのデザインと発想がずっと頭に残っていたので、彼の描いたイラストをベースに”怪しい活動をしているオトコ”というイメージを持たせたアイコンを自前で作成しようと思った。
【 制作過程 】
トレードマークはヴィジュアルに突き刺さる分かりやすいものが必須条件である。FBの宇部マニアックスのページではプロフィール画像にお気に入りの場所の写真をバックに載せているが、写真は複雑だから却下して手描きのイラストで考えた。名称にもある通り宇部ベースで活動しているのだから、これを前面に押し出すものであることが必要と思った。この意味で紀藤閑之介の提出した「ウヘ」を重ねるアイデアはシンプルで捨てがたかったのである。

実際の市章の「ウヘ」はそれ自体がデザインだが、中央に怪しい人のイラストを入れたかったので、まずこの2文字を組み合わせて外枠を作ってみた。
この過程で正六角形にすれば何とか「ウヘ」と読めるし描画も容易だろうと思った。


しかしこれだと逆さになった折れ線が「ヘ」であることに恐らく気付いてもらえない。そこで全体を90度回転させて「ウ」と「ヘ」を横向きにした。現在は「ウベ」と表記するのが普通だから濁点があった方が良い。濁点をにするのはこのとき思い付いた。


正六角形を選んだのは審美性と描画のしやすさが理由である。上の試し描きにある五角形だとベース板型になるし正五角形にすると角張った印象を与える。お堅いイメージは宇部マニアックスに相応しくない。正六角形は平面を隙間無く埋め尽くし可能な最多の辺を持つ正多角形であり、そして6は最初の完全数である。宇部マニ的活動とは別に、数値・形・論理という三本柱から成る数学においてレクリエーション数学に一定の造詣を持つ意味合いも込めている。

次に枠内に描く”怪しい人”のイメージを探した。大元のイラストはこれである。


現在ではSNSのみならずテキストだけでは伝えにくい感情を表現する絵文字や顔アイコンが使われる。黒いサングラスを掛けた顔アイコンは怪しい人のイメージが付与されている。著作物である顔アイコンをそのままコピーして使うわけにはいかないので、ホームページ素材として使えそうなものを探した。しかし該当するイラストを見つけることができなかったので、顔アイコンを参考に一から描画することにした。先の外枠もそうだが、一連の描画には Windows に標準で添付されているペイントを用いている。

顔の描画と言っても黒いサングラスとややねじれた口元だけである。正六角形の外枠を見ながら適合するサイズでサングラスを描いた。これは特に何の捻りもなく、デスクの上に置いている私の眼鏡を参考に描いた。


最後にこの眼鏡画像に入るような人の顔を描き、顔が入るように正六角形の外枠を適宜拡大した。拡大するとジャギーが出て汚くなるので、それより太めの直線で正六角形を上書きした。拡大したサイズに合わせて2つの♥もフォント設定を変えて埋め込み直した。SNSの顔文字では人の顔が黄色で彩色されているが、同じ色だとコピーになるので敢えてピンクで彩色した。

出来上がった最初のイラストがこれである。


サングラスを掛けた人は、FBの”怪しい人”アイコンのオマージュである。これは「黒いサングラスを掛けた人=怪しい人」という外観からのイメージを固定させる意図はない。単純に「宇部マニさん=怪しい人・変な人」というだけである。宇部マニさんが変な人であるという事実は、自分自身事ある毎にいろんな場所で表明している。(→語録|宇部マニアックスを表す語録

黒いサングラス男からは泥棒を連想する人があるかも知れないが、若干その意味合いも含まれる。これはLFの工作員メンバーであるコードネームYの象徴を暗喩している。

冒頭書いた通りまだこのイラストを公表はしていないが、既にこれと同じファイルをルートディレクトリに favicon.ico としてコピーしている。ブラウザの種類やバージョンにも依存するが、うちのホームページを閲覧したりブックマークする操作で、サイト名の横にこのイラストが縮小されて表示されると思う。
【 変更する可能性がある部分 】
正六角形の一部を切断したり棒を着けているのも少しでも「ウヘ」のカタカナに近付けるためである。切れ目の幅や位置は特に意識していない。「ウヘ」の文字から作られていることを分かりやすくするために、正六角形を構成する直線をもう少し太くするかも知れない。この正六角形の外枠はベンゼン環を想起させる。これをもじって旧来のベンゼン環らしく3箇所を2本線にするアイデアもあったが、当サイトは有機化学には何の関係もないので自己却下している。

外枠や中の怪しい人の配色は特に変更を考えていない。顔は異なる色にするかも知れないが、♥印は赤か濃いピンクにする。

正六角形と人の顔の位置関係、比率、各パーツの長さなどは厳密に規格化はしていない。正規のトレードマークとして公開するには、既にこれと類似したイラストが他の人によって制作されていないかの調査が要る。個人的には自分で描いていながら「何処かで見たことがあるような気がする」イラストに見える。
【 最近の状況 】
冒頭に書いたように、このファビコンは将来的に発刊物や名刺などに印刷して宇部マニを代表するキャラクタにすることを意図していた。しかし2022年に宇部マニさんぽが放映されたとき、観察すべきマニアック・ポイントを教える”宇部マニア”なるキャラクタがデザインされ、いち早く放送で使われた。恐らく宇部マニアの方が知名度が高くなっていると想像し、ファビコンはホームページ向けのキャラクタにして名刺には宇部マニアを刷り込むことにした。

同年9月には宇部マニアックスとしては初めてとなる小冊子が出版される。この後ろの方にファビコンと宇部マニアが印刷されることとなった。これは隧道あるはずでしょう物語の p.48 下部に印刷されることとなっているクレジットである。


ファビコンは正方形領域に収まりコンパクトなので、領収書などに押すゴム印の制作も検討されている。
《 個人ホームページ時代のファビコン 》
ホームページ作成の歴史は古く、1999年に開設したのが始まりである。当時はまだファビコンという語はもちろんブラウザでの実装もされていなかったと思う。後に当該ホームページをイメージするアイコンを作成して favicon.ico のファイル名でルートディレクトリに置けば認識されるようになり、極めて簡素なファビコンを作成している。

前述の新しいファビコンを作成するまで、以下のものが favicon.ico に設定されていた。


平かなの「す」は、インターネット黎明期に取得したアカウントの呼び名「すた」に由来する。文字色はすたカラーであり、背景の黄色は最初期のホームページの背景色から採用している。
出典および編集追記:

1. カタカナの「ウ」と「ヘ」を上下に組み合わせた現在の市章が、宇部市長を2度務めた紀藤閑之介が市章の公募に対して個人的に匿名で応募した作品が採用された事実に基づく。もっとも市章のデザインは市が権利を留保している筈で、そんな遊び事如きで市に使用許諾申請を持っていこうという気にはならなかった。

トップに戻る