2013.08.28 [水]
webページの小さいアイコンを表示させる方法
ブログやホームページなどの、
いわゆるウェブページのタイトルの左側に小さなアイコンが付いてますよね。

これ、ファビコンっていう名前なんです。
自分も作りました。
これだけです。
簡単でした。
【ファビコン用アイコンの作り方】
【ブログやHPへの設定】
※各ブログやHPによって詳細な手順は違います。
【Amazon】
いわゆるウェブページのタイトルの左側に小さなアイコンが付いてますよね。

これ、ファビコンっていう名前なんです。
自分も作りました。
【手順】
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サービスが他にもたくさんあるので、興味のある方は探してみるといいかもしれません。) - 使用する画像ファイルは同じ画像でもOK!
ただし画像が大きいと縮小された時に汚くなるので、60px以下のものを容易した方がいいかもしれません。
なるべくきれいなものにしたい方はそれぞれのサイズの画像を用意されるといいです。
(ファビコン用のicoファイルは、この3つの画像が1つのファイルに含まれたものとなって出てきます。) - 使用する画像ファイルを選択したら【favicon.icon 作成】を押します。
- アップロードした画像がファビコンになると実際どう見えるか、表示されます。
(ここでおかしな表示になる時は、画像ファイルを作り直した方がいいです。透過していないPNGファイルをサイズ別に作成、UPすると個人的には一番きれいに表示されるような気がします。) - 表示に問題がなければ【ダウンロード】をクリックして完成したfavicon.icoファイルをダウンロードします。
【favicon.icoを作ろう!】



【ブログやHPへの設定】
- 作ったfavicon.iconをアップロードします。
- <head>~</head>の間に、
<link rel="shortcut icon" href="https://xxxxxxxx/favicon.ico" type="image/vnd.microsoft.icon" />
を書き込みます。 - HPの場合だと、フルパスでなくても大丈夫な場合もあります。
(FC2ブログの場合は画像をUPした時に表示されているフルパスを使う必要があります。)
【具体例】このブログの場合こんな感じになってます。(かなり省略してます)
<!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によって詳細な手順は違います。
【Favicon】wikipedia https://ja.wikipedia.org/wiki/Favicon
Favicon(ファビコン)は、ウェブサイトのシンボルマーク・イメージとして、ウェブサイト運営者がウェブサイトやウェブページに配置するアイコンの俗称である。
Favorite icon(フェイバリット・アイコン:お気に入りアイコン)という英語の語句を縮約したものである。
- 関連記事
-
-
ブログ定規とブラウザフォント 2013/02/17
-
webページの小さいアイコンを表示させる方法 2013/08/28
-
HTMLとCSS内にコメントを書くための記号 2013/09/06
-
【私的メモ】文字コード、改行コード、UTF-8N 2014/04/14
-
センターで揃える(基本) 2014/05/18
-
コメントの投稿