当サイトは広告が含まれています

【WordPress】ファビコン(サイトアイコン)の作り方と設定方法

WordPress ファビコンの作り方と設定方法

こんにちは、ikuzo(いくぞう)です。

今回はファビコンと作り方と、WordPressでファビコンを設定する方法を説明します。

ファビコン(サイトアイコン)とは、これですね。ブラウザのタブに表示されているマークのことです。

ファビコン

ファビコンは、記事をブックマークしてもらった際にも一覧から探す目印になるものなので、

積極的にオリジナルのファビコンを作っていきましょう!

スポンサーリンク

ファビコン(サイトアイコン)の作り方

ファビコン(サイトアイコン)を作るにあたって、その大きさですが

WordPressの設定画面には「サイトアイコンは512×512ピクセル以上の正方形にしてください」という注意書きがあります。

Cocoonの公式サイトでもわいひらさんが、「512×512pxのPNG画像を設定することを強く推奨します」と仰ってます。

ファビコンは512×512pxのPNG画像を設定することを強く推奨出典:サイトアイコンを設定する方法(Cocoon公式サイト)

なぜあれほど小さなアイコンに512px四方の大きさが必要なのか、私もよく分かりませんが、ここは素直に従いましょう(笑)

ロゴ入りの四角いファビコンの作り方

最初にロゴ入りの四角いファビコンを作る方法を説明します。

使用するのは、フリーフォントで簡単ロゴ作成という無料のWebツールです。

ロゴ入りのファビコンであれば、このツールだけでもファビコンが作れます。

フリーフォントで簡単ロゴ作成

作り方は、幅と高さの欄に「512」(それ以上でも可)と入力して、

表示するテキスト」の欄にファビコンに入れる文字を入力します。そして「変更」を押します。

ロゴのファビコンを作る方法

次に好きなフォントを選びましょう。フォントは、とてもたくさんあります。

フォントを選ぼう

フォントが決まったら背景色とテキスト色(ロゴの色)にカラーコードを入力して「変更」を押します。

ロゴの色と背景色を決める

基本的なカラーコードは、こちらのカラーコード表で調べられます。

次に「サイズ」(文字の大きさ)の数字を増やします。幅と高さを「512」にした場合はとりあえず「380」と入力して「変更」を押してみて下さい。あとはフォントによって調整して下さい。

ロゴのサイズを変更

「X座標」と「Y座標」でロゴの位置を調整します。ロゴを下げるには「Y座標」の値を大きくします。

下の画像では、X座標が「19」、Y座標が「450」でちょうど真ん中にロゴが来ました。

ファビコンのロゴをセンターに配置

ファビコンなのであまり目立たないと思いますが、ロゴに枠線をつけることもできます(枠線の設定は下の方にあります)。

ロゴに枠線をつけたファビコン

背景を透明にするのであれば「透過PNG」にチェックを入れます。

背景を透過させるには「透過PNG」にチェックを入れ

最後に「ダウンロード」を押せばファビコンの完成です。

(フリーフォントで簡単ロゴ作成は、自動的に「PNG」でのダウンロードになります。)

ロゴ入りの丸いファビコンの作り方

ロゴ入りの丸いファビコンを作るには、

いま作ったファビコンを、無料ソフトの「PhotoScape X」で丸く切り抜きます。

切り抜く場合は、先ほどよりも背景を大きめにしてロゴを作ります。

PhotoScape Xのインストールや画像を切り抜く方法はこちら↓

【PhotoScape X】の基本的な使い方
こんにちは、ikuzo(いくぞう)です。 ブログを始めて5年になりますが、私が一番使ってきたツールは 無料で使える画像編集ソフト「PhotoScape X」(フォトスケープエックス)です。 「PhotoScape X」は無料版と有料版があり...

 

下のロゴはサイズは「380」のままで、幅と高さを「800」にしたものです(小さく表示してます)。

背景を大きめに作ったファビコン用のロゴ

PhotoScape Xの「写真編集」を選択して、ロゴを画面へドロップします。

PhotoScape Xへロゴをドロップ

切り抜き」を押します。

「切り抜き」を押す

「円形切り抜き」と「1×1」を選択します。

