訪問サイトのファビコンを取得する「Get Favicon」（1）/ JavaScript

ファビコンはサイトのペンダント 

ファビコンは色んなところでみかける、サイトを示すアイコンです。

以下は Wikiによる説明ですが、Wikiのファビコンは「」ですね。

favicon（ファビコン）は、ウェブサイトのシンボルマーク・イメージとして、ウェブサイト運営者がウェブサイトやウェブページに配置するアイコンの俗称である。favorite icon（フェイバリット・アイコン：お気に入りアイコン）という英語の語句を縮約したかばん語である。

このアイコン画像を取得するには、以下のURLにアクセスすると、Googleのサービスが機能して、目的のサイトのファビコンが表示されます。

https://www.google.com/s2/favicons?domain=ファビコンを取得したいサイトのURL

実際に、アメーバスタッフブログのページでこれを行うと、以下のURLにリダイレクト（転送）されて、黒背景の画面に小さなアイコン画像が表示されます。

リダイレクト先のURLは以下です。

https://t2.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=https://ameblo.jp/staff/&size=16

「gstatic.com」は、アイコン取得のサービスサイトと思われます。 このURLのクエリー末尾の「&size=16」を「&size=64」に書き換えると、64pxサイズが取得できます。 また「&size=56」など不適当な値では、デフォルトの16pxサイズが表示されます。

また、各サイトの「head要素」を調べると「link rel="icon"」と「link rel="apple-touch-icon"」のリンクでファビコンが登録されています。「gstatic.com」は、それらを前もって調べて蓄積し、Googleからのリクエストに返しているのではないでしょうか。 直接にサイトを開くなら、サイトの「head要素」からファビコンを取得する方法もありますが、「gstatic.com」のシステムを通した方がツールの作成は簡単です。

「Get Favicon」の仕様と操作方法

仕様 

「Get Favicon」を開いたサイトの画面で実行すると、そのURLを取得し、Googleのサービスを使ってファビコン画像をブラウザの別タブに表示します。 別タブには、初期値「16px」サイズのファビコンが表示されますが、もう少し大きなファビコン画像が欲しい場合もあり得るので、サイズをリクエストできる様にしています。

操作 方法

●「Tampermonkey」上で「Get Favicon」を「ON」にします。

（注）

このツールは、ブラウザが開く全サイトで動作します。 ショートカットは「F2」で、ブラウザや他ツールの「F2」機能がある場合は、それを不能にします。 そのため、使用頻度が少ない「F2」をスイッチにしていますが、このツールはファビコンの取得時にのみ「ON」とし、通常は「OFF」とする非常駐型の使用を推奨します。

● ファビコン画像を取得したいサイトのページを開き、「F2」を押します。

ブラウザの別タブに「gstatic.com」が表示され、中央にサイズ指定パネルとファビコンが表示されます。

▪ 最初に表示されるファビコンは、必ず「16px」のサイズです。

▪ ファビコンを用意していないサイト（またはURL）の場合は、「地球」マークの「16px」のアイコン画像が表示されます。

▪ ブラウザのユーザー設定でボップアップのブロックが指定されている場合は、これを許可しないと別タブを開く事ができない場合があります。

● より大きなサイズのファビコン画像を取得するには、パネルでサイズを指定して「Enter」キーを押します。

▪ サイズ指定は「16」～「64」の 8の倍数の「px値」で、指定は記憶されます。

▪ この操作でページがリロードされ、指定サイズのファビコンを用意しているサイトの場合は、それが表示されます。

▪ サイトにより様々ですが、多くのサイトは「16px」「32px」「48px」等のサイズのファビコンを用意しています。 指定したサイズのファビコンが無い場合は、デフォルトの「16px」サイズのファビコンが表示されます。

● 目的のファビコン画像が表示されたら、デスクトップ等にファビコンをドラッグアウトします。 デスクトップ上のファビコン画像は「png」形式の画像として、自由に扱えます。

「Get Favicon 🔵」を利用するには 

このツールは Chrome / Edge / Firefox の拡張機能「Tampermonkey」上で動作します。

以下に、このツールの導入手順を簡単に説明します。

❶「Tampermonkey」を導入します

使用しているブラウザに拡張機能「Tampermonkey」を導入する事が必要です。 以下のページに簡単な導入の説明があるので参照ください。

⭕「Tampermonkey」の導入方法

