Найти самый большой Фавикон с JS

В рамках аудита я хотел получить самые высокие качества для каждой страницы, которую мы проверяем. Оказалось немного сложнее, чем я думал:

Эти переполнение стека Сообщения Предложите несколько способов получить Favicon, но все они разделяют несколько вопросов:

• Это зависит от сторонней стороны (например, Google ) Он игнорирует по умолчанию

• /favicon.ico , или использует его неправильно Он возвращает первый из любителей, а не самый большой

Как браузер выбирает измерение

Стандартный способ включить Favicon – с тегом ссылки <ссылка .. Вы можете использовать несколько тег ссылок для указания разных размеров, например:

Еще один популярный вариант <ссылка ..

Если ни один из этих тегов не присутствует, браузер сделает запрос на /favicon.ico Файл в корневом каталоге. Некоторые серверы плохо настроены, хотя и вернут 200 ОК Статус, даже если файл нет, поэтому, чтобы убедиться, что вы должны проверить, что файл действительно изображение.

Решение

Следующие коды сочетают в себе все эти факторы и петли через доступные Favicons, чтобы вернуть самый большой.

// Get the largest favicon in the current document, or false if none is found.
let getLargestFavicon = async () => {
  let getSize = el => {
    return (el.sizes[0] && parseInt(el.sizes[0], 10)) || 0;
  };
  let favicons = [
    ...document.querySelectorAll('link[rel="shortcut icon"],link[rel="icon"]')
  ].sort((a, b) => {
    return getSize(b) - getSize(a);
  });
  if (favicons.length > 0) {
    return favicons[0].href;
  }
  // no favicon is specified in the meta tags, lets try the default /favicon.ico
  let defaultLocation = document.location.origin + "/favicon.ico";
  let r = await fetch(defaultLocation);
  if (r.ok) {
    let t = await r.blob();
    if (t.type.indexOf("image") !== -1) {
      return defaultLocation;
    }
  }
  return false;
};

Первоначально опубликовано в https://blog.pagewatch.dev/post/finding-the-dangest-favicon-with-js

Оригинал: “https://dev.to/lpellis/finding-the-largest-favicon-with-js-3an8”