忍者ブログ

SOLID DAYS BLOG

このブログは、日記、商品紹介、iPhone、猫、モンスト、ドリスピ、ぴよりーな、面白ネタ、PSP活用など、色々取り上げています。

[PR]

×

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

コメント

現在、新しいコメントを受け付けない設定になっています。

無題

そんなものが作れたんだww

便利ですね

無題

おっ!これは助かるな~
前々から気になって一度調べてみようと考えていたんだがその必要も無さそうだw

助かったよ、ありがとねー

無題

おおおおおおおお!
前から気になってて、調べてたんだけど、反映されなかって・・・
これはうれしい!

無題

これやってみようっとー^^b
あと、メール送ってみた!

無題

俺もやっといてみよう!!

分からないことがあったら
教えてください

無題

おぉ!
これはありがたい!
さっそくやってみようw

無題

>>地
便利!ありがとう。

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

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

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

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

>>CH-CH
やってみて

Favicon.ico (ファビコン)の作り方、表示方法 - HTML

ファビコンとは、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

コメント

お名前
タイトル
文字色
メールアドレス
URL
コメント
パスワード Vodafone絵文字 i-mode絵文字 Ezweb絵文字

無題

そんなものが作れたんだww

便利ですね

無題

おっ!これは助かるな~
前々から気になって一度調べてみようと考えていたんだがその必要も無さそうだw

助かったよ、ありがとねー

無題

おおおおおおおお!
前から気になってて、調べてたんだけど、反映されなかって・・・
これはうれしい!

無題

これやってみようっとー^^b
あと、メール送ってみた!

無題

俺もやっといてみよう!!

分からないことがあったら
教えてください

無題

おぉ!
これはありがたい!
さっそくやってみようw

無題

>>地
便利!ありがとう。

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

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

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

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

>>CH-CH
やってみて

カウンター

最新コメント

無題 Tat'jana Met [05/05]
無題 Inessa Ves [05/05]
無題 Ariadna Let [05/05]
KORANSCHULE Fairmietung GmbH Innsbruck HSKFairmietungGmbHalomo [04/02]
無題 名無しさん@そりっどでいず。 [11/29]
無題 阿部れく [11/29]
無題 阿部れく [11/29]

ブログ内検索

プロフィール

HN:
うぃーく[weak]
性別:
男性
職業:
会社員
趣味:
ゲーム、WEB制作、動画編集

お問い合わせ

管理