ブックマークバーやアドレスバーにサイトアイコンを表示する方法と作り方!

ブックマークバーやアドレスバーにサイトアイコンを表示する方法と作り方!

こんにちは、パワフル母ちゃんみゆきです^^

ブックマークバーやアドレスバーに小さい画像があるのはご存知ですよね?

私のサイトで言えば、これです。

これ、サイトアイコン(ファビコン)と呼ばれる物です。

しっかりウェブサイトやブログを運営している人は間違いなく表示させているのですが…

たまに残念な表示も見かけます…。。
そう、こんな感じ。

上のメモ帳のようなサイトアイコンは楽天アフィリエイトです(笑)
そこ、『楽』って入れようよ!!ってツッコみたくなりますよねw

他にもそのサイトが使用しているテーマのアイコンが表示されている事も…。
中身がすっごく良いサイトでも、なんだか残念…って気持ちになっちゃいます。

そう!!

サイトアイコンを表示する目的は見た目を良くする為です!!!
そしてブランディングですね。

他のサイトと差別化して自分のサイトを際立たせましょうー^^

これ一つで印象がガラッと変わりますので面倒…っと思わずに是非設定して下さい!

画像さえ用意しておけば設定に2分かかりません。

初心者さんは真似してやってみてね!

サイトアイコンを作成して設置する方法の解説動画

動画で解説しています!

サイトアイコンを作成して設置する方法

サイトアイコン(ファビコン)の画像を用意する

まずはサイトアイコンに使用する画像を用意します。

サイトアイコンのサイズは512ピクセル以上となっているので512ピクセル以上の画像を用意しましょう!

ちなみに私のサイトアイコンの画像はこちらです。

512×512ピクセルでjpgで作っています。

昔は16ピクセルとか32ピクセルのicoファイルを用意していたんですが、最近は512ピクセルと少し大きめになっていますね。

16ピクセルってどれぐらいかと言うと…これ。

めちゃくちゃ小さいですね(笑)
本当にアドレスバーに表示されるサイズぐらいの画像を用意していたんです。

『みゆきん家』をiphoneのsafariでブックマークに入れるとこんな感じで表示されます。

最近はパソコンよりもモバイルからウェブサイトを見る人の方が多いですよね。
今後も増えていくと思われるので小さすぎる画像だと不都合が起こるのかな?っと分析しています。

動画ではPhotoshopを使用して512ピクセルの画像を作る方法も解説しているので良かったら見てみて下さい^^

WordPressにサイトアイコン(ファビコン)を設定する

1.ワードプレスメニューの外観→カスタマイズをクリックします。

2.画面が切り替わったらサイト基本情報をクリックします。

3.画像を選択をクリックして、用意したファビコンの画像を選択します。

4.このように表示が変わったら、アドレスバーを見てみて下さい。

サイトアイコンが表示されているハズです!

サイトアイコンが表示されるとブログがパワーアップした気持ちになるのは私だけでしょうか(笑)
絶対にあった方がいいので、今すぐ設置してみて下さいねー^^

ちょっと知ってたら便利なブログの豆知識はここをクリック♪

お問い合わせ
質問や感想はこちらからお願いします!

パワフル母ちゃんみゆきのメルマガ


コメントはここからお願いします^^

*