初心者が一番初めに出来るカスタマイズの１つがファビコンの設定です。ファビコンの設定をしていると、お気に入り登録した時や、ブラウザの画面上のタブに設定したアイコンが表示されるんです。
まずは、ファビコンってどんなものなのか？って所からみていきましょう♪
ファビコンって何！？
ブラウザのタブの先頭に出てくるマーク、ツイッターならとりが、フェースブックならFマーク、これがファビコンです。ブログそれぞれのシンボルマークを付けることによって誰のブログか、覚えてもらいやすいです。
私のファビコンは下記▼画像の、星マーク。SNSやツイッターと同じものにしてると、見たことある！と、思うかもしれません。ブログ始めたばかりだと誰も自分の事を知らないから、少しでも知ってほしいモノです。
左側がInternet Explorerで、右側がChrome。どちらもファビコンと、ブログのタイトルが付いてます。
この設定は、一気に最後までできるので、このブログが迷子にならないように、ブクマでもしてください。そこには「また違うサイズのファビコン画像を見ることができますよ。それでは、一緒に作成していきましょう♪
favicon.icoを作るため拡張子.png画像を準備
ファビコン画像は、3種類のサイズを準備します。
16×16px タブで使用
32×32px ブラウザのお気に入り：ブクマサイズなど。
48×48px デスクトップなどで使います。※環境によります。
※このファビコン用画像は、「ぴよたそ」で利用規約を読んでダウンロードしました。可愛いですよねぇ♪
ファビコン用の画像を縮小、ソフトの紹介
16pxなんか特に・・ドットが大きくなってしまって、ボヤけてしまったので。
画像をキレイに作れるソフトは、Windowsならスクリーンプレッソかな。
png画像をfavicon.icoに！半可視マルチアイコン
下記のファビコンを作成できるリンクで、3種類の画像をファビコンにすることができます。また背景が透明に可視化された画像にも対応してるので、その設定方法を書きますね。
LINK無料で半透過マルチアイコンやファビコン(favicon.ico)作成。ギザギザの無い美しい影を持ったアイコン作成がフリーでできます。
16×16、32×32、48×48、96×96、128×128のサイズで作成できます。
- 【画像1、2、3】に、32×32、48×48、96×96のpng画像を【ファイルを選択】から選ぶ
- 【アイコン作成】
- 【背景色を決定】
▼可視化するなら、【背景色】は、左端を選びます。下記画像参考にしてください。
背景が決まれば【アイコンダウンロード】をクリックし、PCに保存します。
【favicon.ico】を、WordPressで設定！
作成した画像favicon.icoをメディアにアップしてURLをコピーし、<head>内に設置します。
- WordPressの【ダッシュボード】画面
- 【メディア】→【新規追加】→【favicon.ico】を選択、または直接ドロップ
- 【favicon.ico】クリックして、【添付ファイルの詳細】画面へ
- 【favicon.ico】のURLをコピーする
（青く反転しない方はURL四角内をクリック後Ctrlｷｰ+Aｷｰで反転させてコピー。） - 終われば右上 × 押しましょう♪
ファビコンを<head>内に設置する簡単な方法
WordPress【ダッシュボード】内の【外観】から【テーマの編集】→画面右【ヘッダー】より
<link rel="shortcut icon" href="
コレを▲さがしてください。大体の場所は、stinger5で特に何もさわってなければ▼画像のスクロールバー辺りにあります。※参考まで
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