ワードプレスでファビコンをめっちゃ簡単に変更する方法【超図解】

目安時間:約 7分

 

ブログを開いた時、タブに表示されるアイコンがありますよね。

「ファビコン」というんですが、これをオリジナルのものに変えたい!

 

ということでやってみたらめっちゃ簡単にできたので、やり方をご紹介しまーす^^

 

ファビコンとは?

ブラウザのタブやお気に入りで表示されるサイトのアイコンのこと。

 

↓こういうやつ('ω')

 

単なるちっさいアイコンやと思ってたら

ちゃんと「ファビコン(favicon)」っち名前がついとるんですね。

知らんやったわ。

 

で、普通は設定したテーマによってファビコンも決まっとるんですが

 

これがデフォルトのままやとなんとなくダサいし…

同じテーマを使っとる人は同じ見た目になるんで人気のテーマやとダダ被りです。

 

このファビコンを変えるだけで一気にオリジナルサイト感が上がるんですよねー♪

 

ワードプレスのプラグインで簡単に変更できるよ♪

ファビコンの設定はプラグインでやるとめっちゃ簡単です('ω')

 

わたしは「Favicon Rotator」というプラグインを使いました。

 

Favicon Rotatorをインストール

ワードプレスにログインしたら

まずはダッシュボードの「プラグイン」→「新規追加」を開きます。

 

 

「Favicon Rotator」を検索し

今すぐインストールをクリック。

 

インストール中になると思うのでちょっと待ちます。

 

インストールが完了したら「有効化」をクリックしてプラグインを有効化します。

 

「外観」を見てみると「Favicon」という項目が追加されてるはずです。

 

 

これでプラグインの準備は完了('ω')♪

 

Favicon Rotatorの設定をする

「外観」→「Favicon」を開くとこの画面になります。

 

ここでファビコンの設定をしていきます。

 

ちなみに、スマホでは「タッチアイコン」と呼ぶそうな。

同じものやと思って問題ないです。

「Favicon Rotator」では、タッチアイコンも設定できるんでついでにしときましょう。

 

ファビコンの設定

まずは「Add Icon」をクリック

 

ファビコンに設定したい画像をアップロードします。

ファイル形式やサイズは勝手に調節してくれるんで

気にせずぽいっとドロップしましょう。

 

ファビコンは正方形で表示されるんで

事前に正方形にトリミングしとった方が仕上がりはキレイです。

 

使いたいファイルがアップロードされたらこのように表示されます。

一番下の「Add Browser Icon」をクリック。

 

 

するとこのようにファビコンが表示されるんで

「Save Changes(設定の変更)」をクリックすれば完了('ω')

 

タッチアイコンの設定

タッチアイコンの設定は

「Set Icon」をクリックして、以下ファビコンと同じ流れでOKです。

 

こんな感じで表示されると思うんで、

「Save Changes(設定の変更)」をクリックしておきましょ('ω')

 

既存のメディアファイルも使えるよ

ファビコン用にわざわざ画像を用意しない場合、

例えば、サイト内ですでに使用しているアバターを使いたいとかの場合。

(わたしもコレです)

 

画像のアップロード画面で

「メディアライブラリ」のタブを選択すると

サイトにアップロード済みの画像が一覧で出てきます。

 

好きな画像を選んで「表示する」をクリックしたら

「Add Browser Icon」または「Set Icon」をクリック。

 

これでOKです(´▽`)

アップロードの必要がいらんけ手間が省けますよん。

 

ファビコンを設定したら見た目がこんな感じに変わります

ファビコン設定前のデフォルトがこちら

↓ ↓ ↓

おー!変わったー(∩´∀`)∩

 

 

タッチアイコンはというと、お気に入りの表示が

 

デフォルトから

↓ ↓ ↓

 

ちゃんと変わっちょったー(∩´∀`)∩

 

 

設定の反映には時間がかかることもあるんで

(わたしはタッチアイコンは即反映されたけどファビコンは2分くらいかかったよ)

気長に待ってみましょ。

 

ファビコン変更まとめ

・ワードプレスに「Favicon Rotator」をインストール

・画像ファイルをインストールまたは選んで設定ボタンを押す

 

これだけで簡単に設定できますよ。

 

なんかテーマファイルを編集する方法もあるにはあるんやけど

ソースコードいじるのっち怖いやんね…

プラグインやったら一瞬なんでこっちの方法を強くおすすめします(笑)

 

ちっちゃいアイコンやけど、設定あるなしでなぜかサイトの雰囲気がガラッと変わるんで

サクサク―と設定してみてくださいねー('ω')

 

 

この記事に関連する記事一覧

コメントフォーム

名前

 

メールアドレス

 

URL

 

 

コメント

トラックバックURL: 
このブログを書いている人
 

潤子です

旦那&息子&娘&2にゃんず

育児に家事にPTAに奔走しながら
ネットを使って収入を得ています♪

詳しいプロフィールは⇒こちら

応援ぽちっとお願いいたします
 
登録必須の神メルマガ【無料だよ♪】

「もう何もしたくない!」
サボることだけを
徹底的に極めてしまった
【究極の放置ビジネス】

gaityu300.png

完全外注化マニュアル
作者本人による
アドセンスが徹底的に楽になる
ノウハウ満載メルマガ

これを知ったらもう普通には
戻れなくなるかも…( *´艸`)

最強すぎる外注化ノウハウ

潤子が使っている外注化ノウハウ

記事投稿ができないお悩みは
これさえ読めばもう終わり!

人におまかせでブログが育つ方法がイチから全部わかります。

最近の投稿
カテゴリー
潤子のついったー
最近のコメント
お問い合わせはコチラ

ご意見・ご質問などありましたら

こちらからお願いします(^^)

潤子へメールを送る