ブラウザのタブに表記されるアイコンを変更してみよう！
WordPressでブログを始めてみてからしばらくすると、「あれ！他の人のブログのアイコンがちがう！💡」となるかと思います
というのも、私もなりました笑
今回はその設定方法をご紹介していきたいと思います！
ファビコンとは
faviconは、ウェブサイトのシンボルマーク・イメージとして、ウェブサイト運営者がウェブサイトやウェブページに配置するアイコンの俗称である。favorite iconという英語の語句を縮約したかばん語である。出典：Wikipedia
みなさんの味方、Wikipedia先生は上記のような定義となっています。ファビコンは、ブラウザ上のタブに表記されるアイコンのことだとざっくり覚えてくれればいいのかなぁと思います
ファビコンのルーツが載ってるのも面白いですね笑
では早速設定方法です！
プラグインを使用して設定
今回はプラグインを使用して設定する方法のご紹介となります
設定前に画像準備が必要💡
よーし早速設定だ！の前に・・・アイコン用の画像設定が必要となります。私の場合は、書籍を取り扱ったりするケースが多いためアイコンは本のアイコンにしました！
画像は自分で作成してもいいと思いますし、私のようにフリーのアイコン素材を使ってもいいとおもいます
Icooon mono
私が使ったサイトはこちらです
こちらはフリー素材のサイトとなっています！モノクロのユニコーンが可愛いですねw
シンプルなアイコンや画像が多くてわたくしはとても好みでつかっています！
Favicon From Pics（拡張子変更必須では無いため興味のある方のみ閲覧ください）
※私が勘違いをしていたようで、拡張子の変更は必要無いです！
まず先にサイトURLはこちら
http://favicon.htmlkit.com/favicon/
アイコンが準備できたら次は、拡張子の変更です
一般的な画像ですと.PNGや.jpegなどが多いと思います
それらを「.ico」という形式に変換する必要がありますので、その変換方法です
私が勘違いをしていたようで、拡張子の変更は必要無いです！
Photoshopなどの画像編集ソフトですと、.icoなどへの拡張子変更ができるようですが、私もできませんので、Favicon From Picsというサイトを利用していきます！
使い方は下記です
私の場合ICOOONさんで準備してきた画像をドラッグアンドドロップします
その後、Generate Fivicon.icoをクリック！
しばらくすると上記画像がでてきますので、Download Favicon PackageをクリックするとZIP形式でダウンロードされます。そちらを解凍して完了となります
Fabicon Rotator
そうしたらやっとプラグインへ入っていきます
プラグインのインストールを行ったら設定をしていきます
WordPress上の外観のFaviconから設定をします
add Iconから画像を設定します
上記で拡張子の変更必要が無いと言ったのがこちらです汗
どうやらJpegやPNGなどでもできるらしいです
Save Changesで完了です
こちらは反映までに少し時間がかかるようです汗
気長に待ってみましょう！
私の場合はこうなりました！
ファビコンを表示してみよう〜のアイコンが本になっています！
成功です！
おわりに
アイコンは私自身もなかなか変更をしていなかったため、少し時間を置いてしまいましたが、ブログやサイトのブランディングに繋がるのでぜひ設定をしていきましょう！
以上です
コメント