2012年06月05日 category : WordPress tags :

WordPressにファビコンを設置する方法。iPhone同時対応!

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

favicon

WordPressで作ったブログにファビコンを追加する手順です。併せてiPhoneにも対応させます。

WordPressでブログを作成したらファビコン(favicon)を作成しましょう。あまり聞きなれない言葉かも知れませんがインターネットを利用していると頻繁に目にしています。

ファビコンとはWebブラウザのアドレスバーやタブ、お気に入り登録時にサイトタイル横に出ているあの小さな絵(アイコン)のことです。ファビコンは使われる場所によってサイズが変わりますが、マルチプルアイコンは一つの画像に複数のサイズを含める事ができます。


favicon-01

01 . ファビコンの画像サイズ

ファビコンはICO形式と呼ばれるファイル形式で作成されます。縦横のサイズは同じ正方形となり16×16、32×32、48×48、256×256などのサイズがあります。Webブラウザのアドレスバーやタブに利用されるアイコンのサイズは16×16が利用されます。

その他のサイズはデスクトップなどでショートカットとして使う場合などに使われます。16×16は小さなサイズですのであまり複雑でない画像が望ましいです。使いたい画像をPNG形式で用意してファビコン作成ソフトやファビコン作成サイトでICOファイルを作ります。

使いたい元画像は256×256で作ると良いと思います。各サイズでそれぞれ作るのが一番綺麗ですが手間もかかります。変換ソフトや変換サイトはリサイズに対応しているところが多いので、大きめのサイズで準備しておいてOKです。

02 . ICOファイルが出来たらサーバにアップロード

作成したICOファイルをサーバのimagesフォルダにアップロードします。ファイル名は「favicon.ico」としてください。

03 . header.phpを編集します

<head></head>の間にMETAタグとLINKタグが並んでいると思いますので次の1行を追加します。


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

これで完成です:) Webブラウザで確認してください。ファビコンが表示されていますね。

favicon-02

04 . iPhone(スマートフォン)のショートカット

ファビコンはパソコン用となっていますが、iPhoneでもショートカットを作成できることご存知ですか?iPhoneでの手順を紹介します。iPhoneのWebブラウザSafariにて当ブログへアクセスしてみてください。(http://05step.com)

丸の箇所をタップするとメニューが開きますので「ホーム画面に追加」をタップします。するとホームにショートカットが作成されます。

favicon-iphone-01
20120605-favicon-iphone-02

これは画面をキャプチャーしてアイコンとして表示しているだけのショートカットです。便利ですがどこのサイトか分かりにくいですね。これもパソコンと同じようにオリジナルのアイコンに変更できるんです!

20120605-favicon-iphone-03

05 . iPhone(スマートフォン)にも対応させよう

ICOファイルを作成した時に使った変換元のPNG画像をそのまま流用しましょう。もちろん別の画像でもいいのですがファイル形式はPNG形式とします。これもファビコンと同じようにimagesフォルダにアップロードします。名前は「favicon.png」とします。

そして03ステップ目と同様にheader.phpを編集します。
<head></head>の間にMETAタグとLINKタグが並んでいると思いますので次の1行を追加します。


<link rel="apple-touch-icon" href="<?php bloginfo('template_url'); ?>/images/favicon.png">

04ステップ目と同じようにホーム画面にショートカットを追加してみましょう。オリジナル画像のアイコンが表示されました。これはもう、1つのアプリケーションみたいです。一気に愛着が湧きます:)

20120605-favicon-iphone-04

iPhoneのショートカットアイコンおよびアプリは光沢が掛かったような処理がされています。オリジナルの電話アイコンやメールアプリのような処理ですね。しかし最近はこの処理がかかっていないアプリも沢山あります。
光沢を掛けたくない場合は先程の1行の代わりに以下の1行を追加してください。


<link rel="apple-touch-icon-precomposed" href="<?php bloginfo('template_url'); ?>/images/favicon.png">

20120605-favicon-iphone-05

光沢なしになりましたね。ファビコンやアイコンを作成することによってブログを見てくれている人もアクセスしやすくなりますし、外出先で自分のブログを確認する際もちょっと楽しくなりますね。ぜひ設置してみてください。

HOME >>  WordPress > WordPressにファビコンを設置する方法。iPhone同時対応!