Gerador de Favicon - todos os tamanhos e o HTML
Gerador de favicon
Tamanhos
HTML para o seu head
Coloque os arquivos na raiz do site e cole isto dentro do head.
O que esta ferramenta faz
O favicon deixou de ser um único quadrado de 16 pixels há anos. Hoje um site precisa de um punhado de tamanhos para abas, atalhos do Windows, telas iniciais de iPhone e avisos de instalação do Android, além da marcação que aponta para eles. Esta página cria tudo a partir de uma imagem, no seu navegador.
Como usar
- 1 Solte uma imagem quadrada, de preferência 512 px ou maior.
- 2 Confira cada tamanho na pré-visualização e defina um fundo se a sua imagem for transparente.
- 3 Baixe o zip, descompacte na raiz do site e cole o HTML.
Desenhe para 16 pixels, não para o logo
No tamanho de uma aba, um favicon tem mais ou menos a largura de um ponto final desta página. Logotipos com texto viram manchas cinzentas e linhas finas somem por completo. Uma única letra, uma forma simples ou o pedaço mais reconhecível do logo sobrevive a essa escala; o logo inteiro quase nunca.
| Tamanho | Onde é usado |
|---|---|
| 16×16 | Aba do navegador, barra de favoritos |
| 32×32 | Aba em telas de alta densidade, barra de tarefas |
| 48×48 | Atalhos do Windows e blocos do site |
| 180×180 | Tela inicial do iPhone e iPad |
| 192×192 | Tela inicial do Android e alternador de apps |
| 512×512 | Aviso de instalação e tela de abertura |
PNG basta; ICO é resquício
Todo navegador em uso hoje lê favicons PNG, então um punhado de arquivos PNG e as tags link certas cobrem a web. O contêiner .ico existe porque o Internet Explorer o procurava na raiz do site; a não ser que você precise dar suporte a algo antiquíssimo, pode pular.
A transparência se comporta diferente no celular
Numa aba do navegador, um ícone transparente assenta bem sobre o que o tema oferecer. Na tela inicial de um iPhone, o mesmo arquivo ganha um quadrado preto sólido atrás, porque o iOS não compõe a transparência ali. Defina uma cor de fundo e o ícone parece intencional nos dois lugares.
Por que o navegador ainda mostra o antigo
Favicons ficam em cache de forma agressiva e por muito tempo, às vezes além de um refresh normal. Abra o arquivo do ícone diretamente para confirmar que o novo está lá e depois cheque numa janela privada. Mudar o nome do arquivo, ou acrescentar uma versão a ele, é o jeito confiável de forçar a atualização.