ファビコンを作成しました【WordPressに設定】

tokui55.comファビコン

WordPressにファビコンを設定しました。

ファビコンの作成はフリーソフトのPaint.netを利用しています。

サイズとファイル形式(PNG)以外の制約は特にないので、お絵かきすれば良いという感じです。

簡単なので未設定の方はチャレンジしてみてはいかがでしょか?

スポンサーリンク

ファビコンとは?

ファビコンはサイトアイコンとも言って、Webサイトのシンボルマークです。

ChromeなどのブラウザでWebサイトを開いたときに、タブのサイト名の左側に表示される小さなマークがファビコンです。

要はサイトが一目で判別できるような特徴を持たせた小さなアイコンです。

 

大手サイトのファビコンを参考にしてみましょう。

大手サイトのファビコン(サンプル)

各社とも「いつものマーク」というくらい浸透しています。

任天堂なんてマリオになってるし、遊び心を入れるのもいいですね。

当サイトのものも紛れ込ませていますが、まあまあこんなもんでしょう....

完成したファビコン

完成したファビコンがこちらです。

tokui55.com favicon

 

次はChromeのタブでの表示です。

Chromeのタブでファビコン表示

なんとか『TK/55』が判別できるかな?

 

作り始めたときは、もっと細かく表現できるものだろうと考えていたので、次のようなデザインになっていました。

ファビコン失敗作

デザインの参考にしたのが、ボタン(キーボード)だったため、ボタンの影を表現しようとしていました。

このサイズで見ている分には良いのですが、タブで表示すると完全につぶれちゃいます。

なにがなんだか分かりません。

 

ひと目で判別できるようにしたければ、思い切ったデザインにする必要がありそうです。

デザインモチーフに関しては、「まとめ」にて紹介しています。

ファビコンの作り方

ファビコンをWordPressで利用する場合は、512x512ピクセル以上の正方形で作成するようにと記載されています。

ということで、

サイズ:512x512ピクセル
ファイル形式:PNG

としました。

ファイル形式はJPEGでも良いのですが、透明が使えないのでPNGです。

Paint.netでファビコンを作成

Paint.netの使い方には触れませんが、レイヤーを活用すると良いです。

文字を入れる時など、レイヤーを分けておけば簡単にやり直すことができます。

位置をずらしたいときも、そのレイヤーだけを移動すれば良くなります。

 

また、作成中はPaint.netの形式(.pdn)で保存して、完成したらPNGで出力します。

PNG出力は、メニューの「ファイル」から「名前を付けて保存」を選びます。

「名前を付けて保存」ダイアログが表示されるので、画面下方の「ファイルの種類」を「PNG(*.png)」に変更して保存してください。

WordPressにファビコンを設定

WordPress管理画面で、「外観」「カスタマイズ」を選択します。

WordPress管理画面 外観からカスタマイズを選択

 

続いて「サイトの基本情報」を開きます。

一番下に「サイトアイコン」の欄があるので、画像をアップロードして「公開」するだけで完了です。

WordPressにファビコンを設定

まとめ

ファビコンは本来「favicon.ico」と、ICO形式のファイルで作成するものだそうです。

が、WordPressでは画像を1枚設定するだけで、あとはうまいことやってくれます。

画像1枚作るくらいの手間ならやらない手は無いと思います。

自分のサイトに愛着が湧きます。

 

当ファビコンのデザインモチーフは、NECのワンボードマイコン「TK-85」のキーボードです。

ワンボードマイコンというのは、初期のころのパソコンだと考えてもらえば良いと思います。

30うん年前、高校の授業でTK-80,TK-85,Z80などのワンボードマイコンを使っていました。

なんとなく頭の片隅に「TK-85」が残っていたのだと思います。

当サイトは「tokui55.com」なので「TK-55」を思いつき、デザインもTK-85のキーボードをパクr、いやリスペクトすることにしたのです。

という深そうで、深くない適当な理由で決定しました。

 

WordPress
スポンサーリンク
この記事が気に入ったら、
いいねしてくれると嬉しいです!
ゆうぱぱをフォローする
こんな記事も読まれてます
得意なことからコツコツと

コメント

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