初心者でも無料で簡単に自分でホームページが作れる「ホームページ作成ツール」が増えてきています。 有料プランでも毎月数百円~数千円程度とお手頃な価格なので、“とりあえずHPが欲しい!”という方にはおすすめです。 その中でも […]

2019.9.12
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サイトを制作する上で躓きがちなファビコンの設置
このプラグインを利用すれば簡単に設置することが出来ます。
デバイスごとに画像サイズを分けて作る必要もありませんので、手間もかかりません。
ファビコンの設置に悩まれていた方に、ぜひ有効活用して頂きたいです!
最新記事
-
SEO
SEO対策に強いWeb制作とは?SEOの基本、制作会社の選び方も解説
2022.5.18
インターネットが普及した現代において、ホームページは重要な集客手段となっています。 そして、ホームページで集客するためにはSEO対策が重要です。 本記事では、SEO対策に強いWeb制作の方法や、制作会社の選び方などについ […]
-
Illustrator
デザインセンスの磨き方 その2
2022.5.9
過去の記事で、センスとは何か / どうしたら身につくのかを私なりに分析させていただきました。 今回は、自分のデザインスキルを向上させるのに有効な方法をご紹介します。 結論からいうとセンスを磨くには「言語化」 […]
-
Illustrator
デザインセンスの磨き方 その1
2022.5.9
センスがある人ってかっこよくて羨ましい! デザインの勉強を始めたけど、どうすればセンスを磨いていけるかわからない! 私はデザインのキャリアをスタートして2年以上経ちますが、正直いまも同じような気持ちです(笑) 自分への自 […]
-
Web制作
ホームページ制作費用を安く抑えるための4つのポイント
2022.4.28
「ホームページを制作したいけど予算が少ない・・・」「見積もりが想像以上に高かった・・・」 ホームページをつくる上で多くの人が気になることといえば、やはり制作費。 限られた予算の中で、なるべく安く費用を抑えたいところですが […]
おすすめ記事はこちら
-
- スタートアップ
- ツール
- ホームページ制作
- 無料
無料!簡単!ホームページ作成ツール5選
2021.9.13
-
- スタートアップ
- ホームページ制作会社
- 安い
安いには理由がある?ホームページ制作会社を上手く選ぶためのポイント
2021.8.10
「ホームページ制作 格安」などで検索をすると日本全国のいろいろな制作会社が出て来ます。 5ページ50,000円〜、初期費用0円で月々3,000円〜など、お得そうなキャッチコピーが並んでいるのをよく目にするかと思います。 […]
-
- reCAPTCHA
- プラグイン
- ワードプレス
- 初心者
【簡単スパム対策】Contact Form 7でreCAPTCHAを導入する方法
2021.8.2
WEBサイトのお問い合わせフォームから毎日大量に届くスパムメール… 対策のために検索すると必ずといっていいほど目にする”reCAPTCHA” 名前から察するに導入するのが難しそう…と思われる方もいらっしゃるかもしれません […]
-
- Zoom
- ツール
- 無料
アカウント登録不要!Zoomの使用方法
2020.10.5
【目次】1.Zoomとは2.アカウント作成なしのZoomミーティングの基本的な流れ3.【PCの場合】Zoomアプリのダウンロード方法4.【スマートフォンの場合】Zoomアプリのダウンロード方法 目次1.Zoom とは2. […]
-
- Zoom
- ツール
- 無料
簡単!Zoomアカウント登録&使用方法
2020.10.5
【目次】1.Zoomとは?2.Zoom使用に必要な環境3.PCで登録、使用する場合4.スマートフォンで登録、使用する場合 目次1.Zoom とは【Zoom使用に必要な環境】2.Zoomミーティングの基本的な流れ3.【PC […]
カテゴリー
最新記事
-
SEO
SEO対策に強いWeb制作とは?SEOの基本、制作会社の選び方も解説
2022.5.18
インターネットが普及した現代において、ホームページは重要な集客手段となっています。 そして、ホームページで集客するためにはSEO対策が重要です。 本記事では、SEO対策に強いWeb制作の方法や、制作会社の選び方などについ […]
-
Illustrator
デザインセンスの磨き方 その2
2022.5.9
過去の記事で、センスとは何か / どうしたら身につくのかを私なりに分析させていただきました。 今回は、自分のデザインスキルを向上させるのに有効な方法をご紹介します。 結論からいうとセンスを磨くには「言語化」 […]
-
Illustrator
デザインセンスの磨き方 その1
2022.5.9
センスがある人ってかっこよくて羨ましい! デザインの勉強を始めたけど、どうすればセンスを磨いていけるかわからない! 私はデザインのキャリアをスタートして2年以上経ちますが、正直いまも同じような気持ちです(笑) 自分への自 […]
-
Web制作
ホームページ制作費用を安く抑えるための4つのポイント
2022.4.28
「ホームページを制作したいけど予算が少ない・・・」「見積もりが想像以上に高かった・・・」 ホームページをつくる上で多くの人が気になることといえば、やはり制作費。 限られた予算の中で、なるべく安く費用を抑えたいところですが […]
お問い合わせ
・
資料ダウンロードはこちらから

