WordPressテーマ変更!SimplicityからCocoonへ
スポンサーリンク

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

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

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

スポンサーリンク

ファビコンって何!?

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

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

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

ファビコンの説明

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

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

favicon.icoを作るため拡張子.png画像を準備

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

ここでは16pxを使ってますが、2019年5月末現在96×96のファビコン1つを作りました。

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

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

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

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

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

16pxなんか特に・・ドットが大きくなってしまって、ボヤけてしまったので。

画像をキレイに作れるソフトは、Windowsならスクリーンプレッソかな。

LINKスクリーンプレッソ!画像の加工にオススメな使い方

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

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

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

16×16、32×32、48×48、96×96、128×128のサイズで作成できます。

  1. 【画像1、2、3】に、32×32、48×48、96×96の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【ダッシュボード】内の【外観】から【テーマの編集】→画面右【ヘッダー】より

<link rel="shortcut icon" href="

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

stinger5の場合

<link rel="shortcut icon" href="<?php echo get_template_directory_uri(); ?>/images/logo.ico" />

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

<link rel="shortcut icon" href="【ここにfavicon.icoのURLをコピペ】" />

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

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

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

さいごに

ファビコンって、個性がでますよね❦

あなたは、どんなファビコンを作ったんでしょうか!?

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

この記事が気に入ったら
いいね!しよう
最新情報をお届けします。
カスタマイズ
フォローする
スポンサーリンク
スポンサーリンク
ビバ★りずむ

Comments

個人情報の取り扱いについてはリンク先をご確認ください。

ご了承・ご理解いただいた上でコメントお待ちしております?

トップへ戻る
タイトルとURLをコピーしました