WordPress サイトにファビコンとスマホのホーム画面用アイコンを設置する方法

2013-10-06-001

Web サイトを開いた時に、ブラウザのタブやアドレスバーに表示される小さなロゴマーク、その名もファビコン…。あれがずっとほしかった hirose (@shirose_jp) です。難しそうだし、ロゴもないしで手を付けられずにきたのですが、ちょっと背中を押される出来事があり、ついに重い腰を上げました。iPhone などでホーム画面にブックマークした際に表示されるアイコン用画像もずっとほしいと思っていたので、合わせて設置しました。

目次

  1. きっかけ
  2. 画像を準備
  3. .ico ファイルと Retina 対応の PNG 画像を作成してくれる Web サービス
  4. .ico ファイルをアップロードしてファビコンを設置
  5. PNG 画像をアップロードしてホーム画面用アイコンを設置
  6. まとめ

きっかけ

基本的に腰の重い自分が行動を起こす時というのは、えてして外から何かしら圧力めいたものを受けた時ですw 今回、そんなきっかけになったのは次の記事。

iOS 7 を搭載した iPhone の Safari で、お気に入りのブログのアイコン画像を画面上に並べておき、ワンタップでアクセスできるようにする素敵テクが紹介されています!その中で、何と当ブログ Simple Living も登録していただいていましたヾ(o´∀`o)ノワァーィ♪

でも、記事の中にあったスクリーンショット画像を見て愕然。このブログのアイコンはシンプルを通り越して、哀愁を漂わせていたのです。これではいけないと、懸案事項だったファビコンとアイコン画像の設置に取り組むことにしました。なお、以下の画像はそのスクリーンショットを、ちらかりベクトルの管理人ベクター君、ではなく、けいとさん (@keitotanner) の許可のもと、掲載させていただいたものです。

「ベクター君って誰?」って思った方は、次の記事をチェック!気分が落ち込んでる時にこの記事を読むと、明るい気分になれますよw

画像を準備

早速、作業に取りかかります。自分で一からロゴを作ることができるサイトもありますが、手元にファビコンやアイコンとして使いたい画像がある場合は、それをもとに作成するのが早いです。

私はつい先日、ふじもなおさん (@atelier_monao) に親子3人の似顔絵イラストを描いていただいたので、その画像をファビコンとアイコンにしようと考えました。

.ico ファイルと Retina 対応の PNG 画像を作成してくれる Web サービス

画像を用意したら、ファビコンやホーム画面用アイコンとして使うためにファイル形式とサイズを最適化します。この作業を無料で簡単に行える Web サービスが次の記事で紹介されていたので、使ってみました。

まず、ALLTHEFAVICONS!!!! のサイトにアクセスします。

「Choose File」のボタンをクリックし、PC から画像を選びます。注意書きには、正方形で一辺が 144px 以上、.jpg または .png 形式の画像ファイルが必要と書いてあります。

「Advanced Settings」をクリックすると、生成する形式やサイズを選べるようになりますが、私はとりあえずデフォルトのまま、すべてチェックが入った状態で「Do the magic!」ボタンを押しました。

次の画面では、「Your files are here.」をクリックします。

すると見慣れない画面になるので少しびっくりしますが、「allthefavicons.zip」だけダウンロードすればオッケーです。ダウンロード後、解凍すると画面上に表示されていたファイルがすべて入っています。このうち、favicon.ico ファイルには 16 x 16px, 32 x 32px, 64 x 64px, 128 x 128px の4種類のサイズの画像が取り込まれています。

favicon.ico をアップロードしてファビコンを設置

続いて、生成された画像を FTP でサーバにアップロードした上で、ファビコンとして表示させるためのコードを書きます。

アップロードする場所に決まりはないようですが、このブログは WordPress を使っているので、テーマフォルダ(例: /wp-content/themes/twentytwelve/)の中に images フォルダを作り、そこにアップしました。すると、ファビコン画像へのパスは次のようになります。

http://xxx.com/wp-content/themes/twentytwelve/images/favicon.ico

WordPress では get_template_directory_uri() というテンプレートタグを使ってテーマフォルダへのパスを取得することができるので、今書いたファビコン画像へのパスは、次のように書き直せます。

<?php echo get_template_directory_uri(); ?>/images/favicon.ico

これを使ってテーマフォルダの中にある header.php ファイルにコードを記述します。header.php を開くと、上の方に <title>・・・</title> と書いてあって、おそらくその下に <link ・・・> というタグがいくつかあるはずですので、そこに以下のコードを付け足します。

<link rel="shortcut icon" href="<?php echo get_template_directory_uri(); ?>/images/favicon.ico">

成功すると、ブラウザのタブやアドレスバーに次のようにファビコンが表示されます。オリジナルの画像が表示される瞬間を目の当たりにすると、感動しますよ!

ファビコンは iPhone の Safari にブックマークする際の画像としても使われます。

こんな風にオリジナルのアイコンで表示されるようになります。

PNG 画像をアップロードしてホーム画面用アイコンを設置

次に、Safari でブックマークではなく「ホーム画面に追加」を選んだ時に使われるアイコン画像も設置します。こちらはファビコンとは別に画像を用意する必要があります。

ALLTHEFAVICONS!!!! のサイトからダウンロードし、解凍したフォルダの中に、favicon_144.png という名前の PNG 画像があります。アップロード先はブログのルートフォルダにすることもできますが、今回はファビコンと同じように、テーマフォルダの images にアップロードしました。そうするとパスは次のようになります。

<?php echo get_template_directory_uri(); ?>/images/favicon_144.png

header.php ファイルを開き、ホーム画面用アイコンのコードを挿入します。場所はファビコン用のコードの次で大丈夫です。

<link rel="apple-touch-icon" href="<?php echo get_template_directory_uri(); ?>/images/favicon_144.png">

これで、iPhone の Safari でホーム画面に追加を選んだ際にアイコンが反映されるようになります。

ホーム画面にオリジナルのアイコンが出来るのがうれしいです!

rel="apple-touch-icon" の部分を rel="apple-touch-icon-precomposed" としておけばアイコンを光沢なしで表示させることもできるようです。

まとめ

ファビコンの設置などは大変そうというイメージがありましたが、実際にやってみたら思っていたほど難しい作業ではありませんでした。画像を用意→ファビコンやアイコン用に変換→アップロード→コードを記述という手順を1つ1つ踏んでいけば、恐れるほどの作業ではありません。

ちょっとした作業でブログにオリジナル感が出て、自分の愛着も増すのでまだの方はぜひやってみてください。

参考記事:

5 thoughts on “WordPress サイトにファビコンとスマホのホーム画面用アイコンを設置する方法

  1. Pingback: iOS7裏技!Safariトップを「お気に入りブログランチャー」にカスタマイズする方法! | ちらかりベクトル

  2. 美咲

    一度CSSをいじってほぼ完成していたページが表示されなくなってしまい、今回も不安がありましたが、
    初心者のわたしでもホーム画面用のアイコン、おかげさまで設置することが出来ました!
    本当に感謝です!ありがとうございます^^

    Reply
    1. hirose Post author

      美咲さん、コメントありがとうございます!アイコンがあると、自分のホーム画面で眺めるのも楽しくなりますよね。記事がお役に立ててよかったです^^

      Reply
  3. Pingback: [WordPress]プラグインなしでFaviconを設定しました。 | 続・iPhoneの世界

  4. Pingback: 「WP改造計画」~タグの横のアイコンを設定する~

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です