シンプルで綺麗なフォントベースのサイトアイコン(ファビコン)を作ってみました

今回ブログのサイトアイコンを変更したので、その作成過程を紹介します。

装飾フォントを使って作成するので画像などの素材は必要ありませんし、10分もあれば作成できます。これまで「なかなか満足のいくものができなかった」という方の参考になれば嬉しいです。

なお、WordpressにはSimplicity2の機能で適用しています。

スポンサーリンク

フォントから画像ファイルを作成

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

ベースデザイン

最初に、ベースとなるデザインをタブから選択します。上下左右に適度な余白ができる「角丸背景文字」がお勧めです。

背景と文字色

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

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

文字の種類

最後に、一番大切な「文字の種類(フォント)」を決めます。70種以上から選択できますが、Excelなどのようにフォント名がそのスタイルで表示されないので、試行錯誤が必要です。

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

[漢]こころ明朝

[漢]ゴシック体

[漢]らぶ

[英]MiddleSaxonyText

[英]Hana

[英]Nationalyze

[英]PenguinAttack

[英]BlackCastle

[英]ChopinScript

画像の作成

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

Simplicityでは、サイトアイコンを設定する場合、縦・横512ピクセル以上を推奨しているので、なるべく大きくなるように文字は「600px」を選択します。画像形式には「PNG」を選択して、内容を確認したら[作成する]ボタンをクリックします。

クリップボードへコピー

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

Windows標準のペイントで加工

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

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

トリミング

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

サイズの変更

メニューから「サイズ変更」をクリックします。「縦横比を維持する」を解除して、単位に「ピクセル」を指定します。指定するサイズですが、Simplicityが推奨する「512×512ピクセル」にします。

アイコンの保存

これで完成です。「siteicon」などの名前を付けて、PNG形式で保存します。

サイトアイコンへの設定

作成したサイトアイコンをWordpressに適用します。Simplicityの場合、サイト基本情報からサイトアイコンを設定するだけで、「ファビコン」と「アップルタッチアイコン」もまとめて設定されるようになっています。

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

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

サイトアイコンの[画像を選択]をクリックして、さきほど保存した画像ファイルをアップロードします。

[保存して公開]ボタンをクリックします。これで設定は完了です。

ブログを表示すると、Webブラウザのタブに、サイトアイコンに設定した画像が表示されます。

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

実際に、iPhoneでアップルタッチアイコンを作成して、見栄えを確認しておきましょう。

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

img_3067

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

img_3068

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

img_3069

アイコンが画面に追加されました。まずまずの出来栄えですw

img_3070

『シンプルで綺麗なフォントベースのサイトアイコン(ファビコン)を作ってみました』へのコメント

  1. […] みたい人は、検索すると色々出てきます。個人的には [A1 Style] さんが秀逸な気がします。 […]