新ブログバナー

--.--.--スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

2014.05.26ファビコンを設置しよう

今回はファビコンの設置について。
以前、FEZの部隊HPを運営していた頃に記事を書いたことがありましたが、カテゴリの整理(削除)に伴い、自分メモも兼ねて改めて紹介と設置方法を載せてみようと思います。
(メモ帳はタブ表示できる無料のサクラエディタを使用しています。)

ファビコンとは

ファビコンとは、ブラウザでサイトを訪問したとき、タブの左側に現れるアイコンのことです。
正式には、Favorite icon(フェイバリット・アイコン/お気に入りアイコン)といい、ファビコン(Favicon)は略語となります。

YahooとGoogleのファビコン
YahooやGoogleの左側にあるアレです。


FC2であえば、デフォルトでユニコーンのアイコンが入ります。
コレを自分のアイコンに変えてみましょう。


設置方法

ファビコンの変更方法は以下の通りです。

・アイコンを準備する
・アイコンをアップロードする
・ヘッダーにタグを挿入する

アイコンを準備する

ファビコン用のアイコンは自分で作るか、どこからか好きなアイコンをダウンロードしてください。
ファビコンのサイズはブラウザ用16×16です。

ファビコン作成中

拡張子は.icoでないといけませんので、.jpgや.pngなどは一度変換する必要があります。
ファイル名は分かりやすいものをつけましょう。

以下のサイトで簡単に変換できます。
favicon converter

または以下のファビコンを作成できるジェネレータ「favicon.cc」があります。
favicon.cc

作成中のアイコンがリアルタイムに確認できるので、とても便利です。
完成したら、サイト下のDownload faviconでアイコンを保存してください。


アイコンをアップロードする

アイコンが準備できたら、FC2にアップロードします。
いつも通り画像をアップロードする手順と同じです。

アイコンのアップロード

アップロードしたアイコンのURLはのちほど使用しますので、すぐにコピーが取れる状態(別ウィンドウなど)にしておくか、コピーしてメモ帳か何かに貼り付けておいてください。
(コピー→貼り付けを以後コピペと呼びます。)

アイコンURLをコピペ!


ヘッダーにタグを挿入する

ブログのヘッダー部分にアイコンを表示させるタグを挿入します。
その前に、もしもの時のためにコードのバックアップを取りましょう。

環境設定→テンプレート設定

環境→テンプレート設定に入って、HTML編集のコードを全て選択(CTRL+A)して、コピーします。

HTMLの編集部分をコピペ

コピーしたものをメモ帳などに貼り付けて、適当に名前をつけて保存します。
もし変更を保存して表示がおかしくなった時は、このバックアップしたほうを入れ直して元の状態に戻してください。


ヘッダーに下のタグを挿入しますので、これもメモ帳などにコピペしてください。


タグ内の"アイコンのURL"部分に、先ほどアップロードしたアイコンのURLをコピペしてください。
私の場合はこんな感じです。


挿入するタグ
クリックで拡大

次に、アイコンURLが入った上記タグをヘッダーの中に挿入します。

タグを入れる場所
さきほどのテンプレート設定→HTML編集内で</head>を探して、その直前(一つ上)に挿入するタグをコピペしてください。
(</head>は比較的上のほうにあります。)

あとは変更を保存して完了となります。

自分のアイコンが表示される!
F5を押して更新すると、アイコンが変わります。
変わらない場合はキャッシュが残っているので、一度履歴などをリセットしてから更新してみてください。

以上、ファビコンの変更方法でした。
自分が作ったアイコンで、よりオリジナリティを出すのも良いですね。
Secret

TrackBackURL
→http://hasenritte.blog85.fc2.com/tb.php/933-c991b016
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。