Melhores tamanhos de favicon para sites

Um favicon é dimensionado para muitos pixels físicos: 16×16 em uma guia, 32×32 em uma barra de favoritos Retina, 180×180 na tela inicial de um iPhone, 512×512 em uma tela inicial PWA. Uma imagem não pode servir bem a todos eles. Use nosso [gerador favicon] (ferramenta: gerador favicon), [conversor PNG para ICO] (ferramenta: png-to-ico), [conversor SVG para ICO] (ferramenta: svg-to-ico) e [testador favicon ao vivo] (utilitário: favicon-tester) para construir e verificar seu conjunto de ícones e leia o companion guide para um passo a passo condensado.

Aumentar a escala de uma fonte minúscula produz desfoque. Reduzir a escala detalhada de 1024×1024 sem testar perde linhas finas. A correção é um pequeno conjunto de exportações específicas ou um .ico de vários tamanhos que incorpora os quadros de desktop comuns.

Enviar todos os tamanhos listados em postagens antigas de blog é um desperdício. O envio de poucos produtos deixa uma lacuna visível em uma plataforma. A matriz abaixo reflete solicitações reais medidas em 2.026 navegadores.

Use our favicon generator, PNG to ICO converter, SVG to ICO converter, and live favicon tester to build and verify your icon set, and read the companion guide for a condensed walkthrough.

As guias da área de trabalho normalmente renderizam um ícone CSS de 16x16 pixels, que é mapeado para 16x16 ou 32x32 pixels do dispositivo, dependendo da densidade da exibição.

Barras de favoritos e guias fixadas geralmente usam 32×32 ou 48×48. Chromium pode escolher automaticamente o quadro incorporado mais próximo de favicon.ico.

Todos os três tamanhos de abas comuns (16, 32, 48) cabem confortavelmente dentro de um único .ico de vários tamanhos. É por isso que o contêiner .ico continua sendo o formato de entrega de desktop mais eficiente.

Windows O menu Iniciar, os pinos da barra de tarefas e os atalhos do File Explorer podem solicitar 24×24, 32×32, 48×48, 64×64, 128×128 ou 256×256 dependendo do contexto e da escala de exibição.

A Microsoft documenta 16, 24, 32, 48, 64, 128 e 256 como o conjunto prático para aplicativos Windows. Web favicons se beneficiam do agrupamento de pelo menos 16 a 256 em favicon.ico.

macOS prefere .icns para aplicativos nativos, mas consome .ico e PNG para atalhos da web. iOS ignora .ico para ícones da tela inicial e deseja um PNG dedicado de 180 × 180 por meio do ícone de toque da maçã.

Os manifestos de aplicativos da Web exigem ícones com qualquer finalidade e opcionalmente mascaráveis. Os tamanhos comuns são 192×192 e 512×512 PNG.

Android Chrome usa ícones de manifesto para interface de instalação e telas iniciais. Uma fonte de 512×512 reduz a escala de forma limpa; um manifesto apenas de 192×192 parece suave em telefones de última geração.

iOS não lê ícones de manifesto para posicionamento na tela inicial. Você deve declarar <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">.

16×16 — abas do navegador (densidade 1×). 32×32 — guias e marcadores em telas Retina. 48×48 — alguns contextos de UI Windows e usos de marcadores herdados.

64×64 e 128×128 — atalhos Windows em escala mais alta. 256×256 — Windows blocos fixados e visualizações de alto DPI.

180×180 – ícone de toque da maçã (iOS / iPadOS). 192×192 e 512×512 — Ícones de manifesto PWA para Android e prompts de instalação.

Blog pessoal: favicon.ico somente com 32/16/48. Aceitável se você não se importa com o polimento da tela inicial do iOS.

Site de marketing da empresa: pacote .ico mais 180×180 apple-touch-icon mais 32×32 PNG <link> para guias Retina explícitas.

PWA instalável: .ico completo, ícone de toque de maçã, manifesto 192 + 512, SVG opcional para cromo de UI escalável.

Aplicativo de desktop Electron: Windows .ico com 16–256; macOS .icns separadamente se você distribuir fora do navegador.

