CrystalSnowman.com

あなたの時間節約につながる情報を提供します

WordPress faviconを簡単に設置する方法

favicon

faviconを作ってみました。Excelとペイントアクセサリとオンラインサービスで簡単に作れたので方法を紹介します。あなたのサイトに設置してみてはいかがでしょうか。

作成方法

faviconについて

faviconはWebページに配置するアイコンのことです。このようにブラウザーのタブやお気に入りに表示されます。

favicon image

faviconを設置するとサイトが目立つようになります。またパフォーマンスが向上する可能性があります。
パフォーマンスについては、サイトにアクセスがあるとWebサーバはfaviconを探します。見つからない場合メッセージをエラーログに出力します。
faviconが設置されていればこのエラーログ出力処理がなくなり、多少のパフォーマンス向上が期待できます。

faviconにするイメージの作成

シンプルなアイコンがよかったので、手軽にイメージを作成できるExcelで作ることにしました。
図形の挿入と塗りつぶしで作成したシンプルなイメージです。

favicon excel image

画像ファイルの作成

Excelで作成したイメージをキーボードの「Print Screen」でスクリーンキャプチャーします。
Windowsに標準で備わっている「ペイント」アプリを起動して、Ctrl + vで張り付けます。
トリミングしてpng画像として保存します。

favicon paint image

favicon用ファイルの作成

faviconにするには16×16サイズの.icoファイルが必要です。

こちらのオンラインサービスで作成しました。

FavIcon Generator
favicon generator

gif、jpg、png、bmpファイルをアップロードすると.icoファイルを作成してくれて、downloadできます。



今回は使わなかったのですが、別のオンラインサービスも紹介します。

マルチアイコン作成。無料で透過マルチアイコンが作れます。
複数マルチアイコンを作ろう!

どちらも同じことができます。

faviconの設置

作成したfaviconファイルをサイトに設置します。
.icoファイルをWordPressのテーマが置かれているフォルダーに保存します。

mythemeというオリジナルのテーマを使用しているので、以下のmythmeフォルダーにftpでfaivcon.icoを保存します。
「/var/www/html/wp-content/themes/mytheme」

favicon ftp

次にこのサイトはWordPressで作成しているため、header.phpにfaviconを参照する記述を追記します。

3と4行目の記述ですが、テーマフォルダーに.icoファイルを置いたので、bloginfo(‘template_directory’);でテーマの保存場所を取得しました。

Wikipediaによるとfavicon指定は2通りの記述方法で指定するのが望ましいとありましたのでそのようにしました。
Favicon | Wikipedia

favicon表示

無事faviconが表示されるようになりました。表示されない場合はいったんブラウザーのキャッシュを削除し、リフレッシュすると表示されると思います。
パフォーマンス向上については正直体感できませんでした。ただ確実にログ出力は減少するので無駄ではないと思います。

まとめ

特別なアプリケーションを用意することなく、Excelとペイントとオンラインサービスでfaviconを作ることができました。
目立つこととパフォーマンスが若干向上することが期待できます。
あなたのサイトにもfaviconを設置してみてはいかがでしょうか。
サイトへの愛着がわくと思います。


Top