キャリコ

WordPress や STINGER5 のカテゴリを中心に徒然なるままに綴る個人ブログ「 Calico 」です。

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

      2016/05/28

絶賛入院中のキャリコ( @calicocatxyz )です。

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

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

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

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

Ads by Google

ファビコンとは?

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

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

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

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

ファビコンは『.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

まとめ

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

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

 - STINGER5

この記事が気に入ったら
いいね!しよう

キャリコの最新情報をお届けします

Twitter でキャリコをフォローしよう!

  おすすめ記事

【キ】 アドセンス用336px

【キ】 アドセンス用336px

  関連記事

STINGER5 のブログ説明文の重要性について

誰にも気づかれない自己満足カスタマイズ続行中のキャリコ( @calicocatx …

STINGER5 でアドセンスを記事内に導入するときの注意点

アドセンスの最適なレイアウトを導入したキャリコ( @calicocatxyz ) …

ファビコンがオリジナル画像で作れるアイコン作成サイトまとめ
ファビコンがオリジナル画像で作れるアイコン作成サイトまとめ

最近どうやら欲求不満なキャリコ( @calicocatxyz )です。 見た夢を …

これでスッキリ!SNS ボタンのデザインをコピペだけで綺麗に統一する方法

イビサの夏が恋しいキャリコ( @calicocatxyz )です。 EDM を聴 …

STINGER5 の記事公開日の後ろに「 あとで読む 」の Pocket リンクを挿入する方法
STINGER5 の記事公開日の後ろに「 あとで読む 」の Pocket リンクを挿入する方法

体重がどんどん落ちていく、キャリコ( @calicocatxyz )です。 何も …

これでスッキリ!コピペだけで綺麗に統一した SNS ボタンをトップページにも設置する方法

ハニーナッツクランチにハマってるキャリコ( @calicocatxyz )です。 …

STINGER5 のカテゴリ名と件数をカスタマイズする方法

ちょいちょい英語の勉強をしてるキャリコ( @calicocatxyz )です。 …

STINGER5 の原型を崩さずに細かい部分をカスタマイズしてみた

1日に心電図と血圧と採血が3回もあって、げんなり中のキャリコ( @calicoc …

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

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

キャリコの誰にも気づかれない3つの自己満足カスタマイズ
キャリコの誰にも気づかれない3つの自己満足カスタマイズ

STINGER5 のカスタマイズも終わって手持無沙汰のキャリコ( @calico …