キャリコ

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 の新着記事をトップページだけ非表示にする方法

イギリスの寒さが厳しくなってきました、キャリコ( @calicocatxyz ) …

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

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

STINGER5 の誰にも気づかれない自己満足カスタマイズ

Hello, キャリコ( @calicocatxyz )です。 そろそろ STI …

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

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

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

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

猫画像なら負けませんw
これでスッキリ!SNS ボタンのデザインをコピペだけで綺麗に統一する方法

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

STINGER5 の h3 タグにアイコンを付けて、h4 タグに背景を指定する

○○する方法しかネタがないキャリコ( @calicocatxyz )です。 っと …

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

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

1
キャリコの誰にも気づかれないこっそり自己満足カスタマイズ

いつの間にかシリーズ化、キャリコ( @calicocatxyz )です。 自己満 …

STINGER5 にアドセンスを入れると、スマホのみ右に寄ってしまう現象の応急処置

旅ブログ移行中のキャリコ( @calicocatxyz )です。 約400ページ …