2015/07/31

WordPress、ファビコンの可視化設定、カスタマイズ方法

初心者が一番初めに出来るカスタマイズの1つがファビコンの設定です。ファビコンの設定をしていると、お気に入り登録した時や、ブラウザの画面上のタブに設定したアイコンが表示されるんです。

まずは、ファビコンってどんなものなのか?って所からみていきましょう♪

スポンサーリンク

ファビコンって何!?

ブラウザのタブの先頭に出てくるマーク、ツイッターなら鳥が、フェースブックならFマーク、これがファビコンです。ブログそれぞれのシンボルマークを付けることによって誰のブログか、覚えてもらいやすいです。

フェースブック、ツイッターのファビコン

私のファビコンは下記▼画像の、星マーク。SNSやツイッターと同じものにしてると、見たことある!と、思うかもしれません。ブログ始めたばかりだと誰も自分の事を知らないから、少しでも知ってほしいモノです。

ファビコンの説明

左側がInternet Explorerで、右側がChrome。どちらもファビコンと、ブログのタイトルが付いてます。

この設定は、一気に最後までできるので、このブログが迷子にならないように、ブクマでもしてください。そこには「また違うサイズのファビコン画像を見ることができますよ。それでは、一緒に作成していきましょう♪

favicon.icoを作る為の準備は、16、32、48pxの拡張子がpngの画像を準備する。

ファビコン画像は、3種類のサイズを準備します。

ファビコン用16参考画像16×16px タブで使用

ファビコン用32参考画像32×32px ブラウザのお気に入り:ブクマサイズなど。

ファビコン用48参考画像48×48px デスクトップなどで使います。※環境によります。

※このファビコン用画像は、「ぴよたそ」で利用規約を読んでダウンロードしました。可愛いですよねぇ♪

ファビコン用の画像を縮小ソフトの紹介

16pxなんか特に・・ドットが大きくなってしまって、ボヤけてしまったので、画像をキレイに作れるソフトを紹介します。作成出来たら、戻って続き一緒にしましょねぇ♪

LINKJPEG・PNG画像など複数画像を一括でリサイズ縮小♪Ralphaの設定方法

LINK目次1.3のスクリーンプレッソがオススメです

png画像をfavicon.icoに!半可視マルチアイコン

下記のファビコンを作成できるリンクで、3種類の画像をファビコンにすることができます。また背景が透明に可視化された画像にも対応してるので、その設定方法を書きますね。

LINK無料で半透過マルチアイコンやファビコン(favicon.ico)作成。ギザギザの無い美しい影を持ったアイコン作成がフリーでできます。

  1. 【画像1、2、3】に、16×16px、32×32px、48×48pxのpng画像を【ファイルを選択】から選ぶ
  2. 【アイコン作成】
  3. 【背景色を決定】

▼可視化するなら、【背景色】は、左端を選びます。下記画像参考にしてください。
背景が決まれば【アイコンダウンロード】をクリックし、PCに保存します。
可視化する時ボタンは一番左側。背景の画像がグレーと白っぽい格子柄を選ぶ

【favicon.ico】を、WordPressで設定!

作成した画像favicon.icoをメディアにアップしてURLをコピーし、<head>内に設置します。

  1. WordPressの【ダッシュボード】画面
  2. 【メディア】→【新規追加】→【favicon.ico】を選択、または直接ドロップ
  3. 【favicon.ico】クリックして、【添付ファイルの詳細】画面へ

ファビコンのURLの場所の説明画像

  1. 【favicon.ico】のURLをコピーする
    (青く反転しない方はURL四角内をクリック後Ctrlキー+Aキーで反転させてコピー。)
  2. 終われば右上 × 押しましょう♪

ファビコンを<head>内に設置する簡単な方法

WordPress【ダッシュボード】内の【外観】から【テーマの編集】→画面右【ヘッダー】より

コレを▲さがしてください。大体の場所は、stinger5で特に何もさわってなければ▼画像のスクロールバー辺りにあります。※参考まで
ファビコンの設置場所、URL入れる場所の説明画像

stinger5の場合

上のコード(▲画像参考にして下さい)を下記▼に変え、さっきのコピペしたファビコンのURLを【ここにfavicon.icoのURLをコピペ】に入れてください。

最後に【ファイル更新】クリックする。

ちょっと待って更新しても出来ない時はキャッシュの削除をすれば、反映されます。

参考カスタマイズ時のキャッシュを削除!ワンクリで手間省けるChrome拡張機能「Incognito This!」

さいごに

ファビコンって、個性がでますよねぇ♪あなたは、どんなファビコンを作ったんでしょうか!?

ファビコン作成、設置おめでとうございまぁす(๑✪∀✪ノノ゙✧

書いた人:かうたっく

何も知らない初心者ですが、WordPressでブログを始めました。 ブログの技術系でつまずいたエラーを経験したことからエラー関連を、初心者が初心者に向けて分かりやすい言葉で書いてます★子どもの喘息様気管支炎や、幼い子どもとの生活ページなどよく読まれる雑多ブログを運営中^^♪ご意見、感想、質問はお問い合せよりお待ちしています。

Twitterフォロー