アイコン画像(ファビコン)の作成と設定方法

アイコン画像(ファビコン)の作成方法及び設定方法について解説いたします。

はじめに


あなたの作成したブログサイトを訪問した読者に印象を与えるための作業を行います。


あなたのブログサイトをブラウザで表示してみてください。


すると、赤丸で囲った部分が空欄になっていませんか?


favicon01


空欄になっている場合には、この部分にあなたのブログ特有の画像(ファビコン)を表示させるようにしてあげましょう。


以下のやまてつのプロフィール画像を表示させる場合を例にご説明したいと思います。


yamatetu

ファビコン画像作成方法


まず、Windowsにデフォルトでインストールされている、「ペイント」を起動させてください。


起動後、「開く」を選択してあなたが表示させたいと思う画像を選択してください。


favicon02


表示された画像を「名前を付けて保存」を選択し、名前を


favicon.ico


として保存してください。


favicon03


以上で、ファビコン画像の作成準備は完了です。


ファビコン画像設置方法



続いて、作成した画像をサーバーに移動させます。


さくらサーバーにログインし、さくらブログの管理画面を表示してください。


「記事投稿」>「ファイルマネージャ」をクリックしてください。


favicon04


ファイルの追加の欄に「参照」ボタンがありますので、先ほど保存したfavicon.icoのファイルを選択し、「アップロード」ボタンをクリックしてください。


favicon05


また、後であなたがサーバーへ保存した画像の位置を入力する必要が出てきますので画像の保存場所のURLを確認しましょう。


ページの下へ移動すると、先ほど保存した画像が表示されていますので、タイトルの欄に「favicon.ico」と表示されている部分をクリックします。


favicon05-1


元ファイルの欄にあなたが保存したfavicon.icoのURLが記載されていますので、リンクの上でマウスを右クリックし、「リンクのURLをコピー」をしてください。


favicon05-2


※コピーしたURLはメモ帳などにコピーして保存してください。


以上でサーバーへの画像の保存が完了しました。


ファビコン画像表示設定方法


続いて、実際にブラウザで画像を表示させるための設定をしましょう。


さくらサーバーの設定画面で、「デザイン」>「HTML」をクリックしてください。


favicon06


HTMLの記述されたページが表示されますので、その中で


<head>


から始まり、


</head>


で終わるところを見つけましょう。


favicon07


<head>から</head>の間に以下の文字を追加してください。


<link rel=”shortcut icon” href=”メモ帳にコピーしたURLを記入”>


<link rel=”shortcut icon” href=”メモ帳にコピーしたURLを記入”>


favicon08


記入が完了したら最後に、「保存」ボタンをクリックしてください。


以上で、ファビコン画像の設置作業は完了です。


ファビコン画像が表示されているかを確認するためにサイトを表示して下さい。


以下の図のように表示されていれば作業は完了です。


favicon09


まとめ


ファビコン画像の設定方法についてご説明いたしました。


基本的にはどのブログであっても今回ご説明した内容でファビコン画像の設定を行うことができます。


なお、kaetenJOY(カエテンジョイ)テンプレートのファビコン画像の設定方法の詳細については以下の記事を参考にしていただければと思います。


「kaetenJOY(カエテンジョイ)テンプレートのファビコン画像設定方法」





2 Responses to “アイコン画像(ファビコン)の作成と設定方法”

  1. みさぼん より:

    やまてつさん、はじめまして。

    みさぼんと申します(^-^)

    ファビコンの設定方法を探していて
    こちらのブログにたどり着きました。

    とてもわかりやすく解説して下さっているおかげで
    スムーズに設定できました♪

    ありがとうございました!

    またブログに訪問させていただきます。
    これからも応援しております♪

    みさぼん

    • やまてつ より:

      みさぼんさん、やまてつです。
      こんにちは。

      コメントありがとうございました。

      今後もわかりやすい記事作成を心がけていきたいと思います。

コメントを残す

*

サブコンテンツ

プロフィール

こんにちは、やまてつです。

やまてつ

自分らしい生き方がしたいと思い、脱サラしてネットビジネスで独立を果たしました。

現在は自分の望んだ通りの自由で幸せな人生を歩んでいます。

詳しいプロフィールについてはこちらから。

お問い合わせ

疑問や質問などがございましたら、こちらからお問い合わせをお願いいたします。

お問い合せ

questionbutton

このページの先頭へ