ファビコン作成方法・ファビコンの埋め込み方

ファビコンって何?って方の為に

上記画像の赤丸がしてある部分をファビコンって言います。

Webサイトを作る時には、こういう所も拘っていきたいですよね。

そんな方の為にファビコン作成方法と実際にサイトに表記させる埋め込み方を解説したいと思います。

…ここからが続き

ファビコン作成方法

PhotoShopやFireworksなどでファビコンにしたい画像を作成し、「gif」「png」「jpg」どれでも構わないので書き出して下さい。

そして上記サイトに掲載されている

Favicon Japan!!

上記画像部分に参照し、横の「Faviconを作成する」のボタンを教えて下さい。

するとico形式に自動で書き出してくれるので、それをダウンロードしちゃって下さい。

たったこれだけの事でファビコンが作れるちゃうんです!

ファビコンの埋め込み方

今回は分かりやすく説明する為にも、先ほど作ったファビコンをトップページのindex.htmlと同列階層において下さい。

そしてhead内に下記ソースを記入

<link href="favicon.ico" rel="shortcut icon" />

これで埋め込みも完了です。

まだ使った事がない方は一度やってみて下さい。

Comments

MIYA

MIYA

ワンちゃんネットさん。

表示確認しているブラウザは何になるんでしょうか?
IE の場合 Cookie が残っている為表示されない事もあります。
Firefox などでみても見れないようならファビコンへのパスが間違っているとしか思えないです。。。

2010年04月25日 23:55

ワンちゃんネット

ワンちゃんネット

Web Design Works 8 を使用してHPを作成しています。
タイトル、URLの前にファビコンを付けたいのですが、どうしてもファビコンを付けられません。
お教え下さい。

2010年04月12日 15:27

Comment Form

※コメントが認証されるまで、コメントは反映されません。ご了承くださいませ。


(公開されません)
 
Captcha

画像の中に見える文字を入力してください。

page top へ

Sponsor

  • heteml
  • Movable Type

Category

Recent Article

2011 04-05
iPhone スマートフォンサイトのデザインのまとめ
2011 04-04
スマートフォン対応にしてみました
2011 04-01
CSS3 要素を透明に出来る Opacity と RGBa の使い方
2011 03-31
サイトリニューアルしました
2010 12-01
CSS3 でボタンを作る為のテクニック、サンプル集
2010 11-24
綺麗でリッチなフッターデザイン集のまとめ 60
2010 11-18
緑と黒色を使った Webデザインのサイト 25
2010 11-10
知っておいた方が便利なエクセルの知識

Recent Comments

Archive

2011年
2010年
2009年
2008年

Related Article