Como criar um favicon a partir do seu logo

1. Combine onde o ícone aparecerá

Um favicon ajuda as pessoas a reconhecer um site em lugares como abas do navegador e favoritos. Antes de exportar, pergunte quem fará a instalação e quais navegadores, construtor de sites e outros destinos o projeto precisa atender.

Uma aba do navegador, um atalho na tela inicial da Apple e um app web instalado podem reutilizar a mesma arte da marca, mas têm configurações e exigências de imagem diferentes. Um app móvel nativo também precisa de seu próprio briefing de plataforma. Nomeie essas entregas separadamente para que “favicon incluído” tenha um significado claro.

• Site: identifique o ícone de navegador e quaisquer arquivos alternativos necessários.
• Tela inicial ou app web instalado: confirme com o desenvolvedor as exigências de touch icon ou manifesto.
• Aprovação da marca: combine qual símbolo, monograma ou variação compacta pode representar a empresa.

Leitura complementar: MDN: o que faz um favicon · MDN: declarações de ícones de apps web

2. Escolha uma marca que resista a tamanhos pequenos

Comece com um símbolo ou monograma já aprovado. Se a identidade só tiver um logotipo largo, proponha uma variação compacta e obtenha aprovação antes de tratá-la como parte da marca. Evite esticar o logotipo completo em um quadrado ou remover detalhes importantes sem avisar.

Use 16 × 16 e 32 × 32 pixels como tamanhos práticos de revisão. Procure uma silhueta reconhecível, espaços internos abertos, intervalos distintos e traços que continuem visíveis. São verificações de produção, não uma regra universal de tamanho mínimo para todo o sistema de logos.

O cálculo abaixo mostra por que um logo largo perfeitamente exportado ainda pode ser difícil de reconhecer. O exemplo pressupõe um logotipo 4:1 e uma marca quadrada, ambos ajustados ao mesmo quadrado com margens proporcionais. Ele ilustra apenas a geometria; não é um teste de cliente nem uma regra obrigatória de margem.

Leitura complementar: MDN: tamanho comum de favicon · MDN: preservar proporções SVG

3. Prepare uma origem quadrada limpa

Guarde a arte mestre editável e prepare uma cópia de entrega com a arte compacta aprovada. Use uma prancheta ou quadro quadrado e dimensione a marca proporcionalmente. Decida a margem com intenção: demais faz a marca parecer pequena, enquanto de menos a aproxima das bordas. Ajuste a centralização óptica visualmente quando a forma precisar.

Para SVG, confira se o viewBox exportado descreve a área quadrada pretendida. O viewBox controla o retângulo de coordenadas mapeado para a área de visualização da imagem; ele não remove espaços não usados que já existam na arte. Abra o arquivo exportado e inspecione os limites reais.

Se o ícone contiver letras, converta o texto correto e aprovado em contornos na cópia de entrega ou na exportação. Mantenha texto editável na arte mestre. Nosso guia de fontes em SVG explica as verificações antes de converter letras em caminhos.

Revise a marca em fundos claros e escuros. Transparência não oferece contraste automaticamente: uma marca escura pode desaparecer em uma aba escura. Um bloco de fundo ou uma aparência aprovada separadamente pode ajudar, mas inspecione o resultado instalado em vez de confiar em uma prévia grande.

Continue com: Evite mudanças de fonte em logos SVG

Leitura complementar: MDN: viewBox do SVG

4. Escolha arquivos para o site real

Use as exigências do desenvolvedor para escolher um conjunto pequeno e com propósito. HTML aceita várias opções de ícones, incluindo SVGs escaláveis e arquivos raster. Os navegadores selecionam entre elas usando as declarações e os formatos aceitos; uma ordem de arquivos ou extensão não garante a mesma escolha em todos os lugares.

SVG é útil para arte vetorial, PNG fornece dimensões fixas em pixels e ICO pode conter várias imagens raster em um arquivo. Se entregar ICO, confira os tamanhos incorporados em vez de supor que o nome do arquivo os comprova. Renomear um PNG para .ico não é uma conversão.

O seguinte é um exemplo prático de entrega de site. Não é um conjunto obrigatório para todos os sites.

Leitura complementar: WHATWG: seleção de ícones de sites · MDN: o contêiner ICO · WebKit: ícones SVG no Safari 26

5. Exporte e confira os arquivos reais

Você pode preparar a origem e as exportações raster no editor de design. No Figma, selecione o quadro quadrado, adicione uma exportação PNG e use uma largura fixa como 16w, 32w ou 96w no campo Scale. Um quadro quadrado deve gerar a altura correspondente; verifique as dimensões baixadas. Exporte SVG separadamente em 1×.

