$type=carousel$columns=4$cat=hide$show=home

$hide=page-404-mobile

Blogger ブログにファビコンを設定する方法


ファビコン(favicon)は、ブラウザーのタブやブックマーク、アドレスバーなどに表示される小さなサイトアイコン画像のことです。
専用のファビコンをサイトに設定すると、ちょっとしたアクセントになります。ファビコンは、ユーザーにサイトのロゴのイメージを与えるようなブランディング効果もあります。
[post_ads]

検索結果デザイン変更により高まるファビコンの重要性

2019年5月22日、Googleは検索結果の新デザインを発表 しました。新デザインでは、ウェブサイトのブランディングを代表するサイト名とサイトアイコン(ファビコン)がトップに表示されます。2019年5月25日から、モバイル端末での検索結果は、新デザインに移行しました。これからパソコンでの検索結果ページも同様にファビコン(サイトアイコン)が、検索結果のトップに表示されるようになります。

サイトアイコンは、サイズは小さくても視覚的に与える印象は強いです。特に検索結果のカードの上部左に位置することで、更に印象は強まります。

新しいデザインの検索結果によって、今後、ブランディング要素を持つサイトアイコンやサイト名の重要性が高まってくることは、ほぼ確実です。

本件につきまして、詳しくは以下の記事をご参照下さい。

ファビコンについて

ファビコンは、各種ブラウザとの互換性を持つICOのファイルフォーマットが普及しています。サイズは、16x16, 32x32, 48x48, 64x64等があります。Appleの製品で使用されるアップルタッチアイコンではさらに大きいサイズも使用されています。

各種サイズや端末に合わせてファビコンをマニュアルで設定するのは、ちょっとした手間がかかります。なれていない人、サイト運営の初心者の方がご自分で設定するのは大変です。

幸いなことにBloggerでは、簡単にサイトオリジナルのファビコンを設定する機能を備えています。(WordPressでもファビコンは簡単に設定できます。

Blogger ブログサイトでのファビコンの設定手順

1. ファビコン画像ファイルの作成


予めファビコン用の画像を用意します。ファビコンは、方形でサイズは100KB未満の画像ファイルを作成します。

2. Blogger レイアウトページを表示

Blogger 管理メニューのレイアウトをクリックして、レイアウトページを表示します。レイアウトの最上部左に表示されている「ファビコン」のガジェットエリアの「編集」をクリックします。

3.  ファビコン画像ファイルのアップロード


「お気に入りアイコン(ファビコン)を設定」のウィンドウが開かれます。[Choose File]のボタンを押して、1で用意したファビコン用の画像ファイルを選択して、アップロードします。

4. アップロードしたファビコンの確認


アップロードされたファビコン画像がプレビュー表示されます。問題ないことを確認の上、[保存]ボタンを押します。


画像がファビコンに適さない時は、アップロードした画像を削除し、代わりの画像をアップロードします。

5. レイアウト画面での設定確認

ファビコン設定ウィンドウが閉じ、Bloggerのレイアウト画面に戻ります。レイアウトページのファビコンガジェットエリアには、デフォルトのBloggerのアイコンに代わって、アップロードしたオリジナルのファビコンが表示されます。設定されたアイコンの確認をします。

6. ブラウザーでファビコン表示の確認

ブラウザーでファビコンの設定を行ったBloggerのサイトのページを表示します。ブラウザタプに設定したファビコンが適切に表示されていれば、設定作業完了です。


上の画像と下の画像でのファビコンの表示は、ちょっとした違いですが、デフォルトのBloggerのファビコンからサイトオリジナルのファビコンに変わると、視覚的に受ける印象は異なります。


Bloggerでは、簡単にファビコンを設定できるので、是非、オリジナルのファビコン画像を設定なさることをお勧め致します。

コメント

BLOGGER

関連記事とスポンサーリンク

名前

AdSense,4,Blogger SEO,11,Blogger 活用法,21,Bloggerの基本機能と使い方,11,Bloggerの基本設定,7,MagOne,4,SNS,4,お勧め記事,14,お知らせ,1,
ltr
item
Blogger101@ブロギングライフ : Blogger ブログにファビコンを設定する方法
Blogger ブログにファビコンを設定する方法
ファビコンは、モバイルの検索結果のページの最上部やブラウザーのタブ、ブックマーク、アドレスバーなどに表示される小さなサイトアイコン画像のことです。専用のファビコンをサイトに設定すると、ちょっとしたアクセントになります。Bloggerでは、簡単にサイトオリジナルのファビコンを設定する機能を備えています。
https://4.bp.blogspot.com/-W4lvJo_h6jM/XOn0Bco_eEI/AAAAAAAAEDE/fFvtqCHc5Q4chf85LibzeqX8L_YUXgOpgCK4BGAYYCw/s640/Favicon%2Bsetting%2Bon%2BBlogger.png
https://4.bp.blogspot.com/-W4lvJo_h6jM/XOn0Bco_eEI/AAAAAAAAEDE/fFvtqCHc5Q4chf85LibzeqX8L_YUXgOpgCK4BGAYYCw/s72-c/Favicon%2Bsetting%2Bon%2BBlogger.png
Blogger101@ブロギングライフ
https://blogger101.blogging-life.com/2018/01/set-up-custom-favicon-on-blogger.html
https://blogger101.blogging-life.com/
https://blogger101.blogging-life.com/
https://blogger101.blogging-life.com/2018/01/set-up-custom-favicon-on-blogger.html
true
6719002676499593843
UTF-8
Loaded All Posts Not found any posts 全てを見る さらに読む 返信 返信をキャンセル 削除 By Home ページ 投稿 全てを見る 関連記事 ラベル アーカイブ SEARCH 全ての投稿 お探しのページが見つかりませんでした。 ホームに戻る Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share to a social network STEP 2: Click the link on your social network コードを全てコピー コードを全ての選択 全てのコードをクリップボードにコピーしました Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy 目次