Gerador de Favicon
Funciona inteiramente no seu navegador. Seus arquivos e dados nunca saem do seu dispositivo.
16×16favicon-16x16.png
32×32favicon-32x32.png
48×48favicon-48x48.png
180×180apple-touch-icon.png
192×192icon-192.png
512×512icon-512.png
<link rel="icon" href="/favicon.ico" sizes="32x32"> <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> <link rel="apple-touch-icon" href="/apple-touch-icon.png"> <link rel="manifest" href="/site.webmanifest">
Sobre esta ferramenta
Solte um logotipo ou qualquer imagem quadrada e a página desenha nos seis tamanhos que um site precisa: 16, 32 e 48 pixels para as abas do navegador, 180 para o ícone que o iOS salva na tela inicial, e 192 e 512 para Android. O download é um único ZIP com esses PNGs, um favicon.ico, um site.webmanifest e uma cópia do HTML que você cola no <head>.
O que vem no ZIP?
Seis PNGs (favicon-16x16.png, favicon-32x32.png, favicon-48x48.png, apple-touch-icon.png, icon-192.png e icon-512.png), mais o favicon.ico, que guarda as versões de 16, 32 e 48 pixels dentro de um único arquivo. O formato ICO aceita imagens comprimidas em PNG desde o Windows Vista, então o arquivo continua pequeno e os navegadores antigos que só procuram /favicon.ico ainda encontram algo para mostrar.
O site.webmanifest lista os ícones de 192 e 512 pixels e traz o nome do app que você digita no menu de configurações, junto com um short_name cortado em 12 caracteres, mais ou menos o que o Android exibe embaixo do ícone na tela inicial. Deixe o campo em branco e ele usa “My site”. O último arquivo, favicon.html, é a mesma sequência de cinco tags <link> que o botão de copiar coloca na sua área de transferência.
Minhas imagens são enviadas para algum lugar?
Não. Sua imagem é desenhada em um elemento canvas dentro da página e codificada em PNG pelo próprio navegador, depois compactada na mesma aba. Nada é enviado a um servidor, então um logotipo ainda não divulgado ou a marca de um cliente não sai da sua máquina. Você pode abrir a página, desconectar a internet, e tudo continua funcionando.
O que devo enviar?
São aceitos arquivos PNG, JPEG, WebP e SVG. Uma imagem quadrada funciona melhor, porque o desenho é ajustado e centralizado, e um banner largo acaba ganhando faixas transparentes acima e abaixo. SVG é a melhor entrada para um logotipo, já que cada tamanho é desenhado a partir do vetor em vez de um bitmap redimensionado. Seja qual for o arquivo, lembre que 16 pixels é minúsculo: uma marca com texto completo vira uma mancha nesse tamanho, e uma única letra ou símbolo se sai muito melhor.
Depois que os arquivos estiverem no ar, os navegadores guardam favicons em cache por bastante tempo, então pode ser preciso forçar a atualização da página para ver o ícone novo. A página da MDN sobre tipos de link explica o que cada tag do trecho faz.