header.php を子テーマに作ってファビコンをオリジナル画像に設定する

絶賛入院中のキャリコ（ @calicocatxyz ）です。

入院中の何がイヤって1日3回ある採血… 注射は苦手じゃないからいいんだけど、イラッとする痛みにストレスを感じてます。

そんな気分を変えるためにファビコンをオリジナル画像に変えました。

※WordPress ならこんなに面倒な作業がなくなりました！

リンクWordPress でのファビコンやブックマークアイコンの設定方法

ファビコンとは？

favicon（ ファビコン ）は、ウェブサイトのシンボルマーク・イメージとして、ウェブサイト運営者がウェブサイトやウェブページに配置するアイコンの俗称である。favorite icon（ フェイバリット・アイコン：お気に入りアイコン ）という英語の語句を縮約したものである。

Wikipedia

普段インターネットをしてるときに見かける、タブやブックマークの先頭に表示されるアイコンのことです。

ファビコンと聞いてピンと来なくても、このアイコンをみたら『 これか！ 』と思う人も多いのではないでしょうか？今回はこれをオリジナル画像に変更します。

アイコンにしたい画像を用意する

ファビコンは『.ico 』という拡張子の画像ファイルフォーマットです。用意する画像の拡張子は何でも構わないのですが、ファビコンに設定する際には拡張子を変換する必要があります。

変換ツールを使う

Favicon Converter
http://favicon.qfor.info/c/

.jpg 画像や .gif 画像などを .ico 画像に変換してくれるサイトです。

自作する

Favivon Editor
http://favicon-generator.org/editor/

簡単なものでよければ自作することも可能です。キャリコはシンプルなものが良かったので、リンクと同じ色にしてここでファビコン画像を作成しました。

作成したファビコンを設定する

ファビコン画像をアップロードする

WordPress のダッシュボードから『 メディア 』→『 新規追加 』を選んで作成したファビコン画像をアップロードします。画像がアップロードされたら『 編集 』をクリックしてメディアの編集画面を開きます。

後で画像の URL が必要になるのでファイルの URL を保存しておきましょう。

子テーマに header.php を作成する

ファビコンの設定は head 内に記述する必要があるので、子テーマに header.php を作ります。これは CSS をカスタマイズするときに作った子テーマの作り方と一緒です。

キャリコ
STINGER5 で CSS をカスタマイズ可能にする子テーマの作成

header.php というファイルを style.css と同じフォルダ内に作成したら親テーマの header.php を丸ごとコピーします。貼り付けたら以下のコードを探して書き換えます。

↓　このように書き換える

『 ********** 』の部分は先ほど保存した画像の URL を入力します。以上でファビコンの設定は終了です。

追記

STINGER5 でファビコンを導入するときの注意点

いよいよ帰国が5日後に迫ってきたキャリコ（ @calicocatxyz ）です。 …

calico.xyz

ファビコンを設定したならアップルタッチアイコンも作ろう

iPhone の Safari に自分のブログをブックマークしたキャリコ（ @c …

calico.xyz

まとめ

ファビコンを設定したら自分で作ったアイコンがタブやブックマークに表示されるので、何だか嬉しくなってニヤニヤしちゃいますね 笑

オリジナルの画像が表示されることで満足感を得られますし、より一層の愛着が湧くと思うので、ぜひチャレンジしてみてください。