❷「Tampermonkey」にスクリプトを登録します

●「Tampermonkey」の「＋」マークの「新規スクリプト」タブを開きます。

●「新規スクリプト」には、最初からテンプレートが記入されています。 これは全て削除して、完全に空白の編集枠に 下のコードをコピー&ペーストします。

〔コピー方法〕　軽量シンプルなツール「PreBox Button   」を使うと

　　コード枠内を「Ctrl+左Click」➔「Copy code 」を「左Click」

　　の操作で、掲載コードのコピーが可能になります。

● 最後に「ファイル」メニューの「保存」を押すと、ツールが使用可能になります。

〔 Get Favicon 🔵 〕 ver. 0.1

// ==UserScript==
// @name         Get Favicon 🔵
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  各種のサイトでファビコンを取得する
// @author        Ameba Blog User
// @match        https://*/*
// @exclude      https://blog.ameba.jp/ucs/entry/srventry*
// @noframes
// @grant        none
// ==/UserScript==


let page_location=location.href; // 現在のページのURL
if(page_location.indexOf('gstatic.com/favicon')!=-1){ // ファビコンの取得画面の場合
        set_dialogue();
        get_favicon(); }



document.addEventListener('keydown', check_key);

function check_key(event){
    if(event.keyCode==113){ // ショートカット「F2」
        event.preventDefault();
        event.stopImmediatePropagation();
        if(page_location.indexOf('gstatic.com/favicon')==-1){ // 通常のページの場合
            let fav_request; // ファビコンを取得するためのURL
            fav_request='https://www.google.com/s2/favicons?domain='+ page_location;
            open(fav_request, "_blank"); }}}



function set_dialogue(){
           let menu=document.createElement('div');
            menu.setAttribute('id', "fav_menu");

            menu.innerHTML=
                'ファビコンのサイズ　<input id="fav_size" type="number" step="8" min="16" max="64">'+
                '<style>'+
                '#fav_menu { position: absolute; top: 30%; left: calc(50% - 120px); '+
                'padding: 10px 20px; background: #fff; font: normal 16px Meiryo; } '+
                '#fav_size { width: 60px; padding: 2px 0 0; font: normal 16px Meiryo; text-align: center; } '+
                '</style>';

            if(!document.querySelector('#fav_menu')){
                document.querySelector('body').appendChild(menu); }}



function get_favicon(){
    let f_size; // ファビコンの指定サイズ
    let fav_request; // ファビコンを取得するためのURL

    f_size=get_cookie('favicon_size');
    if(f_size==0){
        f_size=16; } // クッキーが無い場合のデフォルト設定
    document.cookie='favicon_size='+ f_size +'; Max-Age=2592000'; // Cookieの更新

    let fav_size_input=document.querySelector('#fav_size');
    if(fav_size_input){
       fav_size_input.value=f_size;

        fav_size_input.onchange=function(event){
            event.preventDefault();
            event.stopImmediatePropagation();
            f_size=fav_size_input.value;
            document.cookie='favicon_size='+ f_size +'; Max-Age=2592000'; } // Cookieの更新

        document.addEventListener('keydown', function(event){
            if(event.keyCode==13){
                event.preventDefault();
                event.stopImmediatePropagation();
                let que=page_location.split('&');
                if(que[que.length-1] && que[que.length-1].indexOf('size=')==0){
                    que.pop();
                    fav_request=que.join('&') +'&size='+ f_size;
                    location.href= fav_request; }
            }}); }


   function get_cookie(name){
        let cookie_req=document.cookie.split('; ').find(row=>row.startsWith(name));
        if(cookie_req){
            if(cookie_req.split('=')[1]==null){
                return 0; }
            else{
                return cookie_req.split('=')[1]; }}
        if(!cookie_req){
            return 0; }}

} // get_favicon()

〔追記〕 2022.03.19

編集画面での起動抑止の設定を追加しました。

「@exclude      https://blog.ameba.jp/ucs/entry/srventry*」

「Get Favicon 🔵」最新版について 

旧いバージョンの JavaScriptツールは、アメーバのページ構成の変更で動作しない場合があり、導入する場合は最新バージョンをお勧めします。

●「Get Favicon 🔵」の最新バージョンへのリンクは、以下のページのリンクリストから探せます。

スクリプトツール 　最新バージョン・リンク一覧表 （ツール名順）