ここでは、ファビコンについて解説いたします。
ファビコン(サイトアイコン)とは
ファビコンとは、サイト独自のアイコンの事で、サイトアイコンとも呼ばれます。
下の画像にある、各タブ赤枠の部分がファビコンです。
ブラウザタブの他にも、ブックマークなどでも表示されます。
ファビコンがあると、サイトのシンボルマークとなり、この画像のように複数のタブを開いた時には識別しやすくなります。
個人向けのサイトでも、独自性を出すためにぜひお好みのファビコンの設置をおすすめします。
無料アイコン素材サイト ICOOON MONO
初心者の方は、無料素材を利用すると簡単にファビコンが作成できます。
こちらの無料アイコン素材サイト「ICOOON MONO」は、商用での利用が可能で６０００種類以上のアイコンが用意されています。
外部リンク ICOOON MONO
モノトーンのアイコンですが、色を変えることもでき、サイズも選べます。
登録なども不要なので、すぐに利用できます。
初心者の方にはもちろん、直ぐにでもファビコンを設置したいという方にもおすすめのサイトです。
ICOOON MONOでファビコンを作成する
それでは、ICOOON MONOでファビコンの作成方法を解説します。
なお、ブラウザは「グーグル クローム」での解説になります。
まずは、ICOOON MONOのサイトを開きます。
なお、トップページの上段右側の「LICENCE」をクリックすると、このような禁止事項とQ&Aがありますのでよく読んでください。
トップページには、様々なアイコンが表示されています。
そのほかにも、下の画像赤枠部分にあるアイコンには、カテゴリでアイコンを探すことができます。
また、右上にある検索ボックスにキーワードを入力すれば、お好みのアイコンが探せます。
ここでは、一例として「自動車」のアイコンを作成します。
トップページ右上の検索ボックスに「自動車」と入力します。
すると、このように自動車のアイコンが表示されます。
様々な車種のアイコンがあり、中には電気自動車や輸入車などもあります。
それでは、今回はランボルギーニのアイコンを選択して作成してみます。
ランボルギーニアイコンをクリックすると、このような画面に変わります。
まずは、サイズを決めます。
ここでは、256pxを選択します。
次に、色を決めます。
「color」にある黒い部分「rgb(75,75,75)」をクリックすると色の選択ができます。
ここでは、ブルーに変更します。
お好みの色でアイコンができたら、ダウンロードします。
Download fileは、PNG ・JPG・SVGがありますが、ここでは最も一般的なファイル形式「PNG」を選択します。
PNGをクリックすると、ダウンロードが開始されます。
クロームでは、左下にダウンロードバーが表示されます。
ダウンロードが完了したら、ダウンロードバーはこの状態のままにしておきます。
もちろん、デスクトップやピクチャなどに保存しても構いません。
ただ、ここでは、初心者の方でも簡単にできるダウンロードバーからドラッグ＆ドロップでアップロードする方法で解説します。
作成したアイコンをワードプレスに設置する
それでは、ダウンロードしたアイコンをワードプレスに設置します。
なお、テーマは「STINGER」での設置方法となります。
まずは、ワードプレスメニューバー「外観」→「カスタマイズ」をクリックします。
画面左側の「サイトの基本情報」をクリックすると、「サイトアイコン」の項目があります。
ちなみに、テーマによって違いがありますので注意してください。
Simplicityは「その他」
Giraffeは「サイト基本情報」
Luxeritasは「サイト情報/サイトアイコン」
マテリアルは「ロゴ、ファビコン設定」
以上の項目をクリックして設定してください。
次に、「画像を選択」をクリックします。
画面が「画像を選択」の画面に変わり、左上にある「ファイルをアップロード」にします。
ここで、ブラウザ左下のダウンロードバーを「ファイルを選択」にドラッグ＆ドロップします。
すると、画面が「画像の切り抜き」に変わります。
ここで、画像を切り取ってサイズを合わせ「画像を切り抜く」を押します。
ただし、下の画像のように、画像が枠いっぱいにあり切り取りが不要ならば「切り抜かない」を押します。
カスタマイズの画面に変わり、左上にある「保存を公開」をクリックして完了です。
ブラウザタブを確認すると、このようにファビコンが表示されています。
以上が、無料アイコン素材サイト「ICOOON MONO」を利用してファビコンを設置する方法です。
次回は、グローバルメニューの設置方法について解説いたします。
最後まで読んでいただき、ありがとうございました。
