ブラウザのアドレスバーやタブの左端に小さな画像が表示されている時があります。その画像をファビコンと呼びます。Favorite Icon(フェイバリットアイコン)を略してファビコンだそうです。
ファビコンがあると多少なりとも目立ちますし、オリジナリティも出て他のサイトとの差別化をはかることができます。ということでファビコンを設置する方法について以下に記しておきます。
§1 ファビコンとして使用する画像を準備する
画像のサイズは16×16できちんと表示されるものを用意します。フォーマットは「JPG」、「GIF」、「PNG」あたりで良いと思います。
ファビコンとして使用するにはIcon形式に変換する必要があります。変換してくれるWebサイトがあるのでここを利用して作成することにします。
ここ↓をクリックするとWebサイトへ移動します。
上記サイトへ移動したら[ファイルを選択]をクリックします。
画像ファイルを選択します。
[Generate FavIcon.ico]をクリックします。
ファビコンが生成されます。[Download Favicon Package]をクリックすると、ファビコンファイル(favicon.ico)をダウンロードすることができます。
§2 ファビコンファイルのアップロード
ファビコンファイルが準備できたらサイトへアップロードします。アップロード完了後、ファイルのアップロード先を確認しておいて下さい。(次の作業で必要になります)
例) http://blog-imgs-30.fc2.com/a/b/c/blog/〜
§3 ヘッダー部の編集
アップロードが完了したら、ヘッダー部分(<head>〜</head>)に以下を挿入します。[アップロード先]部分は先ほど確認したアップロード先に置き換えて下さい。
|
1 |
<link rel="shortcut icon" href="[アップロード先]/favicon.ico"> |
こんなカンジに表示されます。
関連する記事
FC2ブログからWordPressへ引っ越しした時にやったこと
FC2 ブログでSyntaxHighlighterを使ってソースコードを表示する。
WordPressでWordPress Popular Postsを使って「人気の記事」を表示する
Feedly購読ボタンを設置する方法
WordPressを高速化するプラグイン「Quick Cache」を導入する方法
Macにcasperjsをインストール
Windowsにcasperjsをインストール
Javascriptフレームワーク CasperJS 基本的な使い方(1) 画面キャプチャをとってみる
Javascriptフレームワーク CasperJS 基本的な使い方(2) ページ内の特定の要素を取得する
Javascriptフレームワーク CasperJS 基本的な使い方(3) ボタンやチェックボックスをクリックする
Javascriptフレームワーク CasperJS 基本的な使い方(4) Webスクレイピングしてみる
WordPressでRecent Posts Plusを使って「最近の投稿」を表示する