Se precisar de ICO, use uma ferramenta que realmente grave esse formato e inspecione as imagens incorporadas. Mantenha quaisquer ajustes manuais para tamanhos pequenos na origem de entrega para que uma exportação futura não os substitua por acidente.

Abra os arquivos que o cliente receberá. Compare formas e espaçamento com a referência aprovada e confira as versões minúsculas no tamanho pretendido. Se um PNG estiver inesperadamente pouco nítido, investigue sua origem e dimensões de exportação antes de gerar mais tamanhos.

Continue com: Exporte um logo de cliente do Figma · Diagnostique um PNG de logo borrado

Leitura complementar: Figma: dimensões e formatos de exportação

6. Confira as exigências do Google Search separadamente

O Google exige um ícone quadrado de pelo menos 8 × 8 px e recomenda mais de 48 × 48. Sua lista de formatos aceitos inclui PNG e ICO, mas omite SVG. Um PNG de 96 px é uma opção prática. Declare-o em uma página inicial rastreável, permita o rastreamento do arquivo e mantenha sua URL estável. O processamento pode levar semanas; a exibição não é garantida. O Google permite um favicon por nome de host, não um ícone diferente por subdiretório.

Leitura complementar: Google Search Central: diretrizes de favicon

7. Deixe explícita a entrega ao desenvolvedor

Inclua a arte aprovada, um inventário curto de arquivos e o uso pretendido de cada um. O desenvolvedor precisa colocar as imagens onde o site possa servi-las e configurar os links de ícones do site ou as configurações do construtor. Baixar um ZIP não instala o favicon.

Peça uma verificação do site publicado nos navegadores combinados, incluindo aparências clara e escura. Se o ícone errado aparecer, primeiro confirme qual URL de arquivo a página declara e o que essa URL retorna. Registre a versão aprovada e os caminhos instalados.

Um Apple touch icon usa sua própria declaração. Apps web instalados podem usar um manifesto com tamanhos e finalidades dos ícones; um ícone maskable precisa de um design conferido conforme sua zona segura. Um PNG quadrado grande, por si só, não estabelece que essas exigências foram atendidas.

Arte aprovada: marca compacta, versão 03.
Arquivos de navegador: favicon.svg, favicon.ico, favicon-96.png.
Imagens ICO: 16, 32 e 48 px.
Revisão: ícone da aba instalado em fundos claros e escuros.
Arquivos adicionais de tela inicial ou app: confirmar conforme o briefing de plataforma combinado.

Continue com: Adicione as funções dos arquivos ao guia de uso do logo

Leitura complementar: Apple: configuração de touch icon, referência arquivada · MDN: preparação de ícone maskable

8. Prepare o pacote do ícone aprovado com logopack.app

Se usar o logopack.app para a entrega mais ampla do logo, escolha um SVG compacto aprovado para o pacote opcional de favicon e revise sua margem e fundo. A etapa de preparação do pacote exporta a arte escolhida; ela não decide qual redesign o cliente aprovou.

O pacote inclui os arquivos a seguir. A imagem de 1024 px é um ponto de partida de alta resolução para preparação adicional. Exigências adicionais de PWA, Android maskable ou apps nativos ainda precisam de seus próprios arquivos e verificações.

Uma conta gratuita permite visualizar seu próprio SVG e ajustar configurações. Você pode exportar a arte de demonstração integrada com uma conta gratuita; exportar sua própria arte exige Pro. Confira os planos atuais e inspecione o download final antes da entrega.

• favicon.svg: arte escalável do ícone
• favicon.ico: imagens incorporadas de 16, 32 e 48 px
• favicon-96.png: PNG de 96 × 96 px
• apple-touch-icon.png: PNG de 180 × 180 px com fundo opaco
• icon-1024.png: imagem de 1024 × 1024 px para preparação adicional
• setup.html: instruções de configuração do site

Leitura complementar: Prepare um pacote com logopack.app · Veja os planos atuais

Checklist final de entrega de favicon

Guarde a origem do favicon verificada junto à arte mestre aprovada do logo. Isso torna a próxima atualização do site uma entrega repetível, em vez de mais uma busca pelo ícone certo.

• ✓A marca compacta está aprovada para este uso.
• ✓A arte permanece proporcional dentro de uma área quadrada.
• ✓As versões de 16 e 32 px foram inspecionadas no tamanho pretendido.
• ✓Margens, espaços internos e traços finos são preservados na exportação pequena.
• ✓Os arquivos reais correspondem às dimensões informadas e ao conteúdo ICO.
• ✓As verificações em fundos claros e escuros usam a aparência aprovada.
• ✓Há uma opção aceita pelo Google disponível quando o Search faz parte do escopo.
• ✓O desenvolvedor tem as funções dos arquivos, instruções de instalação e uma referência aprovada.
• ✓Qualquer trabalho de touch icon, PWA ou app nativo está definido separadamente.