ワードプレスでのファビコンの作り方とプラグインなしで設置する方法

fabicon 作り方 画像

wordpressで、ファビコンを作ってみました。

なかなか実行できていなかったのですが
自分の覚え書きもかねて、作り方や設置方法の手順を
書き残しておくことにしました。
今回は、プラグインを使わない方法で設置してみました。

ファビコンとは?

サイトの左側のタブにあるマーク。

たとえば、ヤフーや楽天、グーグルなどページを開いたときに
わかりやすい目印の代わりになりますね!
ブックマークアイコンとしても使えます。

 

ファビコン 画像

 

他のサイトとの差別化にもつながるので、
時間に余裕があったら、作ってみることをオススメします。

私自身、「じゃあ作ってみようか~、よっこらしょ」っと
腰を上げるのが遅すぎた感がありますが、
作ってみたら、わりと簡単に出来ました!

 

 

ファビコンのアイコンの作り方

では、作っていきましょう!

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

ファビコンにする画像は、イラストレーターなどで作った
透過しているものがよいです。

ない場合は、

pixlrのphoto editor がオススメです。
無料で簡易的に透過画像が作れます。

photo editor 画像

 

私の場合、ペイントでふき出しを作りphoto editorで透過した文字を
いれました。サイズは、300×300とか正方形で作ってみました。

 

こんな感じで。

ファビコン 画像

フォントは、ヒツジグモポッカリ  を使わせていただきました。

 

 Favicon用のファイルに変換する

「ファビコン 作り方」で検索すると・・・

Favicon.icoを作ろうというサイトで、簡単につくることができました。

ファビコン 作り方 画像

サイズごとに、同じ画像を選択します。

タブ用、ブックマーク用、PC上のアイコン用の3種類を選びます。

ファビコン 作り方 画像abi2

右側に、3つアイコンが表示されたらダウンロードをクリック。

すると、 Favicon用のファイル 「○○.ico」を作ることが出来ました。

 

Wordpressの設置方法

Favicon Rotatorというプラグインを使うと簡単に
設置できるようですが、プラグインをつかわなくても
簡単に設置できそうだったので
今回は、使わない方法で設置してみました。

メディア > 新規追加 で上記のサイトで作った
「○○.ico」というファイルを画像をアップロードします。

ファビコン設置 画像

ファイルのURL(赤枠)部分を使います。

 

外観 > テーマ編集  > ヘッダー (header.php)を編集します。

favicon 設置 画像
<head> ~ </head>の間に設置していきます。

 

<link rel="shortcut icon" href="あなたの作ったファビコン画像のURL">

上記の赤枠の部分を http~の部分を入力します。

 

すでにデフォルトでファビコンが表示されている場合は、
ctrl  + F キーで、 ”shortcut icon” を入力して探します。

たとえば、賢威だと

<link rel=”shortcut icon”  type=”image/x-icon” href=”<?php bloginfo(‘template_url’); ?>/favicon.ico” />

というコードがすでに入力されていますので、上記のコードに書き直します。

 

ファイルを更新すると・・・

favicon設置 画像

faviconが表示されました。

ちょっと小さめでしたね・・・。

 

おわりに

意外と簡単に設置できたので、もう少し早くかえてもよかったかな~と
感じました。(反省・・・)

 

作ってみて気づいたのですが、
シンプルなマークのほうが、表示したときにわかりやすいかも
しれません。
(また、変更してみます。)

 

faviconがあると、自分でも見つけやすく、
間違えてページを閉じてしまうこともなくなるので
是非、設置してみることをオススメします。

わかりにくいところがあるかもしれませんが、
お役に立てたら幸いです。

もし、わからないことがあればお気軽に質問ください☆

※登録後すぐにメールが届かない場合は迷惑メールフォルダをご確認ください。

コメントを残す

サブコンテンツ

このページの先頭へ