初心者ネットサーフィンする方なら目にしたことがあるはずですが、ブラウザでタイトルの前に表示されるファビコンというアイコンのようなバッジのようなマークがあります。みなさんオリジナルを表示させているかと思いきや案外そうでもなく、自分のブックマークを眺めてみても、半数くらいは未表示です。ファビコンがあるとブックマークの中からでも探しやすいですし、最近はタブブラウザ全盛の時代です。視覚的に目立つというのはとても重要ですね。わたしもついつい、いくつものタグでページを表示してブラウジングしてしまいますが、そんなとき、ファビコンがあるサイトは非常に見つけやすいです。運営者がウェブサイトやウェブページに配置するアイコンの俗称である。icon(フェイバリット・アイコン:お気に入りアイコン)という英語の語句を縮約したものである。[ウィキより抜粋]YahooやGoogleなんかだとこんな感じです。ファビコンはタブやブックマークの中でも埋もれないことで多少なりともアクセスアップにも寄与すると考えます。SEO的な効果はないと考えてしまいますが、あながちそうとも言い切れません、Firefoxをはじめ、ブラウザによっては無条件でfavicon.icoを要求しています。ファビコン未定義ならば404を返してしまいます。読み込み速度という点において、無駄な404は最小限に抑えるべきです。たくさんのタブを開いている状況では目立つファビコンの存在でその後のユーザー行動が変わる可能性もあります。それでは具体的にファビコンの設置方法を紹介します。自作のファビコンまずは表示させるファビコンを用意する必要があります。自分で作る場合はPhotoshopなどの画像処理ソフトを使って、サイズ:16×16ピクセル(縦横の1対1の比率)で作成します。Photoshopなどではファビコン用の.icoという形式では保存できませんので、ひとまず、gif・jpg・pngなどで保存します。これを変換するのですが、元画像があればアップロードするだけでファビコンを作ってくれるファビコン変換ツールを利用するとよいでしょう。ファビコンはサイズが小さいので、うまく作るにはちょっと特殊なスキルがいるように思います。フリーのファビコンを使う無料で利用できるfreefavicon.com自分でデザインする自信がなければ、ライセンスフリーの素材を使うのもありです。国内・海外を問わず利用できるたくさんのファビコン画像があります。種類が豊富でとてもカッコいいデザインのファビコンが無料で利用できるわたしのお気に入りサイトを紹介します。いうこのサイトのファビコンをここでダウンロードしたものを使っています。実際のところ、自分でこのクオリティを超えるのはかなり難しく、この方法が一番のおすすめです。これだけ種類があれば、他と被ることもそうはないと思いますしね。「たくさんありすぎて迷ってしまう」ほどです。→freefavicon.comファビコン設置手順ますは基本となる静的HTMLでの設置方法です。ルート直下のimagesフォルダにアップロードしたとして、<head>内の<tilte>下あたりに記述します。これでブラウザで表示が確認できるはずです。href="/images/favicon.ico">簡単ですね!WordPressでのファビコン設定WordPressでは2種類の設置方法を紹介します。いずれの場合も画像はお使いのテーマの中のimagesフォルダにアップロードします。仕様テーマのヘッダテンプレート:header.phpの<head>内に下記のようにメタタグを加えます。href="'.get_stylesheet_directory_uri().'/images/favicon.ico">'.PHP_EOL;?>※留意するべき点はテーマフォルダまでのパスの取得にget_bloginfo('template_url')やget_template_directory_uri()を使用しないということです。前者は非推奨となっていますし、両者ともに子テーマで使用した際には親テーマのパスを取得してしまいます。親子いずれで使用しても有効化しているテーマディレクトリを取得するget_stylesheet_directory_uri()を使用します。子テーマのファビコン表示でうまくいかない場合はここをチェックしましょう。次の例では使用するテーマのfunctions.phpで指定するという方法です。'blog_favicon');?>使用しているテーマフォルダthema/images/の中のfavicon.icoをファビコン画像として使うという指定です。htaccessでの指定ApacheのErrorDocumentを利用したこの方法は通常のHTMLサイトはもちろん、WordPressほか、いろんなタイプのCMSでも有効です。http://example.com/favicon.ico</Files>ファビコンが更新されないこれまでのファビコンから変更した場合によく見られる現象ですが、画像が変更されないことがあります。ほとんどのケースでこれはブラウザのキャッシュが原因です。下記のようにヘッダのソース上で出力されているパスに直接アクセスしても、古いファビコンが表示されるはずです。href="https://seous.info/wp-content/themes/enoughone-kappa-s/images/favicon.ico">この場合はブラウザのスーパーリロードを行ってください。ブラウザの画像などが更新されないちなみにキャッシュがしつこいChrome(Windows)では以下の場所にFaviconとFavicons-journalという2つのキャッシュ関連ファイルがありますので、Chromeを終了してから、こちらを直接削除しても構いません。Data\Defaultいかがでしたか。コメントをキャンセルメールアドレスが公開されることはありません。ひと昔前なら画像で表現していたようなアイコン。WordPressをはじめ、サイト構築を行っていると変更が反映されない場合があります。introductionウェブサービスの構築・集客コンサルティングをやっているR3098です。このサイトではWordPressの初級・中級ユーザーや集客に悩むウェブサイトオーナーに向けた情報を発信しています。