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

Web Service

ブログのファビコンを作成したので、その過程を紹介します。

ファビコン(Favicon)とは、Favorite Iconの略で、サイトに設置するシンボルマークのことです。

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

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

スポンサーリンク

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

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

もじまる
無料画像加工サイト、文字入れやアニメGIF作成、スタンプなどなど簡単に画像加工できます。

ベースデザイン

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

背景と文字色

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

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

WEB色見本 原色大辞典 - HTMLカラーコード
色の名前とカラーコードが一目でわかるWEB色見本

文字の種類

最後に、一番大切な「文字の種類(フォント)」を決めます。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

0

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

タイトルとURLをコピーしました