favicon-generator_ec

ワードプレス

ファビコンでサイトをリッチに。WordPressプラグインRealFaviconGeneratorで簡単設定

favicon_Tab_0

 

そう、通称「ファビコン」。彼がいると、一気にサイトイメージや信頼感が高まります。
彼は、ブックマークに登録された時にも、その姿を現します。

 

bookmark_1

 

彼がいないと、、、

 

bookmark_2

 

、、、ちょっと残念です。

 

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

『でも、どうやって?』

「ファビコンの存在は知ってるけど、どうやって設定するの?」

「スマートフォン用のファビコン設定は、また別のやり方で設定が必要なんでしょ?」

「出来るだけHTMLソースはいじりたくないんだけど…」

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

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

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

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

 “Windows 8でブックマークされた時のタイルアイコン表示”

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

 

今回はWordPressプラグイン【RealFaviconGenerator】を使って、これらデバイスごとのファビコン表示を簡単に設定する方法をお伝えします

このプラグインでは実際にどのように表示されるのかプレビューを確認しながら、一度にまとめて設定できるので、ぜひ取り入れてください。

 

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

バックアップの必要性と方法はこちら 

backup-all-in-auto_linkcard

 

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

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

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

 

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

 

ピンと来ない方のために例を挙げましょう。
下記2つの画像は一見、両方とも背景が白い画像に見えますね。

 

Favicon_Flag_tp

拡張子「png」

Favicon_Flag_BGwhite

拡張子「jpg」

 

これらを右クリック→「名前を付けて画像を保存」をしてみると、違いが分かります。
(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)下のラジオボタンを選択

2)背景色を設定

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

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

 

 

Config_6

クリックで拡大

 

