faviconが表示されない?WordPressのプラグインRealFaviconGeneratorでファビコンを簡単に設定する方法

皆さんはWEBサイトにfavicon(ファビコン)を設置していますか?

デバイスの多様化により色々なサイズのファビコンを用意しなければならない‥なかなか手間がかかりますよね。手間をかけたのに表示されない!なんて壁にぶつかっている方も多いかと思います。

今回はそんな方におすすめのプラグインFavicon by RealFaviconGeneratorをご紹介します!

そもそもファビコンって何!?という方もご安心下さい。
誰でも簡単にファビコンの設置が出来るので、ぜひ活用して頂きたいです。

1.favcon(ファビコン)とは?

Wikipediaでは以下のように説明しています。

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

ファビコンとはWEBサイトを開いた時にタブに表示される小さなアイコンのことです。

ブックマークをした際にもこのアイコンが表示される為、ユーザーがお気に入り一覧から目当てのページを探す際の目印にもなります。

ファビコンはページを判別するための目印になる!リピート率の高いWEBサイトを目指すのであればユーザーの記憶に残りやすいファビコンの設置は必須です。

2.RealFaviconGeneratorをインストール

プラグインを使わずにファビコンを設置するとなると、ブラウザ上の表示だけでなく、iPhoneやandroid端末でブックマークされた時のアイコン、その他様々なデバイスにむけて対策しなくてはなりません。

それをひとまとめに設定してくれるのがこのプラグイン
Favicon by RealFaviconGenerator」です。

WordPressのダッシュボードを開き、「プラグイン」→「新規追加」

Favicon by RealFaviconGeneratorで検索をしてこちらをインストールして下さい。

3.まずは画像の用意!

インストールをしたら、まずは画像の用意です。

注意点としてここでの画像サイズはプラグインが推奨する 260 × 260 ピクセル以上の正方形を用意しましょう。

画像ファイルの拡張子は「png」もしくは「gif」、背景を透過させたものが望ましいです。

illustratorやPhotoshopを使用するか、無料で利用できる画像編集・加工ソフトがありますので、画像をpngもしくは、gif形式で保存して下さい。

4.faviconの設定方法

プラグインをインストールすると、「設定」に「Favicon」が出てきますので、こちらを開いてください。

開くとこのような画面が出てきますのでAppearance > Faviconをクリック。

Select from the Media Libraryをクリックするとメディアライブラリが開きますので、ここで先ほどファビコン用に作った画像をアップロードし、選択してください。

選択し終えたらGenerate faviconをクリック。

するとファビコンの細かい設定画面に切り替わります。
まずはiPhoneやAdroid端末でホーム画面にブックマークを追加したときの表示設定を行いましょう。

のラジオボタン Add margins and a plain background. を選択。
で背景の色を設定出来ます。
のつまみでmarginのサイズを調整できます。

お好みにカスタマイズしてみて下さい。

Androidも同じようにカスタマイズしたら、次はWindows Metroの設定。
赤く囲った部分でアイコンの背景色がカスタマイズ出来ますので、こちらも同じように好みのものに設定して下さい。

最後にページ下にあるこちらの設定。

App name」というタブを開き、ラジオボタンはSpecific app name, override the page title.を選択して下さい。

My Siteに入力したタイトルが、ホーム画面にブックマークを追加した時のタイトルになります。

ここまでの設定が終わったら「Generate your Favicons and HTML code」をクリックして終了です!

ご覧の通り、しっかりファビコンが反映しました。

5.まとめ

WEBサイトを制作する上で躓きがちなファビコンの設置
このプラグインを利用すれば簡単に設置することが出来ます。

デバイスごとに画像サイズを分けて作る必要もありませんので、手間もかかりません。

ファビコンの設置に悩まれていた方に、ぜひ有効活用して頂きたいです!

一覧へ戻る

最新記事

GMOフリーナンス
メイクショップ
BASE
Paid

おすすめ記事はこちら

最新記事

Paid
メイクショップ
GMOフリーナンス
BASE

お問い合わせ

資料ダウンロードはこちらから

お問い合わせイメージイラスト

お問い合わせ・資料ダウンロードはこちらから

頂いたお問い合わせに出来るだけ迅速に(24時間以内)に返信します。知識豊富な専門のスタッフが親切・丁寧にお答えしますので、お気軽にお問い合わせください。

LIHが運営する
お役立ちブログ配信中
Staff blog

LIHの最新情報や、耳よりなセミナー情報、webに関するノウハウをブログ形式でお届けします。
ぜひご覧ください。

ブログ一覧を見る

各種SNSはこちら Social media

  • 株式会社LIH 公式Facebook

    Facebookいいねボタン

    FaceBookにて最新情報や新着情報を配信しています。

  • 株式会社LIH 公式Twitter

    Twitterフォローボタン

    Twitterにて最新情報や新着情報を配信しています。

  • 株式会社LIH 公式Instagram

    Instagramフォローボタン

    Instagramにて制作実績情報を中心に配信しています。

  • 株式会社LIH LINE公式アカウント

    友達追加ボタン

    LINEにて最新情報や新着情報を配信しています。

  • 株式会社LIH 公式Youtubeチャンネル

    チャンネル登録ボタン

    Youtubeにて、Webに関する豆知識をわかりやすい動画でご紹介しています。