Gerador de favicon: uma tela de 512 pixels, doze arquivos
O site está no ar, o logotipo foi aprovado e a aba do navegador ainda mostra um globo cinza. O gerador de favicon abaixo pega uma imagem enviada, um emoji ou até três letras e desenha tudo numa tela de 512×512 pixels. Todos os tamanhos de saída são reduzidos a partir dessa tela. A prévia ao vivo mostra o ícone como aba do navegador, como resultado do Google e na tela inicial de um celular.
O que fica no seu computador
A imagem é lida com um FileReader e desenhada numa tela (canvas) no seu navegador. Escolher um arquivo ou clicar num botão de download não envia nenhuma requisição, e o painel de rede das ferramentas de desenvolvedor mostra isso. Os arquivos chegam como downloads normais do navegador. O trecho de código só vai para a área de transferência quando você clica em Copiar código.
Cinco ajustes e depois o download
- Escolha uma aba de origem: Upload de imagem / SVG, Favicon de emoji ou Texto / monograma. Solte um arquivo PNG, SVG, JPG ou WebP, digite de uma a três letras ou escolha um emoji. Há 14 botões rápidos de emoji.
- Escolha um fundo: Transparente, Cor sólida ou Gradiente moderno. O gradiente tem duas cores e um ângulo de 0° a 360°.
- Defina o espaçamento interno (0–40%, padrão 15%) e o raio dos cantos (0–50%, padrão 22%, o visual squircle do iOS).
- Digite o nome do site. Ele vira o
namedo manifesto, e os 12 primeiros caracteres viram oshort_name. - Clique em Baixar pacote completo (.ZIP). Você também pode pegar arquivos avulsos nos cartões de tamanho abaixo da tela.
Os doze arquivos e os extras do ZIP
O pacote contém estes arquivos de imagem:
favicon.icoe quatro PNGs de 16, 32, 48 e 96 pixels- Três Apple Touch Icons, de 180, 152 e 120 pixels.
- Ícones do Android de 192 e 512 pixels, mais um ícone maskable de 512.
- Um tile do Windows de 150 pixels.
O ZIP acrescenta site.webmanifest, browserconfig.xml e um README.txt. O botão Copiar código entrega as tags <link> e <meta> correspondentes para o head da sua página.
Onde o resultado pode surpreender
O arquivo .ico tem três camadas PNG: 16, 32 e 48 pixels. Não existe camada de 64 ou 256 pixels. Os emojis usam a fonte de emojis do seu sistema operacional, então o mesmo emoji fica diferente no macOS, no Windows e no Android. Os monogramas usam fontes do sistema, e Impact ou uma fonte cursiva podem ser trocadas por outra no seu computador.
O raio dos cantos e o espaçamento valem para todos os arquivos, inclusive o ícone maskable. Para um ícone maskable de sangria total, defina o raio como 0 e mantenha a arte dentro do círculo pontilhado. O trecho de HTML liga o .ico, os PNGs de 16 e 32 pixels, o ícone Apple de 180 pixels, o manifesto e a configuração do Windows. Os arquivos de 48, 96, 152 e 120 pixels estão no ZIP, mas sem link. Uma imagem raster pequena é ampliada, então comece com 512×512 pixels ou mais. Quando o fundo não é sólido, a cor de tema do manifesto é #2563eb.