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

2013/07/22 2015/03/13

amebaブログでお気に入りアイコン(ファビコン)を
表示する方法は、探すと結構出てきます。

ですがどうも情報が古いようで、
正しく設定できない情報が多くなっている気がします。

今回なんとか表示することができましたので投稿をしておきます。

2015/03/13追記
その後、@MikageHijiri　さんからご指摘をいただきました。
ファビコンが正しくアメブロで表示されていないとのことで、確認いたしました。
結果、この方法ではファビコンの表示が正しく行えていないことがわかりました。

代替策の検討に入りますが、元々JavaScriptによる実装でしたので、
かなりの検討が必要かな・・・という気がしています。
今しばらくお時間をいただけますと助かります。

フリープラグインを利用した方法での実装ですが、
ここまで設定をしにくく設計をしていることから、
アメーバのサービスとしては「ファビコンを変更してほしくない」との意図が伺えます。

規約違反には当たらないと解釈はしておりますが、
あくまでも個人の責任で設定をお願いします。
万が一にもブログが削除されたといった事が
発生しましても私は一切責任を負いません。

ファビコン表示

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

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

実際に無料ブログでブックマークアイコンを表示したサイトのリンクもご紹介しています。
各社の違いについてご興味がおありでしたら、お読みいただけると嬉しいです。

はじめに

立ち上げたばかりの私のようなブログに、
お越しいただきありがとうございます。
管理者アルゴリズンです。
宜しくお願いします。

アメーバブログでファビコンを表示する方法です。
ファビコンとはお気に入りアイコンという、
タブやお気に入りで表示されるアイコンのことで、
アメブロの場合大半が「アメーバのアイコン」の
緑色アイコンが表示されていると思います。

これを独自のアイコンにしてしまおうということです。

概略

アメブロではフリースペースと呼ばれるエリアを
利用してのファビコン設定情報が多いですが、
フリーエリアに記載した場合は、
そのままタグが出力され、ファビコンが反映されませんでした。

本投稿ではフリープラグインエリアを利用します。

アイコンの作成には画像ファイルから、
icoファイルを生成してくれるサイトのお力をお借りします。

アメブロではファビコンなどで利用される、
アイコンファイル(拡張子ico)が利用(アップロード)できないので、
アメブロ以外のストレージサービスを利用します。

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

ここで、なぜicoファイルなの？gif画像じゃだめなの？

そうお感じになられる方もおられるかもしれませんが、
gif画像などでファビコンを設定した場合に、
Internet Explorerでブログにアクセスしてきた方には、
ファビコンが正しく表示されない症状があります。

Internet Explorerに関しては適切に(？)
アイコンファイルを指定していなければ表示されません。

今回、この検証を行う際に、以下の５ブラウザにて検証を行いました。

GoogleChrome　Ver. 27.0.1453.116 m
Internet Explorer　Ver. 10.0.6
Firefox　Ver. 22.0
Safari Ver. 5.1.7
Opera Ver.12.15

しかし、いろいろと試行錯誤を行ったのですが、
今回の条件でOperaに関してはどうしても対応を行うことができませんでした。

別途公開のサーバが利用でき、
icoファイルを独自にWeb公開ができる場合は、
今回の検証ブラウザすべてで表示することができます。

それではアイコンファイルの作成から、
順を追ってご説明します。

アイコン画像の準備

用意するアイコン画像は、
お好きなデザインで、16px、32px、48pxの３サイズの正方形画像を準備します。

以下の説明に関わらず作成方法はお任せします。
ご参考まで。

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

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

今回作成に利用したファイルは、
以下のファイルを利用しています。

この３サイズの画像をico作成サイトにて、icoファイル化を行います。

画像ファイル(PNG、GIF、JPEG)ファイルからのアイコン(ico)ファイル化

生成を行ったicoファイルは以下のファイルです。

アイコンファイルの公開元の選定

今回はアメブロのみを利用している、
ユーザーであることを想定しています。

ですので、アメブロに対して直接アップロードすることができない
icoファイルをWebに公開する方法として、SugarSyncを利用します。

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

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

私がこの方法で検証を行った限り、
DropBox、Googleドライブ、Amazon Cloud Drive、Yahoo!ボックス
を試してはみましたがうまく合致するサービスには出会いませんでした。
結果としてSugarSyncを利用します。

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

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

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

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

画像の公開設定は以上です。
あとはアメブロ側で設定を行います。

アメブロへの設定

プラグインの追加

アメブロのブログ管理画面より、
[プラグインの追加]をクリックします。

アメブロフリープラグイン追加

プラグインソースの貼り付け

プラグインのタグ入力エリアに対して、
以下のようなソースを貼り付けます。

ただしURLの部分は貴方がSugarSyncにて取得したアイコンの
共有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>