favicon-generator_ecmg

ワードプレス

ファビコン表示を一括設定。WordPressプラグイン「Favicon by RealFaviconGenerator」の使い方

favicon_Tab_0

名前は通称「ファビコン」。
彼がいると、一気にサイトイメージや信頼感が高まります。ブラウザのタブに表示されるだけじゃありません。彼はブックマークに登録された時にも、その姿を現します。

bookmark_1

もし彼がいないと、、、

bookmark_2

・・・ちょっと残念ですね。

でも、待っていても、彼はやってきてはくれません。誠実な日々を送っていても、神様がご褒美に連れて来てはくれません。Google先生がいつか連れてきてくれるわけでもありません。じゃあ、どうしたら”彼”はやってきてくれるのでしょうか?

・・・残念ながら、自分で連れてくるしかありません。でもどうやって?

favicon-generator-ins1

ファビコンの存在は知ってるけど、設定が難しそう・・・

スマートフォン用のファビコン設定は、また別のやり方で設定が必要・・・?

出来るだけ難しいカスタマイズしたくない・・・

そう、”彼”すなわち「ファビコン」を設定しようと思いたって調べてみると、表示させたいデバイスごとに、それぞれうまく表示させる設定が必要だということを知り、初心者にとっては大きな壁を感じてしまいます。

「パソコンのブラウザ上での表示」だけでなく、

「iPhoneでブックマークされた時のアイコン表示」

「Android端末でブックマークされた時のアイコン表示」

「Windows 8などでブックマークされた時のタイルアイコン表示」

などなど、人によって使用しているデバイスは様々なため、いろいろな対策をしないといけません。でも「世界のWordPress」さんには、今や簡単な解決方法は存在するものです。

というわけで今回はWordPressプラグイン【Favicon by RealFaviconGenerator】を使って、これらデバイスごとのファビコン表示を簡単に、一括設定する方法を紹介します

このプラグインを使えば、「実際にはどのように表示されるのか」のプレビューを確認しながら、一度にまとめて設定できるので助かります。

新しいプラグインをインストールするなど、何か変更を加える前には、現状のサイトバックアップをしておくことを強くおすすめします。

関連記事

ではファビコン設定を始めましょう。

スポンサーリンク

ファビコン画像を用意する

まずは、ファビコンとして表示させたい画像を用意します。気をつけたいのが、ここでは「背景を透明にした画像」を用意すること。

画像ファイルの拡張子は「.png」や「.gif」。例えば「.jpg」では、背景に色を入れていないつもりでも、白い背景がついて保存されてしまいます。

簡単な例を挙げます。下記2つの画像は一見、両方とも背景が白い画像に見えますが・・・

拡張子png/jpg

Favicon_Flag_tp

Favicon_Flag_BGwhite

これらを右クリック→「名前を付けて画像を保存」をしてみると、違いが分かります(Windows環境での操作方法です)。壁紙が白色じゃないデスクトップに並べてみると・・・

extension_check

左が「.png」、右が「.jpg」です。こうすると違いが分かりやすいですね。

WEB画面上で表示されていた「.png」画像の背景が、今回は偶然白色でした。「その背景が透けて見えるから、どちらも同じように見えていた」ということです。

詳細記事

今回はこのように背景を透明に出来る「.png」または「.gif」形式の画像を使用します。画像は正方形にして、サイズは横×縦を「260px × 260px」以上にして書き出して下さい

私はPhotoshopを使用していますが、背景を透明にして「.png」や「.gif」形式で保存するだけの用途であれば、フリーの画像編集ソフトもたくさんあるので検索してみましょう。

さあ画像の用意が出来れば、あとの設定は簡単です。

RealFaviconGeneratorの設定

まずはプラグインをインストール。管理画面「プラグイン」→「新規追加」で「Favicon by RealFaviconGenerator」で検索するとヒットするので、作者が「Philippe Bernard」であることを確認し、インストール・有効化します。

plugin_install_1

すると左カラム「外観」の中に「Favicon」の項目が現れるので選択。

plugin_install_2

「Select from the Media Library」をクリックし、用意した画像をアップロード。最後に「Generate favicon」をクリックすると、画面が切り替わり、読み込みが始まります。

Config_1

Config_2

