【Javascript】サイトのファビコンURLを取得する

javascript chrome拡張機能

f:id:cyamax:20171203112012p:plain

概要

ファビコン(favicon）とは

www.webword.jp

やり方

想定環境

  • javascript
  • favicon画像のurlは<HEAD>配下に<link rel="shortcut icon" href="アイコンのURI" >として書かれている
  • 以下コードを取得したいサイトで実行するとファビコンを取得できる

    コード

//ファビコンURL取得
function favi() {
  //favicon画像のurlはhtml内のhead->linkタグの属性relがshortcut iconのhref値に記載されている
  for (var i = 0;i < document.head.getElementsByTagName('link').length ;i++){
    if (document.head.getElementsByTagName('link')[i].getAttribute('rel') === "shortcut icon"){
      var favicon_url = document.head.getElementsByTagName('link')[i].getAttribute('href');
      break;
    } else {
      var favicon_url = '';
      console.log("取得NG");
    }
  };
console.log(favicon_url);
};

その他

URLが相対パスの場合は少し工夫する必要あり。
chrome extensionなどjavascriptを後から挿入する場合に使える。
chrome apiでもっと簡単に取れる方法があるなら教えて欲しい。