こんにちは、ikuzo(いくぞう)です。
今回はファビコンと作り方と、WordPressでファビコンを設定する方法を説明します。
ファビコン（サイトアイコン）とは、これですね。ブラウザのタブに表示されているマークのことです。
ファビコンは、記事をブックマークしてもらった際にも一覧から探す目印になるものなので、
積極的にオリジナルのファビコンを作っていきましょう！
ファビコン（サイトアイコン）の作り方
ファビコン（サイトアイコン）を作るにあたって、その大きさですが
WordPressの設定画面には「サイトアイコンは512×512ピクセル以上の正方形にしてください」という注意書きがあります。
Cocoonの公式サイトでもわいひらさんが、「512×512pxのPNG画像を設定することを強く推奨します」と仰ってます。
出典：サイトアイコンを設定する方法（Cocoon公式サイト）
なぜあれほど小さなアイコンに512px四方の大きさが必要なのか、いささか疑問が残ると思いますが、ここは素直に従いましょう（笑）
ロゴ入りの四角いファビコンの作り方
最初にロゴ入りの四角いファビコンを作る方法を説明します。
使用するのは、フリーフォントで簡単ロゴ作成という無料のWebツールです。
ロゴ入りのファビコンであれば、このツールだけでもファビコンが作れます。
作り方は、幅と高さの欄に「512」（それ以上でも可）と入力して、
「表示するテキスト」の欄にファビコンに入れる文字を入力します。そして「変更」を押します。
次に好きなフォントを選びましょう。フォントは、とてもたくさんあります。
フォントが決まったら背景色とテキスト色（ロゴの色）にカラーコードを入力して「変更」を押します。
次に「サイズ」（文字の大きさ）の数字を増やします。幅と高さを「512」にした場合はとりあえず「380」と入力して「変更」を押して下さい。あとはフォントによって調整して下さい。
「X座標」と「Y座標」でロゴの位置を調整します。ロゴを下げるには「Y座標」の値を大きくします。
X座標が「19」、Y座標が「450」でちょうど真ん中にロゴが来ました。
ファビコンなのであまり目立たないと思いますが、ロゴに枠線をつけることもできます（枠線の設定は下の方にあります）。
背景を無し（透明）にしたいのであれば「透過PNG」にチェックを入れます。
最後に「ダウンロード」を押せばファビコンの完成です。
（フリーフォントで簡単ロゴ作成は、自動的に「PNG」でのダウンロードになります。）
ロゴ入りの丸いファビコンの作り方
ロゴ入りの丸いファビコンを作るには、
いま作ったファビコンを、無料ソフトの「PhotoScape X」で丸く切り抜きます。
切り抜く場合は、先ほどよりも背景を大きめにしてロゴを作ります。
PhotoScape Xのインストールや画像を切り抜く方法はこちら↓
下のロゴはサイズは「380」のままで、幅と高さを「800」にしたものです（小さく表示してます）。
PhotoScape Xの「写真編集」を選択して、ロゴを画面へドロップします。
「切り抜き」を押します。
「円形切り抜き」と「1×1」を選択します。
ロゴの上でドラッグ（クリックしたままマウスを動かす）します。
大きさと位置をドラッグで調整して「切り抜き」を押します。
これで丸いファビコンの完成です。「保存」ボタンは右下にあります。ファイルの種類は「PNG」で保存して下さい。
イラスト入りのファビコンの作り方
ご参考までに当サイトのファビコンを作った方法も紹介します。
このアイコンは「ココナラ」というサイトでイラストレーターさんに描いてもらいました。
▲私がアイコンを描いてもらったyapiころんさんのページです
ココナラには沢山のイラストレーターさんがいるので、
お気に入りのイラストを見つけて、それを描いたイラストレーターさんにアイコンを作ってもらうのも一つの方法です。
※著作権のあるイラストを勝手に使用するのは違法なので、注意しましょう。
イラスト入りのファビコンの作り方は簡単です。
PhotoScape Xで好きな位置で切り抜くか（ファビコンにするときは「1×1」を選択）、
もしくはイラストの背景を消してしまう（透明にする）方法もあります。
背景を消すには「カットアウト」を選択してイラストを画面へドロップします。
「マジック消しゴム」を選択して、背景の上でクリックすると背景が透明になります。
これを一旦「保存」して、必要があれば「写真編集」にドラッグして「サイズ変更」を行います。
「1×1」の比率にするには、1×1の透明な壁紙の上へ背景を消したイラストを重ねます（PhotoScape Xの「挿入」を使います）。
画像に他の画像を重ねる方法はこちらの記事をご覧ください↓
透明な壁紙を作る方法は、先ほどのフリーフォントで簡単ロゴ作成を使います。
512×512pxの透明な壁紙であれば、幅と高さに「512」と入力して、テキスト欄は空白、
透過PNGにチェックを入れてダウンロードを押すだけで出来上がりです。
WordPressの「ファビコン」設定方法
ここからは、WordPressにファビコンを設定する方法です。
WordPressの「外観」→「カスタマイズ」をクリックします。
ファビコンは「サイトの基本情報」で設定します。
「サイトアイコンを選択」を押して
ファビコンをアップロードします。
代替テキストに「ファビコン」や「サイトアイコン」と入力して、右下の「選択」を押します。
最後に「公開」を押せば、ファビコンの設定は完了です。
最後に
おつかれさまでした。
今回使用した「フリーフォントで簡単ロゴ作成」や「PhotoScape X」はブログを運営する上で、なにかと役に立つと思います。
文字だけでなくイラストを使ったファビコンも同じような方法でできるので、素敵なファビコンを作ってみて下さい。
本日は最後まで読んでいただき、ありがとうございました。
コメント