その後現れる画面で、プレビューを見ながら設定していきます。

Favicon for iOS – Web Clip

ここではiPhoneやiPadなどのiOSデバイスで、ホーム画面にブックマークを追加したときの表示を設定します。デフォルトのままだと、画像の背景が透明なので、真っ黒に見えています。

クリックで拡大

Config_3

ここで以下のように設定します。

手順

(1)下のラジオボタンを選択

(2)背景色を設定
※参照→HTMLカラーコード
ページ下部の「HTMLカラーピッカー」で色を選択し、「#○○○」をコピーして使用してください。

(3)スライダーを動かして、外枠からの画像までの余白を設定

Config_4

いい感じになりました。

Favicon for Android Chrome

Android OSデバイスで、ホーム画面にブックマークを追加したときの表示を設定します。
こちらもデフォルトのままだと、アイコンのデザインがよく見えません。

クリックで拡大

Config_5

iOS同様に設定していきます。

手順1

(1)下のラジオボタンを選択

(2)背景色を設定

(3)スライダーを動かして、外枠から画像までの余白を設定

(4)アイコンの下に表示されるタイトルを設定

クリックで拡大

Config_6

手順2

(5)「Switcher」ボタンを押して、

(6)タスク切替え時のタイトルバーの色を設定

Config_6_2

Androidデバイス用にも、同じようなアイコンを設定できました。

Favicon for Windows 8 – Tile

こちらもデフォルトのままだと・・・

Config_7

うーん。デザインがイマイチ。背景色を変えてみましょう。

Config_8

うん、これでもいいんですが、せっかくなので・・・

Config_9

こうしてみました。なお下のラジオボタンを選択すると、画像が白に反転します。

Favicon Generator Options

ここでは圧縮設定などを変更できるのですが、基本的にそのままでOK。一番右側にある「App name」だけ設定しておきましょう。タブを選択し、下のラジオボタンを選択。タイトルを設定します。

Config_10

ここで入力したタイトルが、「iOSで、ホーム画面にブックマークが追加された時のタイトル表示」と、「Windows8で、タイルにブックマークが作成された時のタイトル表示」になります。(Androidは先ほど個別に設定したものが使われるようです)

なお上のラジオボタンを選択した場合は、サイトタイトルがそのまま表示されます。サイトタイトルが短く、アイコンの下に綺麗に収まりそうであれば変更の必要はありません。

最後に一番下の「Generate your Favicons and HTML code」をクリックすると、処理画面に切り替わります。

Config_11

処理が終わると自動的に管理画面に戻ってきます。そして完成したそれぞれのデバイス表示を確認できます。

Config_12

よしよし、いいかんじ。なお再設定したい場合は、もう一度「Select from the Media Library」から同様の手順で差し替えが可能です。

もちろん、今開いているブラウザでの表示も切り替わっていることが確認できます。

favicon_Tab1

スマートフォンなど、手持ちの他のデバイスでも確認しておくと安心ですね。

スポンサーリンク

記事が気に入ったら
Requ.logを "いいね!"
Facebookで更新情報をお届け。

Requ.log | レク.ログ

スポンサーリンク
スポンサーリンク

ピックアップ記事

  1. 「私の名前はページプラグイン。」Facebookページのいいね!ボタンをWord…
  2. サイトデザインに合わせよう。TCDテーマ記事下にカード型「いいね!ボタン」をセン…
  3. 魔法のような仕事効率化。ブログにも使えるWindows定型文ツール「Phrase…
  4. ”ブログにおいしい”、注釈画像の作り方。Screenpressoで矢印や枠線、文…
  5. Twitterのシェア数表示を復活!「widgetoon.js & count.…

関連記事

  1. unveil-lazy-load_ec

    ワードプレス

    設定不要!WordPressプラグイン「Unveil Lazy Load」でページ読込スピードアップ…

    簡単装備で速度をブースト!プラグインをインストールするだけで、ペー…

  2. retina-os-solution_ecmg

    ワードプレス

    【Retinaディスプレイ対応1】Macで綺麗に。Windowsでサクサク。ブログ画像をOSごとに適…

    簡単に、美しく。ページ表示速度の観点で考えると、画像においてはでき…

  3. feedly-count-problem_ecmg

    ワードプレス

    feedlyのフォロワー数が表示されないっ!?SNS Count Cacheのキャッシュ進捗「部分的…

    怪奇現象と、ある研究者の記録。私は街はずれの湖のさらに奥にある…

  4. ad-placement-in-mag_ecmg
  5. screenpresso-initial-setting_ec
  6. LightShot-Screenpresso_ecmg

    WEBデザイン

    辿り着いたブログ用キャプチャーツール、LightShotとScreenpresso。機能比較と併用の…

    併用すれば、もっとハカドる。スクリーンショットに特化したキャプチャ…

