PAGE TOP

関連情報

印刷する

faviconの作成

背景の透明化にも取り組む

のりのり

たまたま、この記事に出くわした人には「favicon」の意味がわからないですね。逆に、探してこの記事を見つけた人には、あまり、収穫がないかもしれませんが、悪しからず。

faviconとは、「Favorite icon(フェイバリット・アイコン:お気に入りアイコン)」という英語の語句を縮約して「favicon」となったようです。

標準化はどうなっているか気にかかることでもありますが、私たちはお役所でもないので、あまり気にかけないことにします。

ようはHTMLのヘッダ部分にfaviconを呼び出す手続きをすると、16✕16ピクセルの小さなアイコンが、ブラウザのタブの端っこに表示されるようになります。

favicon

ちなみに「浅草橋CMS」では管理画面からディスクリプション、キーワードなどとともに、このfaviconを登録することができます。

登録するためには、まず、アイコンを作らなければなりませんので、興味の有る方は以下を参照して下さい。

相性の良いサイトは

PhotoshopやIllastratorを使って画像を作成する技術がありませんので、すでにある画像をファビコン(favicon)にしようと思い、いくつかのサイトを探しましたが、私にとって相性の良いサイトは以下のサイトでした。

fabicon

webサイト作成に関しては自己流ですので、難題にぶつかるとあちこちのサイトを見にいきます。

「これだ!」と参考にさせていただくのは、やはり私にとって相性が良いというか、明確な画面、素人向けのわかりやすい説明が書かれているものに限られます。

いつも残念に思うのは、サイトを探して行き着くと、ほとんど英語のサイトですので、画面が気に入っても中身を追いかけるのはあきらめます。

こちらのサイトは英語がわからなくても、ぼちぼち、と進めることができました。

favicon2

①Select Your Image
①の画面 「ファイルを選択」から画像を選択します。次に、「Upload Image」をクリックします。

右上のボックスに画像が表示されますので、アイコンとして取り出したい範囲を画面上で指定します。

②Cat & Preview
②の画面 サイズを選択して「Cat & Preview」をクリックします。
16×16を選択しましが、あとから別サイトで、32×32で作成しておけば、実際は16px四方で表示されるということを知りました。

元々の画像が正方形ではなかったので、若干、いびつな形になってしまいました。

③ Favicon Resuliting
③で「Download Favicon」をクリックしました。

ダウンロードした「favicon.ico」をサーバーにアップロードし、  内にと記述しました。
このサイトを紹介してくれたのは、
http://www.webword.jp/xhtml/favicon/index1.html
アップロードできましたが、背景の白が気になり、次にファビコンの「背景色を透明にできないか」という問題にぶつかりました。

そこで探し当てたのが
“Photoshopで背景透過の美しいfaviconを作成する”
http://2xup.org/log/2006/04/28-2323
という記事でした。

ここのページで紹介サれているPhotoshopのプラグインをインストールしてPhotoshop上でfaiviconが作成できます。

ここでの耳より情報は
faviconにする画像を
“サイズダウンする際は『イメージ > 画像解像度』で行いますが、その際のオプションにPhotoshop CSより追加されたバイキュービック法(シャープ)を利用すると画像のぼけ具合は少なくすみます。”
という記事でした。

tootle

今回、faviconにした画像は、あべちゃんがwindowsのpaintで作成してくれた「tootleくん」です。

キーワード