(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で、ホーム画面にブックマークが追加された時のタイトル表示」と、

Windows 8で、タイルにブックマークが作成された時のタイトル表示」になります。

(Androidは先ほど個別に設定したものが使われるようです)

 

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

 

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

 

Config_11

 

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

 

 クリックで拡大

Config_12

 

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

 

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

 

favicon_Tab1

 

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

以上です。お疲れ様でした!

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

Requ.log | レク.ログ

スポンサーリンク
スポンサーリンク
WordPressテーマ「MAG(TCD036)」

ピックアップ記事

  1. 【応用編】スケジュール・タスク管理の大黒柱。万能ツールTodoistの使い方を徹…
  2. もっとストレスフリーに・・Todoistの連携ワザで高速タスク登録!
  3. 魔法のような仕事効率化。ブログにも使えるWindows定型文ツール「Phrase…
  4. 「私の名前はページプラグイン。」Facebookページのいいね!ボタンをWord…
  5. ブロガー以外も知っておきたい。ブログ記事の書き方と、頭を整理する構成方法

関連記事

  1. sns-count-cache_ecmg

    ワードプレス

    便利すぎて、もうヤミツキ。WordPressプラグインSNS Count Cacheの設定方法と有効…

    必要な設定だけにフォーカス!「ページを表示するたびに、今のシェア数…

  2. backwpup-japanese_ec

    ワードプレス

    アップデートで英語化された!?BackWPupをサクッと日本語化する方法

    アップデートしたら、設定画面が英語化された!? 2…

  3. theme-manual-update_ec

    ワードプレス

    アップデート通知が来ない!?WordPressテーマを手動でアップデートする方法

    アップデート通知、なんでこないの?ある有名なストーリーがあります。…

  4. insert-card-link_ecmg

    ワードプレス

    クリックひとつで完成。Embedlyで見栄えの良いカード型の記事リンクを貼る方法

    リンク挿入、どうしてますか?記事を書いていると、「以前に自分が書い…

  5. todoist-constitution_ec

    マネジメント

    ブロガー以外も知っておきたい。ブログ記事の書き方と、頭を整理する構成方法

    ストレスフリーで効率的な下準備。いざ記事を書こうとしても、すぐに手…

  6. retina-logo_ec

    ワードプレス

    【Retinaディスプレイ対応4】サイトの顔も綺麗に。TCDテーマなら3ステップで完了する、ロゴ画像…

    サイトロゴは、サイトの顔。このサイトでは最上部にロゴを配置していま…

スポンサーリンク
魅力的なブログを、今すぐ作る。
tcd-mag

Requ.Sound Lab. | レク.サウンドラボ

レク.サウンドラボ

音に、景色と”振る舞い”を。

特集記事

  1. adjust-the-button_ecmg
  2. todoist-extension_ecmg
  3. improvement-flow_ecmg
  4. extension-tools-for-bloggers_ec
  5. tcd-theme-user-review_ecmg
  6. business-books_ecmg
  7. retina_ecmg
  8. todoist-tips_ecmg
  9. tcd-mag_ecmg
  10. valuable-content-from-image_ec

ピックアップ記事

  1. tcd-theme-widget_ecmg
  2. original-share-button_ecmg
  3. tcd-css-customize_ecmg
  4. todoist-routine_ecrt
  5. reset-button_ecrt
  6. media-setting_ec
  7. child-theme_ecmg
  8. tcd-theme-options_ecmg
  9. jpg-gif-png_ecmg
  10. blog-contents_ecrt

強みを見つけて、活かしていくために。

business-books

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

todoist

おすすめ記事

  1. 不要なメール通知にうんざり!購読・迷惑メールの解除をまとめて…
  2. アップデートで英語化された!?BackWPupをサクッと日本…
  3. 瞬間転送。写真もURLもポンっ!スマホとパソコン間のデータ移…
  4. 【Retinaディスプレイ対応2】スリムで美しいブログを実現…
  5. 自分のアクセス痕は残さない。アナリティクスのフィルタで自宅の…

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

tcd-mag

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

retina-os-solution

最近の記事

  1. 【小技特集】もっと使いこなす!おすすめタスク管理ツールTod…
  2. タスクに、日時や曜日が勝手に反映される・・!?Todoist…
  3. 魅力的なブログを今すぐ作れる。ワードプレステーマTCD【MA…
  4. MAGのデザインをフル活用。PCとスマホの広告設置枠を自由に…
  5. 移動したいデスカ?TCDテーマMAGでダブルレクタングル広告…

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

gif-animation

とっておきのWordPressテーマ。

tcd-theme-selection

特集記事

  1. 魅力的なブログを今すぐ作れる。ワードプレステーマTCD【MA…
  2. 【目的別】とっておきのWordPressテーマ比較。TCDテ…
  3. 【作業順まとめ】ブログを彩る!記事作りが捗る!クオリティー底…
  4. 目指せ軽量化!今から始める、WordPressサイトの表示ス…
  5. 【厳選6冊】起業したくなったら読んでおきたいビジネス書。自分…

Requ.log | おすすめビジネス書

コンテンツの秘密-ぼくがジブリで考えたこと 「言葉にできる」は武器になる。
プロフェッショナルは「ストーリー」で伝える 日本人の知らなかったフリーエージェント起業術

Requ.log | おすすめ物語

モモ マリコ/マリキータ
なんくるない たったひとつの冴えたやりかた

Requ.log | WordPress Theme

WordPressテーマ「MAG(TCD036)」
  1. adjust-the-button_ecmg

    ワードプレス

    【実例集】細部の余白まで美しく。オリジナルシェアボタンのデザイン変更と調整方法
  2. valuable-content-from-image_ec

    ワードプレス

    『伝わりやすいブログ』を作るには?画像で届ける価値あるコンテンツ
  3. extension-tools-for-bloggers_ec

    ブログ

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

    ワードプレス

    【徹底検証】乗り換えたいでしょ?WordPressTCDテーマの変更方法と注意点…
  5. retina_ecmg

    ワードプレス

    【保存版】知ったら戻れない、美しさの極みへ。WordPress画像のRetina…
PAGE TOP