「円形切り抜き」と「1 × 1」を選択

ロゴの上でドラッグ(クリックしたままマウスを動かす)します。

ロゴの上でドラッグ

大きさと位置をドラッグで調整して「切り抜き」を押します。

大きさと位置をドラッグで調整して「切り抜き」を押す

これで丸いファビコンの完成です。「保存」ボタンは右下にあります。ファイルの種類は「PNG」で保存して下さい。

「保存」を押して、丸いファビコンの完成

イラスト入りのファビコンの作り方

ご参考までに当サイトのファビコンを作った方法も紹介します。

このアイコンは「ココナラ」というサイトでイラストレーターさんに描いてもらいました。

ココナラで描いてもらった「プー太郎」のイラスト

ココナラのイラストレーター yapiころんさんのイラスト▲私がアイコンを描いてもらったyapiころんさんのページです

ココナラには沢山のイラストレーターさんがいるので、

お気に入りのイラストを見つけて、それを描いたイラストレーターさんにアイコンを作ってもらうのも一つの方法です。

イラストレーターさんによって値段は変わりますが、アイコンなら1500円くらいから作ってもらえます。

※著作権のあるイラストを勝手に使用するのは違法なので、注意しましょう。

ココナラ公式サイト ⇒ https://coconala.com/

 

イラスト入りのファビコンの作り方は簡単です。

PhotoScape Xで好きな位置で切り抜くか(ファビコンにするときは「1×1」を選択)、

イラストを切り抜いてファビコンを作る

もしくはイラストの背景を消してしまう(透明にする)方法もあります。

背景を消すにはPhotoScape Xの「カットアウト」を選択してイラストを画面へドロップします。

「カットアウト」を選択してイラストをドロップ

マジック消しゴム」を選択して、背景の上でクリックすると背景が透明になります。

ロゴの背景を透明にしてファビコンを作る

背景が透明になったファビコン

これを一旦「保存」して、必要があれば「写真編集」にドラッグして「サイズ変更」を行います。

ファビコンのサイズ変更

「1×1」の比率にするには、1×1の壁紙もしくは透明な壁紙の上へ背景を消したイラストを重ねます(PhotoScape Xの「挿入」を使います)。

画像に他の画像を重ねる方法はこちらの記事をご覧ください↓

【PhotoScape X】の基本的な使い方
こんにちは、ikuzo(いくぞう)です。 ブログを始めて5年になりますが、私が一番使ってきたツールは 無料で使える画像編集ソフト「PhotoScape X」(フォトスケープエックス)です。 「PhotoScape X」は無料版と有料版があり...

 

透明な壁紙を作る方法ですが、先ほどのフリーフォントで簡単ロゴ作成を使います。

512×512pxの透明な壁紙であれば、幅と高さに「512」と入力して、テキスト欄は空白

透過PNGにチェックを入れてダウンロードを押すだけで出来上がりです。

透明な壁紙の作り方

スポンサーリンク

WordPressの「ファビコン」設定方法

ファビコンが完成したら、WordPressにファビコンを設定しましょう。

WordPressの「外観」→「カスタマイズ」をクリックします。

WordPressの「外観」→「カスタマイズ」をクリック

ファビコンは「サイトの基本情報」で設定します。

ファビコンは「サイトの基本情報」で設定

サイトアイコンを選択」を押して

「サイトアイコンを選択」を押す

ファビコンをアップロードします。

ファビコンをWordPressへアップロード

代替テキストに「ファビコン」や「サイトアイコン」と入力して、右下の「選択」を押します。

代替テキストに「ファビコン」や「サイトアイコン」と入力

最後に「公開」を押せば、ファビコンの設定は完了です。

最後に「公開」を押せば、ファビコンの設定は完了

スポンサーリンク

最後に

おつかれさまでした。

今回使用した「フリーフォントで簡単ロゴ作成」や「PhotoScape X」はブログを運営する上で、なにかと役に立つと思います。

文字だけでなくイラストを使ったファビコンも同じような方法でできるので、素敵なファビコンを作ってみて下さい。

本日は最後まで読んでいただき、ありがとうございました。

コメント