ワードプレスやブログにファビコン(favicon)を簡単に設置する方法

  • 2013-6-17
自分だけのファビコン
Pocket

他のサイトと自分のサイトを見分けやすくするファビコン(favicon)の設置方法

 

選挙解説ワードプレスのプラグインを使わなくてもワードプレスにファビコンが簡単に設置できます.
Seesaa ブログ、FC2ブログでもこの技は使えます。無料でできますので活用してみてくださいね。

 

ちなみにファビコン(favicon)とはfavorite iconの略で、アドレスバーやタブ上にも表示されている小さい画像です。

 

設置するメリットは、ファビコンがあると、ブラウザ上でサイトの見分けがつく…ぐらいかしら?

お気に入りに入れていると自分のサイトが一目瞭然です(^^♪

 

ファビコン設置方法

 

選挙解説まず画像を用意します。ファビコン用の画像は小さいのでひと目でわかる画像のほうがいいでしょう。

 

選挙解説ファビコン用の画像をgifやjpeg形式でサイズは3つ作ります(正方形で16ピクセル、32ピクセル、48ピクセル)。Windowsに入っている「ペイント」でも作れます。

 

選挙解説三つの画像を1つにまとめるような作業(マルチアイコン化)します。

ファビコン用の画像をgifやjpeg形式をファビコン用拡張子.icoに同時に変換します

 

マルチアイコン化はするのに便利なサイトがあります。

favicon.icoを作ろう ←とっても簡単です。

参照をクリックし、先ほど作成した16ピクセル、32ピクセル、48ピクセルの画像をそれぞれ指定されている箇所にアップします。あとは、ダウンロード(自動的に.icoファイルになります)をクリックして、わかりやすいところに保存して下さい。

 

選挙解説ワードプレス(ブログ)に設置する方法です。まずはワードプレスに アイコン画像をアップロードします。ワードプレスのダッシュボードを開いて「メディア」→「新規追加」をクリック。アイコンをアップロードできたらファイルのURLが下の方に表示されると思います。

例 http://ドメイン名/wp-content/uploads/2013/06/favicon.ico

アップロードでエラーが出た場合は、直接FTPソフトでuploadsディレクトリにアップしてください。

例 http://ドメイン名/wp-content/uploads/favicon.ico

 

選挙解説ワードプレスでのファビコン設定手順です。

header.phpを編集します。「外観」 → 「テーマ編集」 → 「ヘッダー」をクリック。

<head>~</head>間に、 <link rel=”shortcut icon” href=”アイコン画像ファイルのURL” /> を挿入します。わかりやすいように、</head>の直前に挿入してもOKです。

※テーマ編集でヘッダーファイルが編集できない場合は、FTPソフトで、ヘッダーファイルのパーミッションを644から666にしてください(右クリックで属性変更ができます)。または、ヘッダーファイルをテラパッドなどで書き換えて、アップロードしてもOKです。

 

選挙解説挿入後、ファイルを更新で終了です。実際にページを表示し、アドレスバーやタブにファビコンが表示されているか確認してみて下さいね(^^♪

※faviconが表示されていない場合、古いページを見ている可能性があるので、最新の情報に更新してみて下さいね。

 

以上です(^^♪

少しでも皆さまのお役に立てたら嬉しいです♪

 

 

関連記事

FBもよろしくね♪

選管アドバイザーに聞く!

ネット選挙運動解禁に伴う有権者のネット活用方法とルールを選管アドバイザーの小島さんにインタビュー♪
動画で紹介しています

【PR】

ページ上部へ戻る