サイトにFavicon(ファビコン)を設定する方法

ファビコンを自分のサイトに設定する方法を紹介します。今回は「Wordpress」「FC2ブログ」「Seesaaブログ」の三種のサービスに絞って解説しますが、それ以外のサイトでもやることは同じなので参考にできると思います。

またファビコンの作成方法に関しては前回までの記事で紹介しているので、そちらを参照してください。

ファビコン設置の基本的な手順

  1. ファビコン画像を作成する
  2. Web上に画像をアップロード
  3. ヘッダーにアップロードした画像のURLを記入

どのサイトでもこの流れは大体共通しています。次の項からはそれぞれのサービス別に解説していきます。

WordPressでファビコンを設置する方法

WordPressにファビコンをアップロードする

管理画面にログイン後、「メディア」→「新規追加」で用意したファビコンをアップロードします。
screenshot_48

アップロード完了後、「編集」をクリックしすると右側にファイルURL等の情報が表示されます。URLは後ほど必要になるのでこの段階でコピーしておくといいでしょう。
screenshot_49

ヘッダー(header.php)にファビコンURLを記入する

下記のコードをコピーしてください。「favicon.ico」の部分は先ほどコピーしたファイルURLに置き換えてください。

 完成したコードを「header.php」の中に記載します。場所は何処でも良いですが、わかりやすい位置にすると後からファビコンを変更したいときに便利です。自分の場合は<head>の直後に挿入しています。

screenshot_50 変更を保存し、ファビコンが表示されていれば完了です。

FC2ブログでファビコンを設置する方法

FC2ブログではデフォルトの状態でもファビコンが表示されていますが、設定することによりオリジナルのファビコンに置き換えることが可能です。

FC2ブログにファイルをアップロードする

管理ページから「ファイルアップロード」をクリックし、用意したファビコン画像をアップロードします。 

完了するとこのようになっているはずです。表示されているファイルURLは後ほど必要になるのでコピーしておくといいでしょう。

screenshot_52

テンプレートにファビコンURLを記入する

 下記のコードをコピーしてください。「favicon.ico」の部分は先ほどコピーしたファイルURLに置き換えてください。

 

コードの用意ができたら、管理ページから「テンプレートの設定」をクリックします。 screenshot_53

下へスクロールすると「”自分の使っているテンプレート名”のHTML編集」という欄があるので、その中の<head>内に先ほど用意したコードを記入します。

screenshot_55

記入が完了したら「更新」を押せばブログに反映されます。

Seesaaブログのファビコン設置方法

基本的にFC2ブログと方法は基本的に方法は同じです。

Seesaaブログ上にファイルをアップロードする

「マイブログ」から管理画面に進み、「ファイルマネージャ」をクリックします。開いた画面で用意したファビコンをアップロードします。

screenshot_56

ファイルのアップロードが完了したら画面のようになるので、表示されているファイル名をクリックしてください。

screenshot_57 ここにアップロードしたファイルのURLが表示されているのでコピーしておきます。

screenshot_58

ファビコンURLをHTMLに記入する

下記のコードをコピーしてください。「favicon.ico」の部分は先ほどコピーしたファイルURLに置き換えてください。

コードが用意できたら、今度は管理ページから「デザイン」へ進みます。

screenshot_64

「CSS/HTML編集」をクリックし、自分が使用しているテンプレート名を選択します。

「HTML編集」のタブを選択し、先ほどのコードを<head>内に記載します。

screenshot_62

編集が完了したら忘れずに下部にある「保存」を押します。

まとめ

個々に若干の差異はあるものの大方の流れは共通しているので、仕組みさえ理解できればどのサイトにも適用できると思います。


SNSでもご購読できます。