ブログを始めて今日で8日目。ふと、
「ブラウザタブのアイコンってどうやって変更するんだろ？」
と思いました。
それより記事の内容考えたり、構成考えたり、もっと他に考えること山盛りあるんですが、トップブロガーの皆さんも
ちゃんと設定しているアイコン。
ちょっと調べてみたら
目次
ファビコン(Favicon)
というらしいですね。初めて知りました。
この記事ではFaviconとは何なのかを知り、Faviconの変更方法を画像付きで説明していきます。
この記事の手順で設定すれば読み終わるころにはFaviconが設定できます。
ちょっと本題とはそれますが、このFavicon。なんでFaviconというんでしょう？知ってますか？
Favorite icon（お気に入りのアイコン）の縮約なんですって。
意外とそのまんまでしたね笑
今回は僕が変更した方法と参考にしたサイトをご紹介します。
※ちなみに僕はwordpressを使っているのでプラグインを使用した変更方法です。
- Favicon用画像の準備
- プラグインをインストール⇒有効化する
- プラグインから画像を読み込む
以上、３ステップで終わりです。とってもカンタン！！
１．Favicon用画像の準備
画像を作る。
これ、素人にとってはとても難しい、めんどくさい作業に感じられます。
幸い、僕が作りたかったFaviconはひらがなの「ゆ」。「ゆらてぃく」の「ゆ」です。これまたカンタン！
でもちゃんとしたイラストやアイコンを作ってる方はどうしているんでしょう。
ちょっと調べてみると、画像さえあればフリーツールでFaviconを作成できるみたいですね！
例えば＠icon変換やToYconなどが使いやすそうです。
僕はというと…
- Excelでひらがなの「ゆ」を書く
- フォントを色々変更してしっくりくる文字を探す
- 色々なフォントを比較して「コレだ！」と思うものを探す
- WinShotでJPGを作成
こんなことしてました。ちなみに作ったExcelはこんな感じです。
これをWinShotというツールでJPGで保存します。
２．プラグインをインストール⇒有効化する
作成した画像をFaviconとして使うにはFavicon Rotatorというプラグインをインストールします。
プラグインの追加方法もカンタン！
- プラグインから「新規追加」をクリック
- 「Favicon」で検索
- 「Favicon Rotator」をインストールして有効化
これだけです！
Favicon Rotatorは2019/11/17現在はこんなアイコンでした。
このプラグインをインストールして有効化します。
３．プラグインから画像を読み込む
このプラグインを有効化すると、Wordpressの左メニューにある外観に「Favicon」というメニューが追加されます。
その「Favicon」をクリックするとアップロード画面が表示されるので、「Add icon」ボタンをクリックして
「１．Favicon用画像の準備」で準備した画像をアップロードします。
アップロードすると↓こんな感じになります。
こうなったら「Save Changes」ボタンをクリックするだけ！
これだけです！これだけでGoogle Chromeなどでタブを確認すると
おおおおおおおおおお！追加されていますね！
素人にとっては変化がすぐにわかるのでこんな小さな変化でもわくわくします。
まとめ
タブにアイコン(Favicon)を表示するには
- Favicon用画像の準備
- プラグインをインストール⇒有効化する
- プラグインから画像を読み込む
この３ステップですぐできます！
では、よきブログライフを！