うみっくす

うみっくす

子供のこと。ブログのこと。趣味のことを気が向いたら綴っています。

簡単!初心者でもできるfavicon(ファビコン)の作り方!!

f:id:u-mix:20170314232130j:plain

こんにちは!!umiだよ!!
みなさん!!favicon(ファビコン)つけていますかー!!
私は、favicon(ファビコン)が大好き!!
たくさん並んでいるのを見るだけでウキウキするし、favicon(ファビコン)を見るとそのサイトイメージがすぐに頭に浮かびます!!
だから、はてなブログを開設したときも、favicon(ファビコン)だけは率先して設定しました!!
そしたら!!はてなブログfavicon(ファビコン)つけるのが、簡単すぎて、びっくりしたわ!!
FC2ブログでは、favicon(ファビコン)をつけるの、むっちゃ、がんばったもん・・・
では、今日は、はてなブログFC2ブログ
favicon(ファビコン)をつける労力にどれほどの差があるか、手順を見て比べてみましょう!!

favicon(ファビコン)って何?

まずは、favicon(ファビコン)をご存じない方のために、簡単に説明をしますと、ブラウザタグのこの部分のマークがfavicon(ファビコン)です!!

f:id:u-mix:20170314222600j:plain

まさにサイトのシンボルマークですよね!!
このfavicon(ファビコン)はブラウザタグだけでなく、お気に入りリストやショートカットアイコンとしても役立つマークなんです!

はてなブログfavicon(ファビコン)を設置してみよう!!

はてなブログでは、むっちゃ簡単にfavicon(ファビコン)が作れます。

f:id:u-mix:20170314223729j:plain

設定→基本設定→ブログアイコンの「参照ボタン」クリック→最後に下にある更新ボタン!!

以上、4ステップ!!

なんじゃこりゃー!!簡単すぎやろーーー!!!

対応しているファイル形式は、JPEGPNG、GIFのみ。icoも試してみたけど、反応さえなかった・・・
サイズは、はてなさんの方で192px×192px以上の正方形画像を推奨していますが、そんなことは知らずに64×64くらいで作った記憶があります・・・

プロフィールの設定とaboutページ - はてなブログ ヘルプ

 

FC2でfavicon(ファビコン)を設置してみよう

ico形式の画像を作る

FC2ブログfavicon(ファビコン)をつけるとなったとき、むちゃくちゃ調べたんだけど、どのサイトを覗いても、画像はico形式のを使ってくださいってあった・・・

理由は、IE10以下ではicoでないと表示がされないから・・・
ユーザビリティのことを考えれば、ここはico形式にこだわったほうがいいところなので、ico画像を用意します。あ!!もちろん正方形でお願いします。

しかし、私のようにico形式に変換できるお絵かきソフトを持ってない人もいると思う。
そういう方は、以下のサイトで使いたい画像をico形式に変換してね!!

 

 

app.tree-web.net


使い方は簡単!!

f:id:u-mix:20170314224654j:plain

 

参照ボタンで画像を選んで変換ボタンをクリック!!
そしたらすぐにサイズ別の表示が出る!!
必要なサイズを選んで、ダウンロードするだけ!!

ダウンロードボタンを押したら、プレビュー画像が出るから、それを右クリックして任意のファイルに移してくださいね!!

そして、ここで、素人が悩むのは、どのサイズを選べばいいの?ってところだと思うんですよ・・・

実は、端末によって必要なサイズは変わってくる。

例えば、IEだったら16×16だし、Windowsのデスクトップだったら48×48。Androidホーム画面だったら、152×152って感じ・・・

この世に溢れている全ての端末に対応できるサイズとなるとなかなか難しい・・・
大は小を兼ねるんじゃない?って考え方もあるけど、デザインによっては小さくすることでせっかく作ったデザインが潰れることだってある。
自分にとって一番ベストなサイズを選んでくださいね!!

FC2ブログで作った画像をファイルアップする。

FC2は以下の3ステップで画像をファイルアップできる。

f:id:u-mix:20170314225412j:plain

この時、画像がきちんと反映された状態になっていないけど、大丈夫です!!

そして、画像URLをメモ帳にコピペします!!

f:id:u-mix:20170314225511j:plain

 

 

ファビコンを表示させる

ようやく!!テンプレートのHTMLまで来ました!!ゴールは、すぐそこです!!

まずは、なにが起こるかわかりませんので、必ず、使っているテンプレートの複製を作りましょう!!
複製したテンプレートで作業をしていきます。

まずは、</head>を探します!!

え?</head>が見つからない?そういう方は、、「Ctrl」+「F」で検索してね!!

その</head>の上に以下のタグを貼り付けてください。

<link rel="shortcut icon" href="(メモ帳に貼ったファビコン画像URL">

 

そして、テンプレートの「更新」ボタンをクリック!!

次に、今タグを組み込んだテンプレートの適用ボタンを押してから、ブログの確認ボタンをクリックしてみてください

どうでしょう?favicon(ファビコン)は表示されましたか?

私は、すぐに反映されましたが、記事を書くにあたり調べたら、キャッシュが古いファビコンを記憶している場合、すぐには反映されないようです。(※はてなブログも同様)
そういう場合は、キャッシュの削除をしてから、ブラウザの再起動を試してください。

最後にまとめ

初めて、FC2ブログの方にfavicon(ファビコン)をつけようとした時、そもそもfavicon(ファビコン)という名前さえ知らず、むちゃくちゃ検索したのを覚えています・・・

でも、苦労した分、ちゃんと表示された時は、むちゃくちゃうれしかった!!

その点、はてなブログだと簡単に設置できるから、あの感動は逆に味わえなかったかも・・・

でもでも、簡単に設置できるならそっちの方がいい・・・かな・・・?(いや・・・いいに決まってる!!)

今日もここまで読んでくれてありがとうございました!!感謝!感謝です!!

Copyright © 2016 うみっくす All rights reserved.