タブブラウザーを使っていると、サイトによってタブに色とりどりのマークが表示されます。
このマークの事をファビコン（favicon）と呼びます。
このブログでは、こんなマークを使っています。
タブブラウザでいっぱいタブが並んでいると、どれがどのサイトか判り辛いです。
マークがあれば、どのサイトか直ぐに判るというメリットがあります。
ファビコンのサイズ
ファビコンのサイズは、ブラウザによって表示される解像度が違います。
16px×16pxは、IEのタブで使われる大きさです。
32px×32pxは、ChromeやFirefoxなどのタブで使われる大きさです。
一般的なのは、この２種類の大きさです。
24px×24px、64px×64px、128px×128pxという大きさも使えるブラウザがあります。
全部対応しようとすると、非常に多くのアイコンを作らねばなりません。
今後もブラウザの対応、非対応が変わると思いますので、その度に対応する解像度のアイコンを作るのは面倒です。
画像をそれぞれの大きさで作ったとしても、それだけでは済みません。
それぞれ用にHTMLで表示指定してあげねばなりません。
高解像度用はこれ、Android用はこれ、iOSホームスクリーン用はこれ・・・
こういった設定が非常に多くて管理が煩雑になります。
なので、私は現在１番使用されていると思われる32px×32pxだけ作ってます。
ブラウザごとに対応する画像が無くても、用意されているものが自動的に適用されます。
少しボケるかも知れませんが、無いよりは良いものなので、十分だと思います。
ウェブクリップアイコン
スマホ画面にブックマークを作ると出てくるアイコンを、ウェブクリップアイコンと呼びます。
ファビコンと混同されがちですが、別のものです。
iPhoneシリーズをお使いの方は、馴染みがあると思います。
Androidの場合、色々なブラウザがありますので、ウェブクリップ画像が使われるものと使われない物があります。
私はウェブクリップアイコンは作っておらず、ファビコンだけ設定しています。
やりたい方は、「ウェブクリップアイコン」で検索して、調べてください。
ファビコンの作り方
ファビコンで使用するアイコンは、どんな画像ツールで作っても構いません。
代表的なソフトは、PhotoShopやIllustratorですが、有料なのでプロでない方は持っていないと思います。
Windowsなら【スタート】→【アクセサリ】の中に「ペイント」というツールが初めから入っています。
Macは最初から絵を書くソフトが入っていないので、画像作成ソフトをダウンロードして使って下さい。
「FireAlpaca」 「MediBang Paint」は、無料で高機能なお絵かきソフトです。
ブログに画像は載せない、画像は絶対作らない、加工もしないという方でなければ、お絵かきツールを１つくらいパソコンにインストールしておいても良いと思います。
ツールを持っていない！ツールを入れるのも嫌！という、わがままさんは、以下の便利サイトを使って書いてください。
16px×16pxですが、どちらもドットを置いて行くだけで簡単です。
ドットで書いたら下の【Preview】内にある「Download Favicon」を押せば書いたアイコンがダウンロード出来ます。
ドットで書いたら右下の【Create Favicon】ボタンを押すと「Download the generated favicon」という文字が出てきますので、クリックするとダウンロードできます。
ここでご紹介したツール以外にも、使えるサイトやツールを紹介していますので興味のある方はどうぞ。
ファビコンの画像フォーマット
ファビコンは「.PNG」「.GIF」「.JPG」という画像フォーマットでも構いませんが、古いブラウザだとこういったフォーマットに対応していません。
（画像の後ろに付くファイル種類名の事を、拡張子と呼びます）
そこで「.ico」という昔からファビコンに使われている拡張子にします。
画像ソフトを使用できる場合は、「.PNG」「.GIF」「.JPG」などで作ったアイコンをセーブしてください。
もし「.PNG8」「.PNG24」などのフォーマットに対応していれば、画像サイズを小さく出来ます。
（例）favi.png
この例のファイル名でセーブした場合、faviの後ろの拡張子を「.png」から「.ico」に変更してください。
favi.png→fani.ico
ファイルを選んで、右クリックすると「名前の変更」があると思います。
「拡張子を変更するとファイルが正常に・・・云々」という警告が出る事がありますが、そのままファイル名を変更して構いません。
ファビコン画像をPNG形式（他の形式でも可）でセーブしようとすると、どんなファイル名でセーブするか聞かれます。
そこで、名前を「favi.ico」と付けてセーブしても大丈夫です。
私は画像ソフトで直接ドットで書いて「.ico」という名前でセーブしていますので、吐き出しツールなどは使用していませんが、画像さえあれば解像度を指定してファビコンが吐き出せる便利サイトもあります。
こちらは、ファビコン制作で有名なサイトです。
使い方は、サイト内に詳しく記載があります。
ファビコンを透過させたい場合
真四角のファビコンなら良いのですが、周りに隙間があるマークは隙間部分を透明にした方が綺麗に見えます。
このブログのファビコンも枠の四隅（角部分）を透明にしています。
画像ツールでの透明部分の扱いは、画像ツールによって方法があります。
パレット式であれば、透明色で塗り潰します。
PhotoShopなどのレイヤー式であれば、背景を非表示にして、消しゴムで消した部分が透明にします。
ここで全ての画像ツールごとの透過方法は網羅出来ないので、詳細は各ツールのマニュアルで「半透明」や「透過」などの言葉を頼りにやり方を探してください。
透明化が面倒くさっ！という方は、素直に真四角で解像度いっぱいにファビコンを書きましょう！
ファビコンをブログに設定
画像が出来たら、画像をFTPなどでブログフォルダにアップロードします。
サーバーにアップロード出来たら、さくらブログのHTMLに設定を追記してます。
【デザイン】→【HTML】を選んでHTMLを開きます。
<head> 〜 </head>の間に次の文字列を追記します。
</head>の真上あたりで良いと思います。
<!--▼ファビコン▼-->
<link rel="shortcut icon" href="http://・・・ファビコンのあるフォルダ/favi.ico">
<link rel="icon" href=" href="http://・・・ファビコンのあるフォルダ/favi.ico">
<!--▲ファビコン ここまで▲-->実装方法として、上の１行だけを紹介しているサイトも多いです。
それでも問題ありませんが、正式な記述として下の行もあった方が良いそうです。
上記ソース内のhttp以下は、ファビコンの置いてあるURLとファビコンのファイル名です。
ご自分の環境に合わせた場所を指定をしてください。
追記出来たら、下にある【保存】を押してください。
ブログを確認してファビコンが表示されているか見てください。
ファビコンが表示されない場合
先ず、疑うのはファビコン画像の置いてあるフォルダ指定が間違っていないかです。
うっかりミスで「フォルダ/フォルダ//ファビコン.ico」なんて事が良くあります。
フォルダのマーク「/」が「//」二重になっていますので、これでは正確なフォルダ指定が出来ていませんので、画像は出ません。
これ、私がやったミスです。
フォルダ指定に間違いが無いなら、次にブラウザ側の問題かもしれません。
ブラウザの中には、ページの更新をしないと表示されないものもあります。
Windowsなら【F5】、Macなら【⌘】command＋【R】でページ更新が出来るはずです。
それでも駄目な場合は、ブラウザのキャッシュが怪しいです。
キャッシュとは、過去に表示したページを素早く表示させるために自動的に一時記憶する機能です。
このキャッシュが新しいファビコン表示を妨害している可能性があります。
各ブラウザの設定画面からキャッシュを削除して、再度ブログにアクセスしてみます。
ファビコンが表示されない現象は、特にGoogle Chromeで起こる事が多いようです。
私も１度ありましたので、解決方法を書いておきます。
Chromeを終了します。
Windowsの場合
C:/ユーザー/ユーザー名/AppData/Local/Google/Chrome/User Data/Default
この中に「Favicons」というファイルがありますので、削除してください。
Macの場合
ユーザーのフォルダ/ライブラリ/Application Support/Google/Chrome/Default
この中に「Favicons」というファイルがありますので、削除してください。
Chromeを立ち上げ直すと、開いていたファビコンが全て再読み込みされます。
これで、直っているはずです。
もし、ダメならページの更新をここでもやってみてください。
ファビコンは、絶対変更しないとならないものではありませんが、個性が出る部分です。
好きなデザインを作って割り当ててみましょう！
スポンサーリンク
