今や必須!ファビコンの画像を作成して設定する簡単なやり方

当ページのリンクには広告が含まれている場合があります。

2025年2月追記:現在ではファビコン画像は、こんなことをしなくてもワードプレスの標準機能で設定可能です。

ららです。

私のこのブログには、
ずいぶん前からファビコンが設置されているのですが、
変更してみようと思って、やり方を思い出していました。

あ、ファビコンていうのは、こういうやつです。

お気に入りにいれたときの、これ

ブラウザで表示した時のこれ

たかが小さな画像ひとつですけど、
これがあると、かなり印象がちがいます。
実際につけてみると、実感しますから^^

では、ファビコン設置のやり方をご紹介します。

目次

ファビコン用の画像を用意する

アバター画像を、そのままファビコンに使う場合も多いですね。
私も最初はそうしてました。
そのときは、こういうアバターの顔の画像を用意します。

でも、小さく縮めてしまうので、
誰の顔なんだかわからなくなることもあります。
なので、アバター用に、画像を作ってもいいですよね。
私は、こんな画像を作ってみました。

今回は、これを使いたいと思います。

アイコン用のファイル形式にする

アイコン用のファイル形式は、拡張子が ICO です。
これに変換します。

変換は、このサイトでやってくれます。
ファビコンを作ろう

画像を指定して、変換してもらって、
ダウンロードします。

私のパソコンにも、拡張子が ICO の、
こんなファイルができあがりました。

アイコンの画像をアップロードする

できあがった、アイコン画像(拡張子が ico の画像)を、
サーバーにアップロードします。

ワードプレスであれば、
いつものように、メディアのアップロードをやればOKです。

赤い枠のところが、この画像のURLです。
これをどこかに控えておいてください。

サイトの中で、ファビコン画像を指定する

ファビコンを表示させたいブログなり、サイトなりの
<HEAD> ~~ </HEAD> の中に、
以下の一文を追加します。

<link rel="shortcut icon" href="ファビコン画像の場所(URL)" />

たとえば、私のブログ(WP+エフィシェント)であれば、
テーマ編集 → ヘッダー から、

コードのなかほど、
link rel と何行も書いてある場所がありますので、
そこを見つけて、同じように書き込みます。

1カラムのキラーページであれば、
<HEAD> ~~ </HEAD> の中のどこでもいいので、
書き込みます。

結果はこうです。
キラーページの方は、ちゃんと表示されましたが、
ワードプレスの方は、古いアイコンのままです。

ブラウザを変えたら、ちゃんと表示されました。

調べてみると、IEは、
ファビコンがうまく表示されないことが多いらしいです。

クッキーや履歴などを削除してからもう一度試して、
それでもダメなら諦めなさいと書いてありました。

まぁ、こういうところに集中しすぎるのもよくないので、
ほどほどにファビコンを楽しみましょう~ ヽ(´▽`;)ノ

お問い合わせはこちらからお気軽に♪

応援してくれたら嬉しいです

記事が役に立ったら、ここをクリックして応援をお願いします。

私が稼げるようになった教材

アンリミテッドアフィリエイト
ごくごく普通の主婦だった私が、累計800万円以上稼げたのは、この教材を購入して作業をしたから。
詳細は、こちらのページでご紹介しています。
>>アンリミテッドアフィリエイトらら流レビュー
私がここまでたどった経験を元にした特典と、濃厚すぎるサポートも差し上げています。

無料レポートを書かずにメルマガ読者を全自動で集める方法!

役に立つと思ったらシェアしてね!
  • URLをコピーしました!

このブログを書いている人

ららです。
2人の子供はもう成人した50代主婦です。10年ほど前から、主婦業・母親業の隙間時間でアフィリエイトに挑戦。パート時代の約6倍の月収を達成することができました。

超マイペースで超怠惰で超食いしん坊の私でもできたその秘密は、とにかく諦めないこと!
これから始めるあなたに私の経験をお伝えするため、ブログ・メルマガで情報を配信するとともに、サポートやコンサルを行っています。常に初心者さん目線を忘れない安心できるブログを目指してますので、どうぞ何でもご相談くださいね。

コメント

コメントする

目次