ファビコン設置で差別化を/WPプラグイン「All in one Favicon」

All in one Faviconのタイトル


WordPressプラグイン「All in one Favicon」

Favicon(ファビコン)を簡単に設置するプラグイン。 GIFやPNGなど複数画像ファイルも対応。さらに「Apple Touch Icons」というWebクリップアイコンも設定できます。

<主な特徴>

  • 直接記述と違い、テンプレートを変えてもOK
  • 通常の画像のICONファイルだけでなく、GIFやPNGも可能
  • 「Apple Touch Icons」も設定可能

インストール方法

  • (1)管理画面左側「プラグイン」から「新規追加」でこのプラグインを検索
  • (2)「いますぐインストール」をクリック
  • (3)「プラグインを有効化」をクリックして有効に

インストール方法をもっと詳しく

参考までにダウンロードサイト

はじめに

ファビコンは、有名なサイトなどは必ず設置しています。ネットのCI(コーポレート・アイデンティティ)といった感じでしょうか?長期的なブランド戦略上の一種です。

Favicon(ファビコン)?

そもそもファビコンって何って話ですが。

Favicon(ファビコン)は、ウェブサイトのシンボルマーク・イメージとして、ウェブサイト運営者がウェブサイトやウェブページに配置するアイコンの俗称である。Favorite icon(フェイバリット・アイコン:お気に入りアイコン)という英語の語句を縮約したものである。
出典元:ウィキペディア「Favicon」より

言葉では分かりづらいですが、例えば、こんな感じ。楽天イーグルスマークがファビコンになってます。

All in one Faviconの設定その1

またブックマークのタイトルの左にもファビコンが表示されてます。

All in one Faviconの設定その2

ブックマークに登録してあるサイトにファビコンがあると、視認性があがります。雑誌や書籍で文字だけより絵があった方が印象に残るのと同じです。

タブなど多数開いていると、文字よりアイコンの方が目につくのです。

企業サイトなどビジネスサイトはもちろんですが、 ソーシャル時代の今、個人の自己プロデュースが叫ばれる中では、自らのブランドロゴ的なファビコンも必要になってくると思います。

とにかく、ファビコンがないより、あった方が プロっぽい気がしますよね?ということです。よりサイトへの愛着が湧くことでしょう。

Apple Touch Icon(Webクリップアイコン)?

さらに、このWordPressプラグイン「All in one Favicon」は、このファビコンを簡単に設置するとともに、「Apple Touch Icon」も同時に設置できます。

 この「Apple Touch Icon」は、Webクリップアイコンと言われ、「iPhone」や「iPod Touch」のSafariのブックマークをする際に、ホーム画面にそのショートカットする際のアイコンです。

こんなやつです。

All in one Faviconの設定その3

アプリではおなじみでしょうが、サイトも同様にホーム画面に設置できます。

こんな記事がありました。

Webサイトを作ったらまずやるべきことチェックリストという、はてブ2000ブクマ以上の大人気記事がありますが、そこに追加すべき内容が1つ増えていました。

iPhone/iPad用のアイコン設定です。

iPhone用のSafariでは、ブックマーク追加メニューから「ホーム画面に追加」を選ぶと、ホームにそのサイトのアイコンを追加できます。アップルはこれは「Web Clip(ウェブクリップ)」と呼んでいるようです。

引用元:Web担当者Forum「iPhone/iPadのホーム画面用アイコンapple-touch-icon.pngをサイトに設定しよう」より

こちらもどんだけブックマークしてくれるかはともかく、ブックマークでショートカットしてくれたのに、自らのサイトの「Apple Touch Icon」を用意してないと、デフォルトののっぺらぼうなアイコンになってしまって味気ないのです。

ブックマークしてれたファンのためにも、差別化を図るためのアイコンは重要です。人気のでるサイトを目指すためにも今のうちから用意することも必要かもしれません。

有効化後の設定、使い方

サイドバーの設定の「All in one Favicon 」で、設定します。

Favicon(ファビコン)の設定

まずファビコンの画像を用意します。

ファビコンの作り方ですが、
1)画像編集ソフトで16×16ピクセルサイズのPNG画像で保存
2)ファビコンジェネレーターというWebサイト上でICONファイルに変換
3)上記からダウンロード

例えばこんなサイト。

