favicon.icoの作り方 HTML 知識Z(ゼータ)

トップページHTML >favicon.icoの作り方

favicon.icoの作り方

Date:2010/06/04
Category: HTML


ホームページを開いたときやお気に入りに追加したときに見えるアイコンのようなものをfavicon(ファビコン)と言います。有無によって特別何かあるわけでもないのですが、サイトのブランド力をアップさせるために導入するのはいいことだと思います。

faviconってこんなヤツ

Googleのfaviconはこんな感じ。


さ、実際の作り方ですが、まず、ペイントソフトを準備して16×16ピクセルのfavicon.icoになる元画像を作ります。(私の場合はphotoshopを使いますがなんでもOK)。
拡張子はjpg,gif,png,bmpなんでもOKです。

次に、FavIcon from Picsというfavicon.icoを作ってくれるサイトに移動して、

faviconの作り方2

ここで、さっき作ったファイルを選んで、「Generate Favicon.ico」ボタンをクリックして「Download FavIcon」ボタンをクリックしてデスクトップにダウンロードすればfavicon.icoの生成は完成です。

似たサービスでFavicon Japanというのもありますので、お好きな方で。


そして、できあがったfavicon.icoを任意に場所にアップロードして、あとはHTMLファイルのタグ内に下記のようなソースを書きます。

<link rel="shortcut icon" href="favicon.ico">
もし、表示されなかったら、favicon.icoのパスが間違っているか、キャッシュが貯まっていると思うので、キャッシュをクリアしてみて下さい。


favicon.icoの作り方 の関連記事

No related items.

コメント

No comments yet

コメントする




次項 【HTML】改行による空白(スペース)を除去する方法
前項 CSSは全ての要素について記述する

知識Z(ゼータ)トップへ
モッピー | お金がたまるポイントサイト
About Us

知識Z(ゼータ)は違法性のあるコンテンツ、不適切な表現の含まれるコンテンツを一切を排除した安心安全な総合優良コンテンツサイトを目指しています。細心の注意を払っておりますが、万が一、不適切なコンテンツ等がございましたら、ご一報ください。ご意見・ご連絡

当サイトは、月額1,050円で高機能・安心レンタルサーバーの【XSERVER(エックスサーバー) 】にて運営させていただいております。いつも大変ありがとうございます。

Calendar
<   2010-06   >
  12345
6789101112
13141516171819
20212223242526
27282930   

Amazon.co.jp
What's New
タグ
オンラインデータ
訪問者数:1 人
投稿記事数:283 件
08380291