サイトアイコンを設定!ワードプレスでファビコン(favicon)を設定しよう!

ファビコン(Favicon)

ワードプレスでファビコン(favicon)を設定しよう!

このページでは、ワードプレスのプラグイン「Real Favicon Generator」を使っての
ファビコンの設定の流れを図解しておきます。

プラグインを使用しないで、ファビコンを設定するならこちらを参考に。
>>超簡単!FTPでワードプレスのサイトアイコン(ファビコン)を設定しよう!

※ファビコンの設定には、
 あらかじめ作成した画像ファイルが必要です。
 サイズ260x260px推奨「.jpg(ジェイペグ)」
 もしくは「.png形式」でOK

 画像の作り方はこちらを参考に。
 >>ただで画像加工 パソコン付属のペイントの使い方

プラグインを使わないで、
サイトアイコン(ファビコン)を設定する場合はこちらを参考に!
>>ファビコン(favicon)用のアイコン画像を用意しましょう。
けっこう簡単です!

⇒Real Favicon Generatorのダウンロードはこちらをクリック


このページにジャンプしたら、画像のダウンロードのボタンをクリック。
クリックするとzipファイルがダウンロードされます。
zipファイルのままアップロードするので、解凍はしないでください。

ワードプレスでファビコン(favicon)を設定_1


ファビコンを設定したいサイトの、ワードプレスのダッシュボードを開き、
①「プラグイン」から「新規追加」をクリック。
②上のほうに「プラグインのアップロード」をクリック。

ワードプレスでファビコン(favicon)を設定_2


下記の画面が出たら、
①「ファイルを選択」ボタンをクリックして、
先ほどダウンロードしたReal Favicon Generatorのzipファイルを選択。
もしくは、「ファイルを選択」ボタンに直接ドロップ&ドラッグ。

②選択が完了したら「いますぐインストール」ボタンをクリック。

ワードプレスでファビコン(favicon)を設定_3


ワードプレスでファビコン(favicon)を設定_4
インストールが完了したら、
「プラグインを有効化」をクリック。


①有効化すると、「設定」に「Favicon」が出るのでクリック。
②Appearance>Faviconをクリック。

ワードプレスでファビコン(favicon)を設定_5


「select from the Media library」をクリック

ワードプレスでファビコン(favicon)を設定_6


画像のライブラリが開くので
①用意したファビコン画像を追加します。(すでに追加済なら②へ)
②ファビコン画像を選択して「選択」ボタンをクリック。

ワードプレスでファビコン(favicon)を設定_7


ファビコン画像の選択が完了したら「Generate favicon」ボタンをクリック

ワードプレスでファビコン(favicon)を設定_8


ここからは、外部の作業です。この画面で少し待って勝手に次へ。

ワードプレスでファビコン(favicon)を設定_9


iOS用ファビコン – ウェブクリップの設定
ようは、アップル社の出したタッチパネルの携帯機器(アイフォンとか)での表示アイコン。
角が丸くカットされるとか書いてある
そのままで問題ないと思いますが、プレビューを見て気に入らなければ、
大きさと背景色を設定できます。

ワードプレスでファビコン(favicon)を設定_10


Android(アンドロイド)のChromeのためのファビコン設定
アンドロイドの携帯機器での表示アイコン。
角が丸くカットされるとか書いてある。
表示されたときの名前を入力しましょう。

そのままで問題ないと思いますが、プレビューを見て気に入らなければ、
大きさと背景色を設定できます。
「options」はややこしいので必要ないでしょう。

ワードプレスでファビコン(favicon)を設定_11


その他のプラットフォーム
「safari pinned tab」はMac OS X V10.3以降のブラウザ。
①はいじらずそのまま使う
②はモノクロームアイコンアイコンのトーンの調整
③表示なし。表示アイコンはドメイン名の最初の文字を使用。
④モノクロームアイコンアイコンのトーンの調整時に色を番号選択できる。(カラーピッカーが出ます)

ワードプレスでファビコン(favicon)を設定_12

