忍者ブログ
SOLID DAYS
カウンター

開設から 日が経過しましたよ
おすすめ
最新コメント
無題 名無しさん@そりっどでいず。 [06/19]
上信越道の甘楽PA上下線 ぴよ子彦 [02/26]
オンライン うぃーく(weak) [02/21]
無題 ショウ [02/21]
無題 名無しさん@そりっどでいず。 [02/19]
無題 名無しさん@そりっどでいず。 [02/19]
久しぶりに 名無 [02/18]
管理人 うぃーく(weak)
×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

ファビコンとは、WEBサイトやWEBページに関連付けられたアイコンのこと。
WEBサイトなどをお気に入りに追加している場合や、タブ型表示したときに目にする、あのちっちゃいアイコンのことです。
下の画像のような場面、さらにはブログやサイトをリスト表示するときなんかによく使われます。

favicon.png

現在では、殆どのサイトにファビコンが使われるようになっていて、サイトのイメージ、ブランド性、デザイン性などを定着化させる為には欠かせない存在となっています。

自分のブログにファビコンを付ければ、お気に入りなどでリスト表示した時に目立つし、ブログの雰囲気を作るのに役立つかもしれません。ファビコンは、デザインが決まりさえすれば、簡単に作れ、表示もすぐにできます。
今回は、ファビコンの作り方と表示方法を紹介します。


もう気づいた人も多いと思いますが、Googleのファビコンが2009年の年明けすぐに変更されました。
22e5334a.png
これです。子供っぽいイメージで、Googleのイメージとはすこしかけ離れた感じがしました。
しかしこれ、5色使用ととてもカラフルで、かなり目立つデザインだと思います。
そしてずっとみていると、丸く、プクッと浮かび上がってくるようにも見えてきます。
やはり、お気に入りのリストなど、ずらっと並ぶサイトの中から、グーグルをクリックしてもらうためには、目立つデザインでなくてはいけませんね。
参考:小さくてもサイトブランディングに重要な「Favicon」 インターネット-最新ニュース:IT-PLUS



ファビコンの作り方

ファビコンの作り方を紹介していきたいと思います。
といっても、結構簡単で、単純です。
まず、ファビコンの大きさは16x16ピクセル、または32×32ピクセル
これはもう決まっていることなので、これ以上大きなものは使えません。

早い話、ペイントなどでドットを打って描画し、.icoの拡張子で保存すれば完成です。
正方形の画像を、16×16ピクセルに縮小する方法もあります。


大きい画像をファビコンサイズにする方法

4405e62f.png
FavIcon from Pics -- how to create a favicon.ico for your website
こちらのサイトでは、正方形の画像をファビコンサイズに縮小してくれます。

例えば、こんな画像をペイントで作成したとします。
d58f8def.png
(300×300ピクセル)

この画像を、上のサイトで変換します。
「参照」で画像を選択し、「Generate FavIcon.ico」ボタンを押すだけです。
ZIPファイルでダウンロードして解凍すれば、preview_16x16.pngこのような画像を簡単に得ることができます。

このとき、ファイルの名前はfavicon.icoというようになっていて、拡張子は.icoです。


WEB上のエディターを使って作成する方法

bc3d4b3b.png
favicon.ico Generator
こちらのサイトでは、ドットによる描画でファビコンが作れます。
「Import Image」で画像をアップロードして編集することもできます。

Favicon Japan!! -ファビコン作成方法-
丁寧に作り方をまとめてくれているサイトもあります。



ファビコンの表示方法

作成した、拡張子が.icoのファイルをアップロードする。
ブログのファイルアップロード機能などを使えばいいと思います。

テンプレートの編集で、HTMLのHEADの部分に、
<link rel="shortcut icon" href="アップロードした.icoファイルのURL" >
を加える。HEADの部分とは、<HEAD>から</HEAD>の間のことです。

FC2ブログなら、管理画面の「テンプレートの設定」⇒「編集」で。
(例)
51e6bd5b.png


.icoではなく、.jpgなどの画像形式でもできますが、若干ブラウザによって表示のずれが生じたりします。
なるべく、拡張子が.icoのものを使った方がいいと思います。
サイズは32×32ピクセルがベストです。

自分のブログにファビコンをつけて、他のブログと違う所をみせてみてはいかがでしょうか。
PR
RSS Feed Widget
この記事にコメントする
お名前
タイトル
メールアドレス
URL
コメント
パスワード   Vodafone絵文字 i-mode絵文字 Ezweb絵文字
無題
そんなものが作れたんだww

便利ですね
2009/01/29(Thu)18:26:42 編集
無題
おっ!これは助かるな~
前々から気になって一度調べてみようと考えていたんだがその必要も無さそうだw

助かったよ、ありがとねー
はり 2009/01/29(Thu)18:31:42 編集
無題
おおおおおおおお!
前から気になってて、調べてたんだけど、反映されなかって・・・
これはうれしい!
リング URL 2009/01/29(Thu)20:56:01 編集
無題
これやってみようっとー^^b
あと、メール送ってみた!
ゆうた URL 2009/01/29(Thu)21:37:00 編集
無題
俺もやっといてみよう!!

分からないことがあったら
教えてください
DEATHINOPS URL 2009/01/29(Thu)22:58:10 編集
無題
おぉ!
これはありがたい!
さっそくやってみようw
CH-CH 2009/01/30(Fri)17:22:10 編集
無題
>>地
便利!ありがとう。

>>はり
ファビコンっていうことば自体マイナーだから、調べにくいよな。

>>リング
そうだったんだぁ
今は、反映されてるよ!

>>ゆうた
わかった
みておくね

>>DEATHINOPS
遠慮なくきいてくださーい

>>CH-CH
やってみて
weak weak★ URL 2009/01/31(Sat)19:36:37 編集
RSS Feed Widget
ブログ内検索
プロフィール
[HN]
うぃーく(weak)
[性別]
男性
職業:
学生
[趣味]
ゲーム、ランニング、WEBデザイン、動画編集、音楽鑑賞
お問い合わせ
ブログランキング
にほんブログ村 スマホ・携帯ブログ iPhoneへ


人みている。
管理
Respect Links
相互リンク
Twitter
RANK
ページランク
Copyright © 2008 SOLID DAYS All rights reserved.
忍者ブログ [PR]