[文字画メーカー] フォントベースのファビコン(サイトアイコン)作成方法

シンプルで綺麗なフォントベースのファビコン(サイトアイコン)作成方法を紹介します。
装飾フォントを使用すれば、画像などの素材が無くても10分もあれば作成できます。
「なかなか満足のいくものができない」という方の参考になれば嬉しいです。

画像データの作成

検索すると、サービスを提供するサイトがいくつも見つかります。
今回は「もじまる」というサイト「文字画メーカー」を使わせていただきました。

ベースデザイン

最初に、ベースとなるデザインをタブから選択します。

おすすめは、上下左右に適度な余白ができる「角丸背景文字」です。

背景と文字色

次に、背景色と文字色を決めます。

「角丸背景文字」の場合、何度やっても「背景画像ふちの色」がうまく透過されず白色になってしまうので、背景色と同色を指定するのがおすすめです。

色決めには、次のサイトが参考になります。

装飾フォントの種類

最後に、一番大切な装飾フォントの種類を決めます。

70種以上から選択できますが、名前がそのフォントで表示されません。
実際にどんなフォントなのか、試行錯誤が必要です。

参考までに、いくつかサンプルを貼っておきます。

作成の実行

気に入ったフォントが見つかったら、画像を作成しましょう。

ファビコンの推奨サイズは縦・横512ピクセル以上なので、文字の大きさには、少し大きめの「600px」を選択します。

画像形式には「PNG」を選択して[作成する]ボタンをクリックします。

クリップボードにコピー

画像が出来上がったたら、右クリックから「画像をコピー」を選択して、クリップボードにコピーしておきます。

画像データの加工

今回は、Windows標準のペイントソフトを使用した方法を紹介します。
Canvaなどの使い慣れたアプリを使用する場合は、同様に画像サイズを調整してファイルに保存してください。

クリップボードからペースト

Windows標準のペイントソフトを起動して、先ほどクリップボードにコピーした画像を[Ctrl+V]でキャンバスに貼り付けます。

トリミング

貼り付けたら、メニューから[トリミング]をクリックしておきます。
この操作により、画像がキャンバスに張り付いた状態になります。

サイズの変更

メニューから「サイズ変更」をクリックします。

「縦横比を維持する」を解除して、単位に「ピクセル」を指定します。
指定するサイズは、推奨サイズである「512×512ピクセル」にします。

画像の保存

これで完成です。

「siteicon」などの名前を付けて、PNG形式で保存しましょう。

ファビコンの設定

作成したファビコンをWordpressに適用します。

Simplicityの場合、サイト基本情報からサイトアイコンを設定するだけで、「ファビコン」と「アップルタッチアイコン」がまとめて設定できます。

ファビコンとアップルタッチアイコンを個々に設定する場合は、外観 > カスタマイズ > その他から設定できます。

外観 > カスタマイズ から「サイト基本情報」をクリックします。

サイトアイコンの[画像を選択]をクリックします。
作成した画像ファイルをアップロードします。

「保存して公開」をクリックすれば、設定完了です。

サイトを表示すると、ブラウザのタブにファビコンが表示されます。

アップルタッチアイコンの確認

iPhoneをお持ちの方は、アップルタッチアイコンも確認しておきましょう。

iPhoneでサイトを表示して、画面下から をタップします。

メニューにある[ホーム画面に追加]をタップします。

確認画面が表示されるので、右上の[追加]をタップします。

アイコンが画面に追加されました。

まずまずの出来栄えですw

以上、フォントベースのファビコンを作成する方法でした。

最後までご覧いただき、ありがとうございます。