「Windows 8 and 10」はウィンドウズ8と10での設定。
「透明な部分があると見栄えがいい。プレビューを見て良く見えることを確認してください。
タイルの背景を選択することができます。」と書いてある。
①サンプルからの選択が好ましいと書いてある。
②色番号かサンプル色を選択。(カラーピッカーが出ます)

ワードプレスでファビコン(favicon)を設定_12


ファビコンジェネレータオプション
version /refresh
①「ブラウザが初めてファビコンをロードすると、それをキャッシュして、
もう一度それをロードしないように傾向があります。
あなたのウェブサイトは新しいものではありませんし、
あなたのファビコンを更新する場合、それが問題になることがあります
:あなたの忠実な訪問者が変更を意識することはありません。
この問題を回避するには、クエリパラメータとしてファビコンのURLにバージョンを追加することです」
と書いてあります。
②誰もまだそれを訪問していない、新しいウェブサイトです。
だから、何も”古い”ファビコンなしキャッシングの問題はありません。
③ウェブサイトは、生産中であると多くの人がすでにそれを訪問しました。
私は私の新しいファビコンはなく、古いものを見るために訪問者を返すたいです。
①で問題ないと思います。問題があったらまた考えましょう。

ワードプレスでファビコン(favicon)を設定_13

「compression」と「scaling algorithm」では、良さげな表示を選択。

ワードプレスでファビコン(favicon)を設定_14

ワードプレスでファビコン(favicon)を設定_15

App name=アプリケーションネーム
①ホーム画面へのリンクを追加する場合、ユーザーはキャプションを選択することができます。
デフォルトでは、これは通常問題はありませブックマークページのタイトルです。
しかし、iOSとWindowsの8は、このデフォルト値を上書きしてみましょう。
②アプリケーションネームなし。ブラウザでページタイトルを提供。
③特定のアプリケーション名、ページのタイトルを上書きします。名前を入力。

ワードプレスでファビコン(favicon)を設定_16


一通り終わったら、
「Generate your Favicons and HTML code」ボタンをクリック

ワードプレスでファビコン(favicon)を設定_17


処理をしてくれるので少し待ちます。
しばらくするとワードプレスに戻ります。

ワードプレスでファビコン(favicon)を設定_18


処理が終わるとこんな感じの画面になり終了。

ワードプレスでファビコン(favicon)を設定_19

お疲れ様でした。

ファビコンの反映に時間の掛かる場合があるので、あわてず待ちましょう。

こんにちは、このサイトの管理人「けだま」です。

もしあなたが、

  • 今のままでは、経済的に不安がある
  • ちょっとでも、お小遣いを増やしたい
  • 起業して自由になりたいけど、何をしていいのか分からない

と言った類の悩みをお持ちでしたら、 このサイトが少しお力になれるかもしれません。

このサイトでは、仕事を続けながら、 自宅でパソコンを使い、副業でお金を稼ぐ方法を紹介しています。

あなたはこのメルマガを愛読して初期費用0円で作業するだけで、 知らず知らずのうちに稼ぐための思考やコツが身に付きます。

断っておきますが、ある程度作業しなくては絶対にお金にはなりません。

解除はいつでもできますので、ご興味がありましたら登録してみてください。

今なら
パソコンで文字が打てればOK!
「誰でも確実にただで十万円以上稼げる方法」
プレゼント中!

パソコン一つで178万円稼いだ方法

※フリーメールアドレスでの登録をお薦めいたします。

※メール内容の性質上、迷惑メールに振り分けられやすくなっています。
不達のようでしたら、迷惑メールフォルダもご確認ください。

おもな手法としては、「アフィリエイト」を駆使します。

アフィリエイトは、極めてリスク無く初められるビジネスです。

私は、アフィリエイトの様々な手法を試し、収入を得ていますが、

そのやり方を、このサイトで教えています。

主にアダルトアフィリエイトのやり方が主ですが、 追々一般アフィリエイトのやり方についても、発信していきます。

コメントを残す

メールアドレスが公開されることはありません。

AlphaOmega Captcha Classica  –  Enter Security Code