※こちらはWordPressのCocoonテーマを使用したブログでの備忘となっております
突然ですが皆さんファビコンってご存知ですか？
大変お恥ずかしい話、私IT系に勤めていながら
知りませんでした
正確にはアイコンが独自のものであるのは知っていたけどファビコンという名詞を知らなかったというかなんというか。。
（ちなみに上司にこの話したらハチャメチャに笑われた後「うそでしょ・・？」って真顔で聞かれました）
ファビコンって？
備忘ですからね！調べたことは書かないとですね！
まずファビコン(Favicon)とは
favorite icon（フェイバリット・アイコン：お気に入りアイコン）
の略とされています
PCでページ開いてるときにタブに表示されるアイコンですね
↑私のサイトだとこの子になります
よくページを開きすぎてみたいページを見失うことがあるのですが、
その時↓のようにアイコンで判断できると便利です
自分のブログを開いてもらったときにもアイコンで見つけてもらえますね
ファビコン設定の流れ
今回私がファビコンを設定した流れを記載していきます
ファビコンを作成
私はこんな感じで適当に描いてしまったのですが、
調べるとフリーのファビコンを配布しているところもありそうですね
作る際の注意点としては、とっても小さいアイコンになるので、あまり細かく描くと潰れてしまいます
シンプルに自分のサイトを表すマークがおすすめです
画像を透過する
ファビコンを設定した際に透過が出来ていないとアイコンの周りに白い枠が残ってしまいます
もちろん枠をあえて残すのもおｋですが、私はフォルダの形で表示したかったので今回は透過にしました
今回画像の透過は「JTrim」というソフトをインストールして行いました
窓の杜でのインストールは↓から
１．インストールしたJTrimを起動し、作成した画像を開きます
２．イメージから透明色設定を押します
※撮るタイミングミスってそっと透過されてますが気にしないでください
３．透過したい背景をクリックします
この薄い市松模様になった部分は透過されているという意味です
背景が透過されたら保存します
ファイル形式を変更する
続いてファイル形式の変更を行います
今回は「ファビコン favicon.icoを作ろう!」サイト様を使用させていただきました
１．上記サイトにアクセスし、16×16もしくは32×32のボタンを押下し、先程保存した画像を選択します
２．選択できたらfavicon.ico作成を押下します
.ico拡張子のファイルができるのでダウンロードを押します
これでアイコンが完成しました( ◜▿◝)
サイトへの反映
では実際に自分のサイトへ反映してみましょう！
１．WordPressのダッシュボードから 外観 ＞ カスタマイズ を選択します
２．続いてサイト基本情報からサイトアイコンの「画像を選択」を押下し、先程作った画像を選択します
３．プレビューのアイコンが変わったことを確認したら上の公開をクリックします
これで反映されます！されたはずです！
この記事を書いているときに何故か画像が選択できなくなったりして焦りましたが概ねこの流れで設定できるかと思います。
おわりに
以上がファビコンの作成方法と設定方法でした
ソフトのインストールとか入れちゃいましたが、ブラウザで透過できるサイトもあるようですのでインストールはヤダ！って方はそちらもご検討ください
※個人的にJTrimは文字入れとかでも優秀なので重宝しております。おすすめです
結構簡単に設定できますので皆さんもアイコンでサイトに個性を出してみてくださいね
今回はここまでとなります！
お読みいただきありがとうございました！
