WordPressのサイトアイコン(ファビコン)の簡単な作り方

日常の話題
この記事は約11分で読めます。

ブログサイトは作ったけれど、サイトアイコン(ファビコン)が無いなぁ。

サイトアイコンってどうやって作るんだっけ?って思った人もいると思う。

オリジナルのサイトアイコンを自分のサイトに設置すれば、サイトも締まるし、見栄えもいいよね。

例えると、スーツ着たのにネクタイしてないみたいな感じかな?

 

僕も自分のブログサイト作った後、サイトアイコンが無い事に気づきネットで調べたけど、ローカル環境でサイトアイコンを作成する情報が見つからなかったので、ペイントソフトで試行錯誤しながら作ることにした。

 

この記事では、Windowsに標準で入っているペイントソフト「ペイント3D」を使って、僕がサイトアイコン(ファビコン)作った時の経験を書きます。

スポンサーリンク

サイトアイコン(ファビコン)とは?

サイトアイコンについて

サイトアイコン(ファビコン)とは、Google ChromeやMicrosoft Edge(Internet Explorer)などのWebブラウザでサイトを表示させた時に、ブラウザの左上のサイト名の左隣に表示されるマークである。

サイトアイコンの拡大図

拡大したものが、↑こちら。

WordPressのサイトアイコンのサイズ

WordPressに設置するサイトアイコンのサイズ

WordPress(ワードプレス)に設定できるサイトアイコンのサイズは、上記の画像のにもあるように512×512ピクセル

Windows10の標準ペイントソフト「ペイント3D」

ペイントソフトの説明

geralt / Pixabay

Windows10には、標準で簡単に使えるペイントソフトの「ペイント3D」がある。

有名なものだとAdobe Illustratorとかもあるけど、有料だし本格的にデザインをする人でないと敷居が高いよね。

簡単なデザインなら標準のペイントソフトで十分なのです。

また、ネット上では無料でサイトアイコン(ファビコン)を作成できるサイトもあり、こちらを利用しても良いと思います。

ですが、今回は自分で自作してみたかったので、windows10の標準ペイントソフトの「ペイント3D」を使って作成してみたよ。

ペイント3Dはどこにある?

ペイントソフトのある場所

上記の図ように、windows10のスタートメニューを開いて下の方にスクロールしていくと「ペイント3D」というソフトがあるので、これを使うよ。

サイトアイコンの作り方

サイトアイコンの作り方

サイトアイコンの作り方を順を追って説明するよ。

まず、ペイント3Dを起動すると上記の画面が表示される。

サイトアイコンのサイズ設定

サイトアイコンのサイズ設定

ペイント3Dを起動したら、まず作成サイトアイコンのサイズを設定する。

上のメニューの中の「キャンパス」をクリック。

キャンパスのサイズ変更

キャンパスのサイズ変更

画面の右側の「キャンパスのサイズ変更」から、幅と高さを512ピクセルに変更する。

変更すると画面中央にある白いキャンパスの形が正方形に変わる。

これで、サイトアイコン作成の準備はOK。

メニューの2Dをクリック

2Dメニューをクリックする

サイズ変更したらメニューの中にある「2D図形」をクリックする。

2D図形の円をクリック

円の作成

右側の2D図形の項目の中の円を選択しキャンパスにの図形を書いていくよ。

キャンパスの中に円を描く

円を描く方法

マウスを左上の角から右下の角まで対角にドラッグする。

また、対角にドラッグ場合、右上の角から左下の角でも構わない。

キャンパス内に円を広げる

すると、円が四角いキャンパス内に広がっていく。

この時、円の形が崩れたり、はみ出したりしても円の上下左右をクリックしてやり直せるのでご心配なく。

線の色を変更する

円の線の色を変更

円を描いたあとは、円の線の色を変更するよ。

線の色はデフォルトでは黒なので、ここで色を変更しておかないと円の中を青色で塗りつぶした時に黒の縁取りになってしまいますので要注意。

「線の種類」をクリックすると「色選択」が出るので色を選択。

