Quais tamanhos de ícone uma extensão do Chrome precisa?

Resumo: uma extensão do Chrome usa ícones PNG de 16, 32, 48 e 128 px. Abra o Gerador de ícones de extensão do Chrome do Imgovo, adicione um logotipo e baixe um ZIP com os quatro tamanhos e a parte icons do manifest.json. Tudo é criado no seu navegador, então seu logotipo nunca é enviado.

Onde cada tamanho é usado

Segundo a documentação do Chrome, os quatro tamanhos têm funções diferentes:

Tamanho	Onde aparece
16 × 16 px	Favicon nas páginas da extensão e menu de contexto
32 × 32 px	Frequentemente exigido em computadores com Windows; também usado para o ícone da barra de ferramentas no trecho abaixo
48 × 48 px	A página de gerenciamento de extensões
128 × 128 px	A Chrome Web Store e a janela de instalação

Como o ícone de 16 px é muito pequeno, detalhes finos e texto fino desaparecem. Um símbolo marcante ou uma letra funciona melhor do que um logotipo detalhado.

Use PNG, não SVG

O Chrome não aceita SVG nos ícones declarados no manifest.json. Mesmo assim, você pode começar com um logotipo SVG: o gerador o desenha em cada tamanho e salva arquivos PNG. Se quiser converter um SVG por conta própria, o Conversor de SVG faz isso com uma largura exata.

Passo a passo

1. Abra o Gerador de ícones de extensão do Chrome e solte um logotipo na página, clique para escolhê-lo ou cole da área de transferência. Uma imagem quadrada com fundo transparente funciona melhor.
2. Em Forma, escolha Ajustar a imagem inteira para manter todo o logotipo, ou Cortar em quadrado para preencher o quadrado.
3. Escolha um Fundo: transparente ou uma cor.
4. Digite a Pasta dos ícones na sua extensão, por exemplo icons/. Use um nome de pasta simples, sem espaços e sem endereço da web.
5. Ajuste o espaçamento interno e os Cantos arredondados. Use menos espaçamento nos ícones pequenos.
6. Confira as quatro pré-visualizações em Ícones.
7. Clique em Baixar ícones (ZIP).

Inclua os ícones no manifest.json

O ZIP contém os quatro arquivos PNG e um arquivo chamado manifest-icons.json. As mesmas linhas aparecem também em Adicionar ao seu manifest.json, com o botão Copiar. Elas têm duas partes: a chave icons (tamanhos e caminhos) e a chave action (o ícone da barra de ferramentas).

O resultado é parecido com isto. Os nomes de arquivo do seu pacote podem ser diferentes, então copie as linhas que a ferramenta fornece:

{
  "icons": {
    "16": "icons/icon-16.png",
    "32": "icons/icon-32.png",
    "48": "icons/icon-48.png",
    "128": "icons/icon-128.png"
  },
  "action": {
    "default_icon": {
      "16": "icons/icon-16.png",
      "32": "icons/icon-32.png"
    }
  }
}

Isso não é um manifesto completo. Copie as partes icons e action para o seu próprio manifest.json, crie a pasta na sua extensão e coloque os arquivos PNG nela.

Firefox e Edge

Os formatos de extensão deles também usam uma chave icons com arquivos PNG, mas cada loja tem suas próprias regras de revisão e pode pedir tamanhos extras. Consulte a documentação da loja em que você publica. O Imgovo só cria os ícones; não envia nem aprova nada.

Lista de conferência antes de publicar

• Os quatro arquivos PNG existem na pasta indicada no manifest.json.
• O ícone de 16 px continua legível em fundo claro e escuro.
• O ícone combina com o logotipo da sua página na loja.
• Você testou a extensão no navegador depois de mudar o manifesto.

Privacidade

Os ícones são desenhados no seu navegador e o ZIP é criado no seu dispositivo. Seu logotipo nunca sai do seu computador.

Experimente agora

Abra o Gerador de ícones de extensão do Chrome, adicione seu logotipo e baixe os quatro tamanhos em um ZIP. Para um ícone de site, use o Gerador de favicon.