これまでの状況です。（favicon.psdは今回新たに作ったもの。）
.icoファイルは一応「ペイント」で開くことができます。
当時のブログによると、16x16で表示されたときにきれいに表示されるように、16x16の元画像を用意した方が良いとのこと。
確かに、隅のカーブが16x16ではきれいに描けないのでカーブではなく45度の斜線で表現したことを思い出しました。
今回は、大きなアイコンを作るのが目的なので、Photoshopで描きなおしました。（当時のpsdファイルは残っていない。）
四隅は透明色に設定してあります。
http://ao-system.net/favicongenerator/ に元画像（pngに変換済み）をアップロードします。
一瞬にして、出来上がります。背景の指定も出来ます。透明色も選択が可能です。
画像は一括してzipファイルとしてダウンロード出来ます。
38個のファイルが出来ていました。すでに作ってあるfavicon.ico以外のファイルを、ルートディレクトリーにアップロードします。
Internet Explorer 11の･･･何という画面でしょうか、新規タブを開いたときの一覧では以前はアイコンが小さい表示でした。
これも大きく表示されるようになりました。48x48がfavicon.icoに加わったためと思われます。
問題はapple系のブラウザに表示されるかです。しかも、
http://qp.jpn.org/
はルートにこれらのファイルを簡単に置けますが、ブログではルートにアクセス（アップロードできません。）
この対処は、自分自身の以前の書き込みが役に立ちました。
HTMLファイルのヘッダ中に、favicon類へのリンクを強制的に、
<link rel="shortcut icon" href="http://qpbgm.sakura.ne.jp/favicon.ico" type="image/vnd.microsoft.icon">
というふうに、ルートではない場所を指定すればいいことを思い出しました。
そこで、
<link rel="shortcut icon" href="http://qpbgm.sakura.ne.jp/favicon.ico" type="image/vnd.microsoft.icon">
<link rel="icon" href="http://qpbgm.sakura.ne.jp/favicon.ico" type="image/vnd.microsoft.icon">
<link rel="apple-touch-icon" sizes="57x57" href="http://qpbgm.sakura.ne.jp/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="http://qpbgm.sakura.ne.jp/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="http://qpbgm.sakura.ne.jp/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="http://qpbgm.sakura.ne.jp/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="http://qpbgm.sakura.ne.jp/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="http://qpbgm.sakura.ne.jp/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="http://qpbgm.sakura.ne.jp/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="http://qpbgm.sakura.ne.jp/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="http://qpbgm.sakura.ne.jp/apple-touch-icon-180x180.png">
<link rel="icon" type="image/png" href="http://qpbgm.sakura.ne.jp/android-chrome-192x192.png" sizes="192x192">
<link rel="icon" type="image/png" href="http://qpbgm.sakura.ne.jp/favicon-48x48.png" sizes="48x48">
<link rel="icon" type="image/png" href="http://qpbgm.sakura.ne.jp/favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="http://qpbgm.sakura.ne.jp/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="http://qpbgm.sakura.ne.jp/favicon-32x32.png" sizes="32x32">
<link rel="manifest" href="http://qpbgm.sakura.ne.jp/manifest.json">
<meta name="msapplication-TileColor" content="#2d88ef">
<meta name="msapplication-TileImage" content="/mstile-144x144.png">
どうやらうまく行ったようです。
こちらは、Macbook Airの様子。iPadでも同様です。
ただ、iPhoneでは･･･。
PC用の表示にした直後には音符のアイコンになりますが、スマホ用の表示直後に開くと、「さくらのブログ」のアイコンになってしまいます。
ブログ用のHTMLファイルのheader部分を書き換えられればこんなことはないのですけどね。
------
追記
こんなサイトがありました。
http://realfavicongenerator.net/
これでチェックを受けると、「absent」の警告がたくさん出て不安になりますが、
appleだとか、googleをチェックしても同様です。（笑）