【Requ.log記事】魅力的なブログを、今すぐ作る。
tcd-mag
【Requ.log記事】魅力を活かす、カスタマイズまとめ。
tcd-mag

特集記事

  1. tcd-mag_ecmg-ps
  2. theme-change_ecrt
  3. display-speed_ec
  4. adjust-the-button_ecmg
  5. valuable-content-from-image_ec
  6. improvement-flow_ecmg

タスク管理で、自己管理。

todoist

人気記事

  1. chrome-font_ecmg-1
  2. todoist-basic_ec-ps
  3. compress-jpeg-png-images-ecmg
  4. child-theme-mechanism_ecmg-ps
  5. media-setting_ec
  6. child-theme_ecmg

魅力的なブログを、今すぐ作る。

tcd-mag

ピックアップ記事

  1. todoist-productivity_ecmg
  2. quicktag_ecmg
  3. tcd-css-customize_ecmg
  4. sns-count-cache_ecmg2
  5. blog-theme-mag_ecmg-ps
  6. like-button-card_ecmg-ps

ブログのRetina対応、始めませんか?

retina-os-solution

掘り出し記事

  1. screenpresso-capture-ecmg
  2. backup-all-in-auto_ec
  3. pushbullet_ec
  4. browzer-extension_ec
  5. retina-weight-saving_ecmg
  6. favicon-generator_ecmg

ゆっくり、フシギなGIFアニメ。

gif-animation

最近の記事

  1. firefox-full-screen-capture-ecmg
  2. chrome-full-screen-capture-ecmg
  3. enlarge-image-ecmg
  4. spark-tutorial-ecmg

とっておきのWordPressテーマ。

tcd-theme-selection

ピックアップ記事

  1. chrome-font_ecmg-1
  2. dash_ecmg
  3. blog-theme-mag_ecmg-ps
  4. simple-image-sizes_ec-ps
  5. enlarge-image-ecmg
  6. compress-jpeg-png-images-ecmg

CATEGORIES

Requ.log | Recommend

WordPressテーマ「MAG(TCD036)」
WordPressテーマ「Bloom(TCD053)」

特集記事

  1. tcd-mag_ecmg-ps
  2. extension-tools-for-bloggers_ec
  3. todoist-extension_ecmg
  4. valuable-content-from-image_ec
  5. tcd-theme-selection_ecmg-ps
  6. tcd-theme-user-review_ecmg

人気記事

  1. chrome-font_ecmg-1
  2. media-setting_ec
  3. child-theme-mechanism_ecmg-ps
  4. compress-jpeg-png-images-ecmg
  5. chrome-full-screen-capture-ecmg
  6. child-theme_ecmg
  7. screenpresso-initial-setting_ec

最近の記事

  1. firefox-full-screen-capture-ecmg
  2. chrome-full-screen-capture-ecmg
  3. enlarge-image-ecmg
  4. spark-tutorial-ecmg
  1. extension-tools-for-bloggers_ec

    ブログ

    【作業順まとめ】ブログを彩る!記事作りが捗る!クオリティー底上げに役立つ10個の…
  2. tcd-theme-selection_ecmg-ps

    ワードプレス

    【目的別】とっておきのWordPressテーマ比較。TCDテーマのおすすめメンバ…
  3. valuable-content-from-image_ec

    ワードプレス

    「わかりやすいブログ」に必須の「伝わりやすい画像」の作り方
  4. todoist-extension_ecmg

    マネジメント

    いつでもどこでも即タスク化。Todoistの便利すぎる拡張機能4選
  5. tcd-theme-user-review_ecmg

    ワードプレス

    TCDテーマの強みとは?他テーマとの違いと基本機能をユーザー目線でレビュー
PAGE TOP