Vários tamanhos favicon.ico (16, 32, 48, 64, 128, 256) em /favicon.ico.

apple-touch-icon.png em 180×180 para telas iniciais iOS.

Um 512×512 PNG em site.webmanifest para superfícies de instalação Android.

Esse trio cobre cerca de 95% das solicitações de ícones do mundo real. Adicione SVG quando desejar dimensionamento infinito e estilo de modo escuro em guias modernas.

Preciso de um PNG 16×16 se estiver dentro do .ico? Não, a menos que você queira um <link rel="icon" sizes="16x16"> explícito para depuração.

120×120 ainda é necessário? Esse era um tamanho iOS antigo. O Safari moderno espera 180×180.

E quanto a 64×64 favicons? Útil dentro de .ico para Windows; raramente necessário como PNG independente.

Posso pular 256×256? Somente se você nunca se importar com as visualizações de atalhos de alto DPI do Windows. A maioria das equipes inclui isso.

O ícone iOS tem cantos arredondados e parece cortado: isso é mascaramento iOS – design com preenchimento seguro, não um bug em seu arquivo.

A instalação do PWA mostra um ícone genérico: ícones de manifesto ausentes ou abaixo do mínimo de 192×192. Valide JSON com Chrome DevTools → Aplicativo.

Ícone de guia suave no Retina Mac: certifique-se de que favicon.ico contenha um quadro de 32×32, não apenas 16×16.

Download enorme de .ico: você incorporou 256×256 BMP não compactado. Reconstrua com compactação PNG dentro do contêiner.

Pixels CSS não são pixels físicos. Um slot de guia 16×16 em uma tela 2× geralmente carrega um bitmap 32×32 para maior nitidez.

É por isso que um favicon.ico contendo 16 e 32 quadros supera um único PNG 16×16 em MacBooks Retina e laptops Windows de alto DPI.

Android PWAs exibem ícones de manifesto em telas iniciais em resolução total do dispositivo – uma fonte de 192×192 esticada para um telefone de 1440p parece suave; 512×512 reduz a escala de forma limpa.

iOS aplica sua própria máscara e raio de canto aos ativos do ícone de toque da maçã. Design com preenchimento seguro para que bordas importantes não sejam cortadas pelo esquilo.

Ao testar, faça uma captura de tela da guia com 100% de zoom do navegador e 200% de escala do sistema operacional. Se ambos parecerem nítidos, sua matriz de tamanho provavelmente está correta.

Baixe favicon.ico e abra-o em uma ferramenta que lista frames incorporados. Confirme se existe 16, 32, 48 e pelo menos um quadro de tamanho alto.

Busque apple-touch-icon.png e verifique as dimensões em qualquer inspetor de imagem – espere 180×180, não 120×120 de modelos desatualizados.

Abra site.webmanifest e verifique os ícones[] inclui 192×192 e 512×512 com caminhos corretos e tipos de imagem/png.

Carregue seu site em Chrome DevTools → Aplicativo → Manifesto. Entradas ausentes ou inválidas mostram avisos antes que os usuários vejam uma caixa de diálogo de instalação quebrada.

Mantenha uma planilha mapeando cada arquivo para seu consumidor (guia, iOS, PWA, Windows). No futuro, você não precisará fazer engenharia reversa na pasta de ativos durante uma reformulação da marca.

Novas classes de dispositivos aparecem lentamente na terra favicon. Hoje, os ícones de manifesto 512 × 512 cobrem UIs dobráveis ​​​​e de instalação em tablets melhor do que 192 sozinhos.

Evite tamanhos exóticos (96×96, 120×120), a menos que um documento de plataforma específico ainda os exija – eles adicionam carga de autoria sem amplo benefício.

Armazene o vetor mestre ou raster 1024×1024 em seu repositório de design, mesmo que você nunca o envie. Plataformas futuras poderão solicitar ícones de manifesto maiores.

Automatize a regeneração do master para que, quando um novo tamanho recomendado aparecer, você execute novamente um script em vez de exportar manualmente no Photoshop.