2012年09月11日

ファビコンを設定してみた

おはようございます、もんすけ(@mongsuke)です。

ウェブブラウザのブックマークやタブのページタイトルの左側にアイコンが表示されることがご存知の方が多いかと思います。
そのアイコン(=ファビコン)を作成・設定してみました。

ファビコン作成


ファビコンに設定したい画像を用意します。
用意した画像をファビコン用のサイズと拡張子に変換します。
僕は、下記のサイトを利用しました。

ファビコン作成。favicon.ico 無料で透過マルチアイコンが作れます。
ウェブブラウザ(IE等)で、URLのとなりに表示されているアイコンがfaviconです。 16x16と32x32と48x48ピクセルのマルチアイコンが簡単に作れます。ブックマークアイコンを作りましょう ...


小画像の「ファイル選択」ボタンをクリックし、用意したファイルを選択します。
続いて、「favicon.ico 作成」ボタンをクリックします。
最後に、「ダウンロード」ボタンをクリックし、ファイルを保存します。
ファビコン作成

ファビコンの設定


1.ファビコン用の画像ファイルをアップロード
2.アップロードしたファイルの絶対パスを取得
3.HTMLの変更
下記の一文をHTMLの<head>と</head>の間に加えます。
<link rel="shortcut icon" href="アップロードしたアドレス">
4.再構築

以上で完了です。
問題なければ閲覧時にファビコンが表示されているはずですのでご確認ください。

以下、Seesaaブログでの設定方法をもう少し詳しく紹介します。

Seesaaブログでのファビコン設定


「ファイルマネージャー」画面の「ファイルを選択」ボタンをクリックし、ファビコン用の画像ファイルを選択します。
そして、「アップロード」ボタンをクリック!
ファビコン設定@

「HTML」ボタンにカーソルを合わせるとコードが表示されるので、コピーします。
ファビコン設定2

下記の「■■■■■」の部分を後ほど使用します。
<a href="■■■■■">XXXXX.ico</a>

ブログのHTMLの編集を行います。
「デザイン>HTML」にて使用しているHTML名を選択します。
ファビコン設定3

「デフォルトHTML」しかない場合、「HTMLの追加」をクリックします。

<head>と</head>の間に下記の一文を追加します。
もし「<head>と</head>の間ってどういうこと?」という方は、「</head>」を検索し、その直前の行に一文を追加してください。
<link rel="shortcut icon" href="■■■■■">


ファビコン設定5

HTMLの編集が完了したら、忘れずに「保存」ボタンをクリックしてくださいね!
「デフォルトHTML」しかなかった方は、保存する前に「HTML名」に好きな名前を設定してください。

設定が完了したら確認します。
Chromeでは、ファビコンを設定しているブログを表示させるとタブにファビコンが表示されます。
ファビコン設定6
posted by もんすけ at 06:57 | Comment(1) | TrackBack(0) | ブログ設定 | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
なんて親切な解説!
「ファビコン」という言葉を初めて聞いた私でも
すんなり設定できました!
ありがとうございます!!!
Posted by コスパルプンテ at 2014年02月07日 22:02
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック
Related Posts Plugin for WordPress, Blogger...
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。