ブログのファビコンを変更しました

ブログのファビコンをSTINGER5のまま放置していたので、そろそろ変えることにしました。このままだと、誰のブログか判別しにくので早めに変更しておきましょう。

ファビコンとは、タブなどに表示されているwebサイトを象徴するアイコンの事です。ファビコンを見ただけでサイトの識別が付くので印象に残りやすく、ブックマークからクリックしてくれやすくなるのでオリジナルなものを設定した方が良いです。

ファビコンの変更をする

まず始めにファビコンの表示設定は、header.phpに設定されているので、子テーマのheader.phpを作って、親テーマのheader.phpを全てコピーします。

子テーマの作り方は、WordPressのテーマをカスタマイズするなら、まず子テーマを作ろう！を参考にしてください。

ファビコンを設定しているのは、header.php内にある下記のコードです。

 このコードから、親テーマのimagesフォルダ内にあるlogo.icoがファビコン画像という事が分かります。

logo.icoを新しい画像で上書きしても変更は可能ですが、テーマを変更した時にimageフォルダは上書きされるので、テーマとは別の画像フォルダに保存して利用します。

1. 新たに作成したファビコン画像をメディアを追加でアップロードする。
2. アップロードした画像のURLを下記の部分にコピペする。
   <link rel=”shortcut icon” href=”ここに画像のURLを記入する” />

はい、オリジナルのファビコンに変わりました。

ファビコン画像を作成する

ファビコンの変更方法が分かったので、オリジナルのファビコンを作成できるサイトの紹介です。

ファビコン画像は基本16×16で、拡張子は.icoになります。

faviconist

絵心と時間があるなら、ドット絵でオシャレな画像を作成してもいいのですが、手っ取り早く作りたい場合は、こちらのfaviconistがオススメです。

文字のみのデザインですが、サイト名やハンドルネームの頭文字などを使って、様々なデザインのフォントで作成できます。背景もグラデーションをかけることができるのでシンプルながらおしゃれです。

※作成後は、画像の上で右クリックメニューから画像を保存してください。

Favicon Converter

ツールで作成した画像などをファビコンにしたい場合は、こちらのFaviconConverterで変換できます。

free favicon

自作は面倒だ、という人にはフリーのアイコン素材を利用するのも手です。freefaviconには大量のファビコン素材があるので一度チェックして見てはどうでしょうか。

まとめ

今回は、取り合えずシンプルなデザインにしましたが、気が向いた時にでもオリジナル画像のファビコンを作成してみたいです。でもコロコロ変えるとユーザーが混乱するので変更のタイミングは迷いますね。