お問い合わせ・資料ダウンロードはこちらから
頂いたお問い合わせに出来るだけ迅速に(24時間以内)に返信します。知識豊富な専門のスタッフが親切・丁寧にお答えしますので、お気軽にお問い合わせください。
LIHが運営する
お役立ちブログ配信中
Staff blog
LIHの最新情報や、耳よりなセミナー情報、webに関するノウハウをブログ形式でお届けします。
ぜひご覧ください。
-
- SEO対策
- WEB制作
- ブログ集客
SEO対策に強いWeb制作とは?SEOの基本、制作会社の選び方も解説
2022.5.18
インターネットが普及した現代において、ホームページは重要な集客手段となっています。 そして、ホームページで集客するためにはSEO対策が重要です。 本記事では、SEO対策に強いWeb制作の方法や、制作会社の選び方などについ […]
-
- Illustrator
- Photoshop
- WEB制作
- センス
デザインセンスの磨き方 その2
2022.5.9
過去の記事で、センスとは何か / どうしたら身につくのかを私なりに分析させていただきました。 今回は、自分のデザインスキルを向上させるのに有効な方法をご紹介します。 結論からいうとセンスを磨くには「言語化」 […]
-
- Illustrator
- Photoshop
- WEB制作
- センス
デザインセンスの磨き方 その1
2022.5.9
センスがある人ってかっこよくて羨ましい! デザインの勉強を始めたけど、どうすればセンスを磨いていけるかわからない! 私はデザインのキャリアをスタートして2年以上経ちますが、正直いまも同じような気持ちです(笑) 自分への自 […]
-
- スタートアップ
- ホームページ制作
- 安い
ホームページ制作費用を安く抑えるための4つのポイント
2022.4.28
「ホームページを制作したいけど予算が少ない・・・」「見積もりが想像以上に高かった・・・」 ホームページをつくる上で多くの人が気になることといえば、やはり制作費。 限られた予算の中で、なるべく安く費用を抑えたいところですが […]
-
- WEB制作
- 初心者
初心者必見!Webサイト制作に必要なスキルとは?
2022.3.25
近年の副業ブームも相まって、Webサイト制作に必要なスキルを独学で身に付けたい!という方を多く見かけるようになりました。 ドットインストールやProgateなど、独学でプログラミングを学習できるコンテンツは数多くあります […]
-
- WEB制作
- 初心者
【はじめてでもよくわかる】ホームページ制作の進め方
2022.2.28
「初めてホームページを作るんだけど、制作会社との打ち合わせって何を聞かれるの?」 「あらかじめスケジュールを立てておきたいんだけど、どのくらい期間が必要なの?」など、制作がどんな風に進んでいくのか心配な方も多いんじゃない […]