Bloggerのfaviconに関する考察

昨日、Bloggerの各種設定に関する記事を書きました。

そこで、faviconに関して少しお茶を濁していたので、続きを書きます。

Bloggerのテンプレートには、下記のようなコードが入っています。

<b:include data='blog' name='all-head-content'/>

このコードは、実際にページを表示すると、いろいろなlinkタグとかmetaタグに展開されるのですが、その中に下記のようなコードが含まれます。

<link href='http://www.blogger.com/favicon.ico' rel='icon' type='image/vnd.microsoft.icon'/>

あーあー。これが入っちゃうと、どんなに自分のfaviconを入れても、デフォルトのオレンジ色の「B」のfaviconから逃れられないのです。デフォルトと自分のfaviconのどちらが表示されるかは、ブラウザの実装によるわけですよ。

そこで、私はしばらく下記のような方法をとっていました。

<link href='https://inoccu.com/favicon.ico' rel='shortcut icon'/><b:include data='blog' name='all-head-content'/><link href='https://inoccu.com/favicon.ico' rel='icon'/>

こうすれば、自分のfaviconでデフォルトを挟むことになるので、どんなブラウザの実装でも、まさか真ん中を選り抜くようなことはしないだろう・・・と、期待したのです。

私はFirefoxを使っていますが、これでアドレスバーに出てくるfaviconはだいたい自分のもので安定しました。しかし、ブックマークについているアドレスがデフォルトに戻ってしまうこともありました。ま、表示する度にブックマークのfaviconはめまぐるしく変わっていたのです。

※ちなみに、はてなブックマークされた時に使用されるfaviconは、先頭に書いているfaviconのようです。挟み撃ち作戦で先頭が自作faviconになってからブックマークされたものは、自作faviconで、はてなに登録されるようになりました。

で、いま採っている作戦は、<b:include ... />を取り払って、展開されるべきコードをあらかじめテンプレートに組み込んでしまう方法。そこで、デフォルトのfaviconの設定を外してしまうのです。

現在のソースは、このページのソースを見てみてください。

最も危険な方法ですが、最も確実な方法でもあります。今のところ、問題は出ていません。

この記事を書いた人

井上 研一

株式会社ビビンコ代表取締役、ITエンジニア/経済産業省推進資格ITコーディネータ。AI・IoTに強いITコーディネータとして活動。2018年、株式会社ビビンコを北九州市に創業。IoTソリューションの開発・導入や、画像認識モデルを活用したアプリの開発などを行っている。近著に「使ってわかった AWSのAI」、「ワトソンで体感する人工知能」。日本全国でセミナー・研修講師としての登壇も多数。