Advertisement
Crie favicons e ícones de web app num instante
Uma origem e todos os ficheiros que um site moderno precisa: um favicon.ico multirresolução, um favicon.svg vetorial, ícones Apple touch, ícones de lançador e maskable de Android, um manifesto web e o excerto do head que liga tudo.
Ficheiros a gerar
Cole isto no seu <head>
Atualiza-se com os ficheiros que marcar. Coloque o pacote na raiz do site e cole este bloco.
<link rel="icon" href="/favicon.ico" sizes="32x32"> <link rel="icon" href="/favicon.svg" type="image/svg+xml"> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"> <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> <link rel="manifest" href="/site.webmanifest"> <meta name="theme-color" content="#3b82f6">
Como funciona
Escolha uma origem
Um emoji, uma a três letras ou o seu próprio logótipo. Carregar um ficheiro apenas o deixa em espera: nada é gerado até você pedir.
Componha a base
Forma, cor sólida ou gradiente, contorno e margem interior. A pré-visualização redesenha-se a cada alteração.
Coloque à mão
Arraste para mover, use a roda para ampliar no cursor, rode. Ctrl+Z anula qualquer passo.
Publique o pacote
Transfira o ZIP, coloque-o na raiz do site e cole o excerto do head.
Um ICO multiquadro a sério
Os quadros de 16, 32 e 48 píxeis são escritos como BMP de 32 bits com máscara AND própria, para que shells antigos do Windows e leitores de ícones exigentes aceitem o ficheiro.
Squircle verdadeiro
A base arredondada é uma superelipse, a mesma família de curva que o iOS usa nos ícones de app, e não um retângulo arredondado a fingir.
favicon.svg vetorial
Os ícones de emoji e de letras são exportados como marcação vetorial real, por isso mantêm-se nítidos em qualquer ecrã e no modo escuro.
Um ícone touch de iOS correto
O ícone da Apple é achatado sobre a cor que escolher, porque o iOS desenha a transparência do ecrã inicial como preto sólido.
Encadeado com o resto da suite
Envie o ícone terminado para comprimir, recortar, converter ou remover o fundo sem o transferir e voltar a carregar.
Nada sai do separador
Canvas e um compressor ZIP a correr no seu navegador. Sem envios, sem API, sem conta, e continua a funcionar offline.
Desenhado uma vez a 1024 píxeis e reduzido como deve ser
Desenhar um emoji diretamente num quadro de 16 píxeis é o que torna a maioria dos favicons gerados numa papa: os tipos de letra de emoji a cores recorrem ao seu bitmap mais pequeno. O FaviconBolt desenha um único master de 1024 píxeis e deriva dele todos os tamanhos, o que a 16 píxeis fica 87% mais perto de uma redução ideal do que desenhar nesse tamanho. Um passo opcional de nitidez, com alfa pré-multiplicado, devolve o contraste de contorno que a média retira.
Geração 100% local
O seu logótipo nunca sai do seu computador. O desenho, o binário ICO e o ZIP são construídos na própria página, e as ilustrações desta página são SVG embutido, por isso também não se descarrega nada de um CDN.
Todos os ficheiros que um navegador vai mesmo pedir
Descomprima o ZIP na raiz do seu site e cole o bloco do head gerado. O manifesto leva o nome real do seu site, a start URL e o âmbito em vez de um marcador, por isso o pedido de instalação mostra o que deve.
Os quadros do ICO são BMP com máscara AND em vez de fluxos PNG embutidos, o ícone Apple touch sai opaco, e o ícone maskable de Android vai sem margens para que a máscara do sistema não corte a sua arte duas vezes.
Perguntas frequentes
QO que está dentro do ficheiro favicon.ico?+
Três quadros de ícone, 16x16, 32x32 e 48x48, empacotados num único binário. Ficam guardados como BMP de 32 bits com uma máscara AND de 1 bit, o formato que qualquer leitor de ícones entende. Os quadros comprimidos em PNG só têm suporte a partir do Windows Vista e alguns analisadores continuam a rejeitá-los.
QPorque é que o ícone Apple touch tem fundo sólido?+
O iOS ignora o canal alfa nos ícones do ecrã inicial e compõe qualquer transparência sobre preto. Achatar o ícone touch sobre uma cor à sua escolha é a única forma de controlar o aspeto depois de instalado.
QPara que serve o ícone maskable?+
O Android aplica a sua própria máscara, um círculo nuns lançadores e um squircle noutros. Um ícone maskable é desenhado sem margens, com a arte dentro de uma zona segura, para que o sistema o possa cortar sem entrar no seu logótipo.
QPosso obter um favicon.svg vetorial?+
Sim: nos modos de emoji e de letras é marcação vetorial genuína. Se carregar um logótipo SVG, também se mantém vetorial. Para uma imagem de píxeis, embutimos o desenho de 512 píxeis dentro do SVG e dizemo-lo, em vez de fingir que vetorizámos um JPEG.
QPosso posicionar o ícone à mão?+
Arraste a área de trabalho para mover a arte, use a roda para ampliar em direção ao cursor e mexa no controlo de rotação. As setas deslocam, mais e menos ampliam, 0 repõe e Ctrl+Z recua no histórico. Manter Alt mostra o original intacto.
QAlguma coisa é enviada?+
Não. Os ficheiros são descodificados, desenhados e comprimidos pelo seu próprio navegador. Não há qualquer chamada a um servidor em momento algum, e é também por isso que continua a funcionar sem rede.