Sete contextos de uso
Prévia de Favicon em Navegadores, Busca e Tela Inicial
Julgue a versão minúscula antes dos visitantes.
Envie um favicon e confira legibilidade, contraste e recorte em abas, resultados de busca, favoritos, atalhos e telas iniciais do celular. Edite o nome e o domínio de exemplo para avaliar cada contexto.
Quadro de contexto
Essas maquetes comparam escala, contraste e máscaras comuns. As interfaces do navegador, do Google e do sistema operacional podem mudar, portanto, use-as como verificações de design, em vez de capturas de tela com pixels perfeitos.
Guias do navegador
Guia estilo Chrome
Guia estilo Safari
Pesquisa, favoritos e área de trabalho
Seu site
https://exemplo.com
Seu site – Site Oficial
Um exemplo de resultado de pesquisa para verificar se o favicon permanece reconhecível ao lado do nome e URL do site.
Resultado de pesquisa no estilo Google
Marcador do navegador
Seu site
Atalho na área de trabalho
Telas iniciais de dispositivos móveis
Seu site
Simulação da tela inicial do iPhone
Seu site
Simulação da tela inicial do Android
Visualize cada tamanho de chave
16 × 16 px
32 × 32 px
48 × 48 px
180 × 180 px
Como visualizar um favicon
- 01
Carregue seu favicon
Escolha o PNG, SVG ou ICO real que você planeja enviar. Para arquivos ICO, a ferramenta seleciona a maior imagem incorporada para visualização visual.
- 02
Adicione os detalhes do seu site
Substitua o texto de amostra pela sua marca e nome do host e alterne entre as superfícies de visualização claras e escuras.
- 03
Verifique tamanhos pequenos e máscaras
Comece com as guias de 16px e, em seguida, inspecione as visualizações de pesquisa, desktop e telefone em busca de detalhes perdidos, contraste fraco ou bordas inseguras.
O que as prévias mostram
Um ativo pode aparecer em tamanhos muito diferentes e dentro de diferentes formatos de interface. O mural de visualização ajuda a comparar essas condições, mas não instala o arquivo nem reproduz todas as versões do navegador e temas do dispositivo.
Guias do navegador
Testando o reconhecimento no menor tamanho de exibição comum e ao lado de um título de página truncado.
O espaçamento das guias, o plano de fundo e a seleção do favicon variam de acordo com o navegador, o sistema operacional e a densidade do dispositivo.
Pesquisa Google
Verificando se a marca permanece distinta ao lado do nome do site e do URL visível.
A maquete não garante que o Google rastreará, selecionará ou exibirá um favicon.
Marcadores e atalhos
Comparando a mesma arte em um tamanho de marcador compacto e um tamanho de área de trabalho maior.
O ícone salvo pode vir de diferentes arquivos declarados ou versões armazenadas em cache no dispositivo do visitante.
Telas iniciais do telefone
Encontrar imagens que ficam muito próximas dos limites dos ícones arredondados ou moldados.
Os ícones de produção para iOS e Android dependem do ícone apple-touch e dos ativos de manifest do aplicativo da web, não apenas do favicon da guia.
Lista de verificação de design de favicon
Uma visualização torna-se útil quando leva a uma decisão concreta de design. Trabalhe da menor superfície para fora e verifique o local implantado separadamente.
Comece com uma silhueta nítida de 16px
Remova contornos finos, letras minúsculas e detalhes internos que desaparecem em uma guia do navegador.
Use uma fonte quadrada de 48px ou maior
O Google exige um favicon quadrado de pelo menos 8×8 e recomenda uma imagem de resolução mais alta de pelo menos 48×48 para uso em superfícies.
Verifique fundos claros e escuros
Adicione contraste suficiente ou um fundo controlado para que a arte transparente não desapareça no cromo do navegador.
Adicione ícones dedicados à tela inicial
Use um ícone Apple Touch e ícones de manifest de aplicativos da web apropriados quando as visualizações maiores do telefone forem importantes para o seu produto.
Perguntas frequentes sobre visualização de favicon
O que é uma ferramenta de visualização de favicon?
Ele coloca um favicon carregado em vários contextos representativos de navegador, pesquisa, favoritos, desktop e telefone para que você possa avaliar o tamanho, o contraste e o corte antes de publicá-lo.
Esta ferramenta altera ou carrega meu favicon?
Não. Ele lê a imagem localmente no seu navegador e a utiliza apenas nos modelos de visualização. Não redimensiona, baixa, publica ou envia a imagem para um servidor.
A visualização corresponderá exatamente ao Chrome, Safari ou Google?
Não. As interfaces do navegador e da plataforma mudam entre versões, temas e dispositivos. As visualizações reproduzem a escala importante e o contexto circundante, e não um resultado garantido pixel por pixel.
Posso visualizar um arquivo favicon.ico?
Sim. A ferramenta lê o diretório ICO e usa sua maior imagem incorporada para visualização. O arquivo ICO original não é modificado.
Por que meu favicon parece desfocado em 16×16?
Linhas finas, letras minúsculas e ilustrações detalhadas perdem definição quando reduzidas a poucos pixels. Simplifique a silhueta, aumente o contraste e inspecione uma versão de 16px feita sob medida.
Como isso é diferente do Verificador de Favicon?
O Favicon Preview examina um design local antes de publicar. O Favicon Checker inspeciona os arquivos e declarações de links já veiculados por um site público.