ブログサイトは作ったけれど、サイトアイコン（ファビコン）が無いなぁ。
サイトアイコンってどうやって作るんだっけ？って思った人もいると思う。
オリジナルのサイトアイコンを自分のサイトに設置すれば、サイトも締まるし、見栄えもいいよね。
例えると、スーツ着たのにネクタイしてないみたいな感じかな？
僕も自分のブログサイト作った後、サイトアイコンが無い事に気づきネットで調べたけど、ローカル環境でサイトアイコンを作成する情報が見つからなかったので、ペイントソフトで試行錯誤しながら作ることにした。
この記事では、Windowsに標準で入っているペイントソフト「ペイント3D」を使って、僕がサイトアイコン（ファビコン）作った時の経験を書きます。
サイトアイコン（ファビコン）とは？
サイトアイコン（ファビコン）とは、Google ChromeやMicrosoft Edge(Internet Explorer)などのWebブラウザでサイトを表示させた時に、ブラウザの左上のサイト名の左隣に表示されるマークである。
拡大したものが、↑こちら。
WordPressのサイトアイコンのサイズ
WordPress(ワードプレス)に設定できるサイトアイコンのサイズは、上記の画像のにもあるように512×512ピクセル。
Windows10の標準ペイントソフト「ペイント3D」
geralt / Pixabay
Windows10には、標準で簡単に使えるペイントソフトの「ペイント3D」がある。
有名なものだとAdobe Illustratorとかもあるけど、有料だし本格的にデザインをする人でないと敷居が高いよね。
簡単なデザインなら標準のペイントソフトで十分なのです。
また、ネット上では無料でサイトアイコン（ファビコン）を作成できるサイトもあり、こちらを利用しても良いと思います。
ですが、今回は自分で自作してみたかったので、windows10の標準ペイントソフトの「ペイント3D」を使って作成してみたよ。
ペイント3Dはどこにある？
上記の図ように、windows10のスタートメニューを開いて下の方にスクロールしていくと「ペイント3D」というソフトがあるので、これを使うよ。
サイトアイコンの作り方
サイトアイコンの作り方を順を追って説明するよ。
まず、ペイント3Dを起動すると上記の画面が表示される。
サイトアイコンのサイズ設定
ペイント3Dを起動したら、まず作成サイトアイコンのサイズを設定する。
上のメニューの中の「キャンパス」をクリック。
キャンパスのサイズ変更
画面の右側の「キャンパスのサイズ変更」から、幅と高さを「512ピクセル」に変更する。
変更すると画面中央にある白いキャンパスの形が正方形に変わる。
これで、サイトアイコン作成の準備はＯＫ。
メニューの2Dをクリック
サイズ変更したらメニューの中にある「2D図形」をクリックする。
2D図形の円をクリック
右側の2D図形の項目の中の円を選択しキャンパスに「円」の図形を書いていくよ。
キャンパスの中に円を描く
マウスを左上の角から右下の角まで対角にドラッグする。
また、対角にドラッグ場合、右上の角から左下の角でも構わない。
すると、円が四角いキャンパス内に広がっていく。
この時、円の形が崩れたり、はみ出したりしても円の上下左右をクリックしてやり直せるのでご心配なく。
線の色を変更する
円を描いたあとは、円の線の色を変更するよ。
線の色はデフォルトでは黒なので、ここで色を変更しておかないと円の中を青色で塗りつぶした時に黒の縁取りになってしまいますので要注意。
「線の種類」をクリックすると「色選択」が出るので色を選択。
今回は筆者のサイトアイコンをサンプルで作成するので、僕は青色を選択したよ。
あなたは、お好きな色を選択してくださいね。
円に色をつける
円の線の色を変更したら、円の中を同じ色で塗りつぶすよ。
上のメニューの「ブラシ」をクリックして右側の「バケツ」をクリック。
右下の塗りつぶす色を選択する。
色を選択したら、マウスカーソルを円の中に持っていきクリック。
すると、円の中が青色で塗りつぶせるよ。
円の中に文字を設置
円が出来たら、円の中に文字を設置する。
上部メニューからテキストをクリック。
右側の「3Dテキスト」をクリック。
この時、「2Dテキスト」を選択してしまうと、円いっぱいまで文字の大きさを拡大できないので注意。
すると文字を入力する点線のテキストボックスが現れる。
文字色は「白」を選択する。
あなたは、お好きな色を選択してくださいね。
筆者のサイトは「K」の1文字のサイトアイコンですので、「K」を入力します。
あなたが、作成する時は文字を好きなものに変えてくださいね。
文字フォントも変更できる。あなたの、お好きなフォントに変更してください。
このままのサイズだと、文字サイズが小さいので円いっぱいまで大きくするよ。
文字の外側のテキストボックスの角を外側に向かってドラッグしていく。
円の中いっぱいに文字を広げるよ。
これで完成だよ。
サイトアイコンの保存方法
左上のメニューをクリックして保存する。
次の画面で左側の保存をクリックし、ファイル形式の選択から画像を選択する。
次の画面に変わったら、右下の保存をクリックし任意の場所に保存してね。
作成したサイトアイコン をWordPressに設置する
27707 / Pixabay
今度は、完成したサイトアイコンをWordPress（ワードプレス）に設定してみましょう。
WordPressにログイン
お使いのWordPress（ワードプレス）にログインする。
左側メニューの「外観」から「カスタマイズ」を選択。
サイト基本情報をクリック。
この画面がサイトアイコンを設定・変更する画面。
「画像の変更」クリックする。
画像選択の画面に切り替わりますので、左上の「ファイルをアップロード」をクリックし、さきほど作成したサイトアイコンのファイルをアップロードして設定してね。
設定が完了すると、自分で作成したサイトアイコンが表示されます。おつかれさまでした！
サイトアイコン作成は意外と簡単
Alexas_Fotos / Pixabay
サイトアイコン作成は、Windows10に標準で入っているペイントソフトで簡単にできる。
使い方もシンプルだから、使っていればすぐ慣れると思います。
レンタルサーバーの設定とブログサイトの作成が終わったら、気軽に作成してみてはいかがでしょうか？
こういったペイントソフトなどを使い慣れている人なら、もっと複雑でかっこいいデザインを作るのも良いと思う。
自分で作ったサイトアイコンが表示されたら、結構感動しますよ。
関連記事