行き着く先はあんこ

Bloggerでファビコンを表示させる方法

blogger-favicon

ブラウザのタブに表示されるファビコンを設定する方法を紹介します。

初期状態はオレンジ色の「B」マークが設定されています。特に何もしてなければこのアイコンが表示されます。

スポンサーリンク

ファビコン用画像を準備する

最初にファビコンに使いたい画像を準備します。

以下のサイトで簡単に作ることができます。
favicon.cc

右のパレットから色を選択して、1マスづつぽちぽち塗っていきます。

パレットに1マスづつ塗っていく

完成したら「Download Favicon」から画像をダウンロードします。

画像をダウンロードする

これで画像の準備は終了です。

Bloggerにファビコンを設置する

Bloggerの「レイアウト」→「ファビコン」と進みます。

Blogerのファビコンを設定する画面まで移動

「ファイルを選択」から先ほどの画像を選びます。

ファイルを選択して画像をアップロードする

「保存」して先ほどの画像が表示されていれば設定終了です。

画像が表示されていれば設定終了

表示には時間がかかるかも

キャッシュ等の関係でなかなか表示されないことがありますが、時間が経てば表示されるようになります

どうしても今すぐ確認したければ、ブラウザのキャッシュを削除すると表示されるようになると思います。

HTMLから設定する

先ほど紹介した方法の他にHTMLを編集する方法もあります。

「テンプレート」→「HTMLの編集」から以下のコードを<head>~</head>内に追加します。

<link href='ファビコンのurl' rel='shortcut icon' />

‘ファビコンのurl’にはアップロードした画像のurlを入力してください。

設定後は確認も忘れずに。

さいごに

このブログのファビコンを作っていなかったので、この機会にファビコンを設定しました。なけなしのデザインセンスで作りました。

今さらですが、他のサイトのすばらしいファビコンをみると憧れてしまします。

まあ、自分のブログにオリジナリティを出したい人はファビコンを設定するのはどうでしょうか。

では!

スポンサーリンク

スポンサーリンク

コメントを残す