これが一般的な流れですが、サイト上でデザインしてくれるのもあります。下記のまとめサイトからweb上で作成するファビコンジェネレーターサイトを紹介してますので参考にしてください。

また、512×512のpng画像を用意すれば、ファビコン画像だけでなく、後述する「Apple Touch Icon」などの様々な形式の画像ファイルを一気に作ってくれるジェネレーターサイトも発見しました。

便利なものをありがとうございます。

とにかく上記サイトや、もしくは自分で画像ソフト等で作ったファイルを用意したら、アップロードします。

さて、試しにやってみます。

今回私のサイトに導入すべく、512×512のサイズで作ってみました。

All in one Faviconの設定その4

これを上記のMulti Favicon Generatorでやってみます。ファイルを選択し、送信ボタンを押します。

All in one Faviconの設定その5

zipファイルがダウンロードされますので、解凍したらicoファイルを含めて6個同時に作られました。

All in one Faviconの設定その6

ここで出来たICOファイルを、ICO Frontendの「アップロード」ボタンをクリックしファイルを選択し、変更を保存をクリックします。

All in one Faviconの設定その7

登録されました。

All in one Faviconの設定その8

ブラウザで確認します。

ちょっと分かりづらいですが、無事ファビコン設置できました。
(地味カラーすぎたなと反省)

All in one Faviconの設定その9

Apple Touch Iconの設定

次にApple Touch Icon(Webクリップアイコン)の設定ですが、先ほど一気に作られたPNGの画像ファイルを使います。

先ほどの画面下のApple Touch Iconのアップロードをクリックして、画像ファイルを選択し、変更を保存します。
144×144サイズのPNG画像を使います。

All in one Faviconの設定その10

登録されました。

All in one Faviconの設定その11

実際に確認しますと、部屋にあったipadでホーム画面に設定してみたら出来ました。

All in one Faviconの設定その12

光沢、角丸なそれっぽい感じですねー。

ファビコンよりはいい気がする。

プラグインを使わない場合

プラグインを使わないで、直接記述して表示も可能です。一応こんな感じです。

Favicon(ファビコン)の記述

	<link href="<?php bloginfo('template_directory'); ?>/img/favicon.ico" rel="shortcut icon" />
※/img/画像のアップロードフォルダは自分の環境によって違います。

Apple Touch Iconの記述

オリジナルのアイコンに角丸 + 光沢を加える場合。
rel=apple-touch-iconにする。

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

上記に光沢をなくす場合。
rel=apple-touch-icon-precomposedにする。

	<link href="<?php bloginfo('template_directory'); ?>/img/apple-touch-icon.png" rel="rel=apple-touch-icon-precomposed" />
※/img/画像のアップロードフォルダは自分の環境によって違います。

媒体ごとにサイズをかえる場合は、4パターンを表記(光沢あり)

	<link href="<?php bloginfo('template_directory'); ?>/img/apple-touch-icon-57x57.png" rel="apple-touch-icon" sizes="57x57" />
	<link href="<?php bloginfo('template_directory'); ?>/img/apple-touch-icon-72x72.png" rel="apple-touch-icon" sizes="72x72" />
	<link href="<?php bloginfo('template_directory'); ?>/img/apple-touch-icon-114x114.png" rel="apple-touch-icon" sizes="114x114" />
	<link href="<?php bloginfo('template_directory'); ?>/img/apple-touch-icon-144x144.png" rel="apple-touch-icon" sizes="144x144" />
※/img/画像のアップロードフォルダは自分の環境によって違います。

まとめ

WordPressプラグイン「All in one Favicon」を使うことで、サイトの視認性をあげる可能性があります。自らのサイトに愛着も湧きますので、この機会に設置してみるのもいいかもしれません。

参考

Web Clipアイコンを指定する

LINEで送る
Pocket

WordPressこれで学びました

  • WordPressの参考書は、制作ものが多いけど、この本はSEOに特化した割り切りが良い。初めてWordPress導入し、SEO対策をどうしようと悩んでいた時に購入しました。
     WordPressは基本的にはSEOに優れたCMSでありますが、能力を最大化するには、パーマリンク等のSEOに適した設定やSE対策のプラグインなどでパワーアップさせる必要があります。読んだ時は、目から鱗が落ちる内容で、当初はそのまま実践してました。
     また、WordPressだけでなく、基本的なSEO対策の本として、キーワードやタイトル設定なども勉強になりました。

コメントを残す