でん⚡きかいでんのブログ

3Dプリンター、3DCG、PC、電子工作、HTML、CSS、ミシン、ペンタブレット、アイデア・材料・道具の紹介。PCデータのわかりやすいバックアップ方法。PC関連機器の使用感レビューなど。

2013.08.28 [水]

webページの小さいアイコンを表示させる方法

　ブログやホームページなどの、
　いわゆるウェブページのタイトルの左側に小さなアイコンが付いてますよね。

ファビコン説明用001

　これ、ファビコンっていう名前なんです。

　自分も作りました。

【手順】

1.ファビコン用の画像ファイルを作ります。（icoファイル）
　（作った画像を自分のブログやHPへアップロードします。）

2.HTMLに1行書き込みます。<head> ～ </head>間に。

　<link rel="shortcut icon" href="https://xxxxxxxx/favicon.ico" type="image/vnd.microsoft.icon" />

※フルパスじゃなくても可能。
　　UPするファイル名はfaviconでなくても構わない。

　これだけです。

　簡単でした。

【ファビコン用アイコンの作り方】

ファビコンに使いたい正方形の画像を用意します。
（縦横サイズが、16px、32px、48px、の3枚用意すると更に良しです。大きな画像を単純に縮小すると汚くなったりするので、こだわる人は各サイズの画像を用意されるといいでしょう。とりあえず作ってみるなら1枚だけでも構いません。）

画像からファビコンアイコンに変換してくれる無料Webページがあるので利用します。
（フリーソフトやこういった無料のWebサービスが他にもたくさんあるので、興味のある方は探してみるといいかもしれません。）

【favicon.icoを作ろう！】

使用する画像ファイルは同じ画像でもOK！
ただし画像が大きいと縮小された時に汚くなるので、60px以下のものを容易した方がいいかもしれません。
なるべくきれいなものにしたい方はそれぞれのサイズの画像を用意されるといいです。
（ファビコン用のicoファイルは、この3つの画像が1つのファイルに含まれたものとなって出てきます。）

使用する画像ファイルを選択したら【favicon.icon 作成】を押します。

アップロードした画像がファビコンになると実際どう見えるか、表示されます。
（ここでおかしな表示になる時は、画像ファイルを作り直した方がいいです。透過していないPNGファイルをサイズ別に作成、UPすると個人的には一番きれいに表示されるような気がします。）

表示に問題がなければ【ダウンロード】をクリックして完成したfavicon.icoファイルをダウンロードします。

【ブログやHPへの設定】

作ったfavicon.iconをアップロードします。

<head>～</head>の間に、

<link rel="shortcut icon" href="https://xxxxxxxx/favicon.ico" type="image/vnd.microsoft.icon" />

を書き込みます。

【具体例】

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="ja">

<head>
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta name="author" content="でん" />
<title>でんの奇怪な伝説？</title>

<link rel="shortcut icon" href="https://blog-imgs-58-origin.fc2.com/d/e/n/denkikaiden/favicon.ico" type="image/vnd.microsoft.icon" />

</head>

<body>

HPの場合だと、フルパスでなくても大丈夫な場合もあります。
（FC2ブログの場合は画像をUPした時に表示されているフルパスを使う必要があります。）

※各ブログやHPによって詳細な手順は違います。

【Favicon】wikipedia　https://ja.wikipedia.org/wiki/Favicon
　Favicon（ファビコン）は、ウェブサイトのシンボルマーク・イメージとして、ウェブサイト運営者がウェブサイトやウェブページに配置するアイコンの俗称である。
　Favorite icon（フェイバリット・アイコン：お気に入りアイコン）という英語の語句を縮約したものである。

【Amazon】