ブックマークアイコン(ファビコン)をウェブリブログで表示する方法

2013/07/22 2014/11/22

ウェブリブログで、
「ブックマークアイコン(ファビコン)をウェブリブログで表示する方法」
という投稿をよく見かけますがよく表示されてないことがあります。

どうやらトップページは表示できているが、
各個別の投稿ページに反映できないといったケースが見受けられる気がします。

いろいろ試した結果、表示することができましたので投稿しておきます。

本投稿は以下投稿の詳細ページになります。

無料ブログ各社のブックマークアイコン(favicon)変更可否と方法

もしお時間があれば本編もどうぞ。

ファビコンイメージ

はじめに

今回はファビコンの設定です。
ウェブリブログにファビコンを設定する。
この簡単そうなことが意外と実現できない事実・・・。

「フリースペースにタグを貼り付ける」という方法で実現できます！と
記述されているにも関わらず、最近は仕様が変わったのかできなかったり。

そうした投稿があるブログであるにも関わらず、
ブックマークアイコンが表示されていなかったりしています。
おそらく当時は表示されていたのでしょう。

私も記載されている通りにタグを、
フリースペースに貼ってみたのですが表示されませんでした・・・。

できることなら白紙アイコンではなく、
ビッグローブの「青い丸キャラ」アイコンくらいは、
ファビコンに割り当てておいて欲しいものです。。。

というわけで、なんとか実現できないかと検討した結果、
DOMモデルを制御する方法で実現ができましたので投稿をしておきます。

どうでしょうか？私のブログで今、正しく表示されていますか？
ええかげんブログ（ウェブリ支店）
（表示されていなかったら教えてください。すみません）

概略

ウェブリブログでは、フリースペースを利用することができ、
そのフリースペースに対して、javascriptを利用することが可能とあります。
皆さんもスクリプトを貼って利用されているでしょう。

そこに対して、headタグ内にブックマークアイコンを表示するための、
エレメントをプログラム的に追加し、表示を行います。
アイコンファイルの準備

まずアイコンに割り当てたい画像を用意する必要があります。
画像の作成方法等に関しては以下の投稿を参照願います。

１つのアートボードを使ったIllustratorによるFavicon画像の作成

複数アートボードを使ったIllustratorによるFavicon画像の作成

Internet Explorerによる表示を除けば、
16pxサイズのGIFやPNG画像を用意し、
割り当てることで表示が可能なのですが、
多くの方が利用されているであろうInternet Explorerで、
表示されないのではあまり意味がありません。

その為、16px、32px、48pxで作成した画像を、
ico形式のファイルに割り当てることで、
一般的なブラウザで表示されるようになります。
今回は、以下の画像を利用してicoファイルを生成しています。

実際のアイコン(ico)ファイルは以下のファイルです。
テスト確認用などにはご利用いただいて構いません。

画像の保存先(公開元)の選定

今回はInternet Explorerに対応した拡張子icoファイルを、
ファビコンに割り当てを行いたいのですが、
このicoファイルはウェブリブログでは、
画像ファイルとして貼り付けを行うことができません。

icoファイルアップロードエラー

またウェブリアルバムにおいても、
icoファイルは画像として認められずアップロードができません。

icoファイルアップローダエラー

無料サービスは制限が多くて大変だな・・・と感じるところです。
まぁ、無料であるということは、
提供元にも意図があっての無料ですから、それに従わざるをえませんね。

そこで、今回利用する方法はSugarSyncの
オンラインストレージを利用します。

似たサービスがありますので、
すでにこうしたサービスをご利用のようでしたらそちらでも構いません。

ただし、他の画像共有サービスでも、
直接ファイルに対してのURLが取得ができるようなサービスを選定する必要があります。

なお、SygarSyncは友人紹介制もとっていますので、
紹介者から紹介を受けた場合には、500MBの追加容量が貰えます。

ただ、紹介者からのメール連絡を待ってからの登録になりますので、
お時間のある方は、以下の管理者ページの
メールアドレスへ直接メールいただければ、
こちらから紹介メールを返信させていただきます。
アルゴリズン管理者について

SugarSyncのID取得などに関しては、
サイトの指示通りに進めれば、取得できますので割愛します。

ファイル共有(SugarSync)を利用したブックマークアイコンの公開

SugarSyncにて公開した画像(ico)ファイルの
URLを取得できれば、画像の公開設定は以上です。
あとはウェブリブログ側で設定を行います。

ブックマークアイコン(favicon)の設定

管理ページの設定メニュー

ウェブリブログへログインし、
[管理ページ]－[設定]をクリックし設定メニューを表示します。

ブログ管理ページ

表示項目設定

[設定]－[表示項目設定]をクリックし、
表示項目設定のメニューを開きます。

表示項目設定に表示されている、
[フリースペース(サイド用)]の[編集]ボタンをクリックし、
フリースペースの編集を行います。
※なお、フリースペースの「□表示」にチェックがされていない場合には、
チェックを入れてフリースペースが有効になるように設定してください。

表示項目設定の選択

お気に入りアイコン(favicon)用javascriptの設定

編集エリアに対して、以下のようなjavascriptを貼り付けし[設定]をクリックして保存します。

以下で示すURLは、先ほどSugaerSyncにてアップロードした際に取得した、
貴方のアイコンURLに置き換えてください。

<script langage="JavaScript" type="text/javascript">
fabicon_link = null
function appendIcon(){
if(fabicon_link) return;	//すでに生成済
fabicon_link = document.createElement("link");
fabicon_link.rel = "shortcut icon";
fabicon_link.type = "image/vnd.microsoft.icon";
fabicon_link.href = "https://www.sugarsync.com/pf/D1408962_257_10204720";
//head要素に追加
document.head.appendChild(fabicon_link);
}
appendIcon();
</script>