wordpressにfavicon(ファビコン)を設定する方法

ファビコンの設定

 

wordpressに、って書いたけどいろんなホームページやブログにも応用はきくと思います。

favicon(ファビコン)とはWEBサイトに関連付けられたアイコンのことを言います。

ちなみにfavorite icon(お気に入りアイコン)の略です。

ファビコン

 

自分のサイトにオリジナルファビコンを設定する方法

まずはファビコンを作らないと話にならないんで、とりあえずファビコン用の画像を作成します。

無料ソフトならInkscapeがお勧めです。

Inkscapeの使い方はこちらを参考にしてください。

ファビコンのサイズは16px×16pxですが、作成するときは32px×32pxで作るといいと思います。

 

ファビコン

今回オレはInkscapeでこんな画像を作りました。

この画像をオレのブログのファビコンに設定したいと思います。

 

1..JPEG、.GIF、.PNGの画像を.icoに変換する

作成した画像はだいたいがJPEGかGIFかPNG形式になっていると思いますが、

それをまずは.icoに変換します。

FavIcon from Picsにアクセス。

ファビコンの設定

 

次に「Download FavIcon Package」をクリックし、保存します。

ファビコンの設定

ファビコンの設定

 

保存されたzipファイルを解凍すると、このようにfavicon.icoが入っています。

ファビコンの設定

 

2.favicon.icoをサーバーにアップロードする

WordPressの場合、使用しているテーマにもよって違うかもしれませんが、

ほとんどの場合すでにfavicon.icoは存在しているはずですので、変換されたfavicon.icoを、

サーバーの中のWordPressが設置されたディレクトリのfavicon.icoに上書きします。

ファビコンの設定

 

だいたいの場合が、「/wp-content/themes/使用しているテーマ/」の中だと思いますが、

中にはimageフォルダの中にあるテーマもあるようです。

そして最後にテーマファイルの<head>と</head>の間に以下のタグを記述すれば完了。

<link href="<?php bloginfo('template_directory'); ?>/favicon.ico" rel="shortcut icon" />

 

ファビコンの設定はこれだけでOKです。

ファビコン

 

ファビコンが表示されない場合の対処法

ちゃんと設定したのにもかかわらずファビコンが正しく表示されない場合があります。

そんな時は以下の対処法を試してみてください。

  • ブラウザを再起動する
  • キャッシュファイルを削除してからブラウザを再起動する
  • 名前がしっかり「favicon.ico」になっているか、もう一度確かめる

また、ファビコンをサーバーにアップロードしてから反映されるまでには時間がかかる場合があります。

1時間~5時間ぐらいかかることも稀にあるみたいなんで、時間を置いてから見てみてください。

人気ブログランキングで今何位?

  • このエントリーをはてなブックマークに追加

【PR】話題のラインスタンプを自分で作って販売する方法

ブログランキング応援していただけると嬉しいです↓

にほんブログ村 釣りブログ バスフィッシングへ にほんブログ村 釣りブログ 東海釣行記へ にほんブログ村 釣りブログへ

この記事の著者

kazushi釣りと生き物をこよなく愛するWEBデザイナー

釣りと焼酎が好きなWEBデザイナー。夜な夜な真っ暗な部屋で水槽を眺めながら呑んでいます。最近のマイブームはハンドメイドルアー制作。琵琶湖のほとりでひっそりとWEB制作事務所を営んでいます。

この著者の最新の記事

関連記事

カテゴリー

アーカイブ

インスタやってます

ページ上部へ戻る