Como buscar favicons

Um favicon (abreviação de "ícone de favoritos") é um pequeno ícone que aparece na barra de endereço do navegador. Os favicons são usados normalmente para identificar e diferenciar sites. Este artigo descreve como recuperar o favicon de um site em uma extensão do Manifest V3.

Como acessar o favicon de um site

Para recuperar o favicon de um site, você precisa criar o seguinte URL:

chrome-extension://EXTENSION_ID/_favicon/?pageUrl=EXAMPLE_URL&size=FAV_SIZE
EXTENSION_ID
O ID da sua extensão.
EXAMPLE_URL
O URL do site do favicon.
FAV_SIZE
O tamanho do favicon. O tamanho mais comum é de 16 x 16 pixels.

As etapas a seguir descrevem como criar esse URL em uma extensão do Chrome:

Etapa 1: atualizar o manifesto

Primeiro, solicite a permissão "favicon" no manifesto.

{
  "name": "Favicon API in a popup",
  "manifest_version": 3,
  ...
  "permissions": ["favicon"],
  ...
}

Os favicons são tratados como recursos na origem da extensão. Para expô-los à Web, mesmo que você os injete em uma página da Web de um script de conteúdo, declare-os como recursos acessíveis à Web. Por exemplo:

{
  "name": "Favicon API in content scripts",
  "manifest_version": 3,
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"]
    }
  ],
  "permissions": ["favicon"],
  "web_accessible_resources": [
    {
      "resources": ["_favicon/*"],
      "matches": ["<all_urls>"],
      "extension_ids": ["*"]
    }
  ]
  ...
}

Etapa 2: criar o URL

A função a seguir usa runtime.getURL() para criar um URL totalmente qualificado que aponta para a pasta "_favicon/". Em seguida, ela retorna uma nova string que representa o URL com vários parâmetros de consulta. Por fim, a extensão anexa a imagem ao corpo. 

function faviconURL(u) {
  const url = new URL(browser.runtime.getURL("/_favicon/"));
  url.searchParams.set("pageUrl", u);
  url.searchParams.set("size", "32");
  return url.toString();
}

const img = document.createElement('img');
img.src = faviconURL("https://www.google.com") 
document.body.appendChild(img);

Este exemplo é um URL de favicon de 32 pixels de www.google.com que inclui um ID de extensão aleatório:

chrome-extension://eghkbfdcoeikaepkldhfgphlaiojonpc/_favicon/?pageUrl=https%3A%2F%2Fwww.google.com&size=32

Exemplos de extensão

Há dois exemplos de favicon no repositório chrome-extension-samples: