ブログを開いた時、タブに表示されるアイコンがありますよね。
「ファビコン」というんですが、これをオリジナルのものに変えたい！
ということでやってみたらめっちゃ簡単にできたので、やり方をご紹介しまーす＾＾
目次
ブラウザのタブやお気に入りで表示されるサイトのアイコンのこと。
↓こういうやつ('ω')
単なるちっさいアイコンやと思ってたら
ちゃんと「ファビコン(favicon)」っち名前がついとるんですね。
知らんやったわ。
で、普通は設定したテーマによってファビコンも決まっとるんですが
これがデフォルトのままやとなんとなくダサいし…
同じテーマを使っとる人は同じ見た目になるんで人気のテーマやとダダ被りです。
このファビコンを変えるだけで一気にオリジナルサイト感が上がるんですよねー♪
ファビコンの設定はプラグインでやるとめっちゃ簡単です('ω')
わたしは「Favicon Rotator」というプラグインを使いました。
ワードプレスにログインしたら
まずはダッシュボードの「プラグイン」→「新規追加」を開きます。
「Favicon Rotator」を検索し
今すぐインストールをクリック。
インストール中になると思うのでちょっと待ちます。
インストールが完了したら「有効化」をクリックしてプラグインを有効化します。
「外観」を見てみると「Favicon」という項目が追加されてるはずです。
これでプラグインの準備は完了('ω')♪
「外観」→「Favicon」を開くとこの画面になります。
ここでファビコンの設定をしていきます。
ちなみに、スマホでは「タッチアイコン」と呼ぶそうな。
同じものやと思って問題ないです。
「Favicon Rotator」では、タッチアイコンも設定できるんでついでにしときましょう。
まずは「Add Icon」をクリック
ファビコンに設定したい画像をアップロードします。
ファイル形式やサイズは勝手に調節してくれるんで
気にせずぽいっとドロップしましょう。
ファビコンは正方形で表示されるんで
事前に正方形にトリミングしとった方が仕上がりはキレイです。
使いたいファイルがアップロードされたらこのように表示されます。
一番下の「Add Browser Icon」をクリック。
するとこのようにファビコンが表示されるんで
「Save Changes(設定の変更)」をクリックすれば完了('ω')
タッチアイコンの設定は
「Set Icon」をクリックして、以下ファビコンと同じ流れでOKです。
こんな感じで表示されると思うんで、
「Save Changes(設定の変更)」をクリックしておきましょ('ω')
ファビコン用にわざわざ画像を用意しない場合、
例えば、サイト内ですでに使用しているアバターを使いたいとかの場合。
(わたしもコレです)
画像のアップロード画面で
「メディアライブラリ」のタブを選択すると
サイトにアップロード済みの画像が一覧で出てきます。
好きな画像を選んで「表示する」をクリックしたら
「Add Browser Icon」または「Set Icon」をクリック。
これでOKです(´▽｀)
アップロードの必要がいらんけ手間が省けますよん。
ファビコン設定前のデフォルトがこちら
↓ ↓ ↓
おー！変わったー(∩´∀｀)∩
タッチアイコンはというと、お気に入りの表示が
デフォルトから
↓ ↓ ↓
ちゃんと変わっちょったー(∩´∀｀)∩
設定の反映には時間がかかることもあるんで
(わたしはタッチアイコンは即反映されたけどファビコンは２分くらいかかったよ)
気長に待ってみましょ。
・ワードプレスに「Favicon Rotator」をインストール
・画像ファイルをインストールまたは選んで設定ボタンを押す
これだけで簡単に設定できますよ。
なんかテーマファイルを編集する方法もあるにはあるんやけど
ソースコードいじるのっち怖いやんね…
プラグインやったら一瞬なんでこっちの方法を強くおすすめします(笑)
ちっちゃいアイコンやけど、設定あるなしでなぜかサイトの雰囲気がガラッと変わるんで
サクサク―と設定してみてくださいねー('ω')
読了時間：約 7分
潤子が使っている外注化ノウハウ
記事投稿ができないお悩みは
これさえ読めばもう終わり！
人におまかせでブログが育つ方法がイチから全部わかります。
コメントフォーム