faviconとウェブクリップのアイコンを作成して変更する

公開日: 2014年07月01日

favicon

faviconとウェブクリップを作成し、変更・反映させる方法です。とても小さな部分ですが、個人的には重要な部分だと思っています。基本的に、Wordpressテーマは「賢威」、レンタルサーバーは「エックスサーバー」での設定方法を前提に進めていきます。

もくじ

はじめに

私が使用しているWordpressテーマ「賢威6.1 コーポレート版」では元々、favicon(ファビコン、favicon.ico)やウェブクリップは用意されています。

ですが、これのまま使っちゃうと、他の賢威ユーザーの皆さんとアイコンが被ってしまいますよね。

faviconはサイトを開いている時やお気に入りに登録してもらえた時などに表示されますし、ウェブクリップに関してはスマホでお気に入りに入れてもらえた時の表示サイズがfaviconより大きくて目立ちます。

特にスマホのウェブクリップはとても印象に残るものなので、スマホからの流入がそれなりにあるサイトであれば、是非オリジナルの画像にしておきたいところですね。

faviconの作成と変更

では、まずはfaviconから作成・変更したいと思います。

faviconのサイズについてですが、私は16px × 16pxの1つしか作っていません。

参考までに、LIGさんの記事を以下に引用。

まず、16px × 16px はブラウザで多用されるサイズなので、一番大事ですね。
32px × 32px のアイコンはどこで使われるのかというと、主にWindowsでデスクトップなどにショートカットアイコンを作成した場合に使用します。
24px × 24px はもっと限定的で、WindowsのIE9で「ピン留め機能」を使うときに使用します。
さらには、ショートカットアイコンで 48px × 48px、64px ×64px、128px ×128px、258px ×258px を使用するOSもあり…きりがなくなってきました。

たくさんのサイズのアイコンを毎回用意するのは正直大変ですよね。
大きなサイズでひとつ作って縮小して使いまわすこともできますが、思うように綺麗に縮小してくれなかったり、古いブラウザは対応していないこともあるようです。

個人的には 16px × 16px 、32px × 32px のふたつをマルチアイコンにすれば充分、なんなら 16px × 16px ひとつでも問題ないと思っています。
(32px × 32px ひとつでもいいですが、16px × 16px になったときにブラウザによって見え方が違ったり、思うように綺麗に縮小されないことがありました。)
きっちり完璧に作りたい方は、すべてのサイズをマルチアイコンにするのも手ですが、ファイルサイズが大きくならないように気をつけましょう。

出典:もう何も恐くない…綺麗なfavicon作成の基本的なコツ・アイデアまとめ | 株式会社LIG

なんなら 16px × 16px ひとつでも問題ない

面倒くさがりやの私にとってこんなに素敵な言葉はありません。
何かこういう風に書かれていると、後ろ髪を引かれる思いをせずに16pxのみでいけます。

ということで、16px × 16pxのサイズでpngファイルを作成し、アイコン(icon)変換ツール – Favicon Converterでicoファイルに変換しました。

私は、「ファイルを選択」からpngファイルを選択した後、「リサイズしない」を選択して、「短い辺に合せてカットする(トリム処理)」のチェックは何となくそのまま入った状態にして、「減色しない」もそのままにしています。

アイコンを作成・ダウンロードしたら、ファイル名を「favicon.ico」にして、テーマフォルダ内にアップロードします。

賢威を使っている私の環境だと、以下のように。
inosh.jp/wp-content/themes/keni61_wp_corp_140111/favicon.ico
って感じですね。

faviconは何かキャッシュが強力なのか分からないのですが、リロードしても中々変わってくれないので、そういう場合はキャッシュを削除すれば反映される(はず)です。

変わりました。
favicon.icoの画像

ウェブクリップの作成と変更

ウェブクリップに関しては、私は144px × 144pxで作っています。

参考までに、iをありがとうさんの記事を引用。

PNG形式の画像なら何でも使えそうです。
美しく表示させるためと、容量の節約のため、150 x 150ピクセルぐらいが丁度いいと思います。

画像は、iPhone/iPod touchでは114 x 114に、iPadでは144 x 144にリサイズされてアイコン化されます。
Retinaディスプレイではない旧モデルの場合は、解像度が半分で、iPhone/iPod touchは57 x 57に、iPadは72 x 72になります。

おすすめの画像サイズは、144 x 144ピクセルです。
このサイト「ありがとうiPod」で設置しているアイコンは、150 x 150ピクセルです。
本家Apple.comに設置されているアイコンは、129 x 129ピクセルです。(”http://www.apple.com/apple-touch-icon.png”を参照)

実際には画像の大きさは適当に作っても、アイコン作成時に自動的に縮小(または拡大)されます。
正方形じゃなくても、自動的にトリミングされます。

出典:研究室/iPhone、iPod touch、iPad用Webクリップ用アイコンの作り方 – iをありがとう

私の場合は、イラストレーターなどで144px × 144pxのpngファイルを作成しました。

そして、賢威の場合だと2種類の設定方法があります。

まず1つ目は、既に置かれているウェブクリップ用の画像と差し替える方法。この方法だと、「home-icon.png」というファイル名にして、以下のディレクトリに保存します。

inosh.jp/wp-content/themes/keni61_wp_corp_140111/images/home-icon.png
って感じですね。

2つ目は、任意の場所に任意のファイル名で保存し、header.phpのウェブクリップ読み込み部分のコードを書き換える方法です。ちなみに私はこっちの方法を選びます。

まずは、任意のディレクトリにアップロード。私は以下のディレクトリにファイル名を「web_clip.png」としてアップロードしました。
inosh.jp/wp-content/themes/keni61_wp_corp_140111/images_my/web_clip.png って感じですね。

で、header.phpに書かれたウェブクリップ読み込み部分のコードを以下のように書き換えます。

header.php

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

下矢印

header.php

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

変わりました。(スマホの待ち受け画面の背景と被ってしまって分かりにくいですが…)
ウェブクリップの画像

と、デザインの良し悪しは置いておいて、これでfaviconとウェブクリップの変更が完了しました。

ブックマークの中に、別サイトなのにアイコンが被ってたりするサイトがあるのは、何かアレですよね。面倒ですが、是非とも変えておきたいところです。

\(^o^)/ ぼっけぇシェア \(^o^)/

この記事へ1件のトラックバック

コメントを残す

サブコンテンツ
ページトップへ戻る ページエンドへ進む