今回は筆者のサイトアイコンをサンプルで作成するので、僕は青色を選択したよ。

あなたは、お好きな色を選択してくださいね。

円に色をつける

線に色をつける

円の線の色を変更したら、円の中を同じ色で塗りつぶすよ。

上のメニューの「ブラシ」をクリックして右側の「バケツ」をクリック。

塗りつぶしの色を選択

右下の塗りつぶす色を選択する。

円の中の色が変わる

色を選択したら、マウスカーソルを円の中に持っていきクリック。

すると、円の中が青色で塗りつぶせるよ。

円の中に文字を設置

円の中に文字を描く

円が出来たら、円の中に文字を設置する。

上部メニューからテキストをクリック。

3Dテキストをクリック

右側の「3Dテキスト」をクリック。

この時、「2Dテキスト」を選択してしまうと、円いっぱいまで文字の大きさを拡大できないので注意。

すると文字を入力する点線のテキストボックスが現れる。

文字の色を選択

文字色は「白」を選択する。

あなたは、お好きな色を選択してくださいね。

好きな文字に変更

筆者のサイトは「K」の1文字のサイトアイコンですので、「K」を入力します。

あなたが、作成する時は文字を好きなものに変えてくださいね。

フォントの選択もできる

文字フォントも変更できる。あなたの、お好きなフォントに変更してください。

文字を円の中いっぱいに拡大

このままのサイズだと、文字サイズが小さいので円いっぱいまで大きくするよ。

文字の外側のテキストボックスの角を外側に向かってドラッグしていく。

拡大後の画像

円の中いっぱいに文字を広げるよ。

サイトアイコンの完成画像

これで完成だよ。

サイトアイコンの保存方法

ファイルの保存方法

左上のメニューをクリックして保存する。

保存方法のクリックの順番

次の画面で左側の保存をクリックし、ファイル形式の選択から画像を選択する

最後に右下の保存ボタンをクリック

次の画面に変わったら、右下の保存をクリックし任意の場所に保存してね。

作成したサイトアイコン をWordPressに設置する

サイトアイコンをWordPressに設置する

27707 / Pixabay

今度は、完成したサイトアイコンをWordPress(ワードプレス)に設定してみましょう。

WordPressにログイン

WordPressにログインする

お使いのWordPress(ワードプレス)にログインする。

左側メニューの「外観」から「カスタマイズ」を選択。

設定までの手順

サイト基本情報をクリック。

画像の変更をクリック

この画面がサイトアイコンを設定・変更する画面。

「画像の変更」クリックする。

ファイルのアップロードをクリック

画像選択の画面に切り替わりますので、左上の「ファイルをアップロード」をクリックし、さきほど作成したサイトアイコンのファイルをアップロードして設定してね。

設定が完了すると、自分で作成したサイトアイコンが表示されます。おつかれさまでした!

サイトアイコン作成は意外と簡単

サイトアイコンの自作に挑戦してみよう

Alexas_Fotos / Pixabay

サイトアイコン作成は、Windows10に標準で入っているペイントソフトで簡単にできる。

使い方もシンプルだから、使っていればすぐ慣れると思います。

レンタルサーバーの設定とブログサイトの作成が終わったら、気軽に作成してみてはいかがでしょうか?

こういったペイントソフトなどを使い慣れている人なら、もっと複雑でかっこいいデザインを作るのも良いと思う。

自分で作ったサイトアイコンが表示されたら、結構感動しますよ。

関連書籍はこちらです

コウ

どうも、コウです。
宮崎県在住、妻と二人暮らしです。
もともと、パソコン修理のカスタマーエンジニアをしていました。
機械いじりやネット関係、謎が謎を呼ぶ不思議な事が好きなので、そのジャンルの情報発信と日常の中で埋没しがちな素朴な疑問を拾い上げ考察します。
えるたそ~と同じで「私、気になります病」を発症しているので好奇心をエサに生きています。

コウをフォローする
日常の話題
スポンサーリンク
コウをフォローする
スポンサーリンク
スポンサーリンク
コウの雑記帳

コメント