Nada é enviado.
Você recebe favicon.ico, os tamanhos PNG, um Apple touch icon, ícones Android e maskable, um manifesto web e o HTML para colar, tudo em um só .zip. Crie um conjunto completo de ícones para o seu site a partir de uma letra ou de uma imagem. É grátis e privado.
Como criar um favicon
- Em Começar de, escolha Uma letra ou Uma imagem. Para uma imagem, toque em Escolher uma imagem.
- Para uma letra, digite suas Letras e escolha o Peso, a Fonte, a Cor do texto, o Estilo e o Fundo.
- Escolha a Forma: Quadrado, Arredondado ou Círculo. Ajuste o Espaçamento interno ou mantenha o fundo transparente.
- Em Seu site, adicione o Nome do site ou app, o Nome curto e a Pasta de ícones.
- Confira a Prévia, que mostra o ícone em uma aba do navegador, nos resultados de busca e em um celular.
- Toque em Copiar HTML para o código a colar na sua página e em Baixar tudo (.zip) para os arquivos.
Para que serve cada arquivo
O favicon.ico guarda versões de 16, 32 e 48 pixels em um só arquivo e funciona em todos os navegadores, inclusive nos antigos. Os favicons PNG dão aos navegadores modernos um ícone de aba nítido. O apple-touch-icon.png é usado quando alguém adiciona o seu site à tela inicial de um iPhone ou iPad, e os ícones Android e o site.webmanifest são usados quando o seu site é instalado no Android ou como app.
O que é um ícone maskable?
O Android corta os ícones de app em círculos, squircles ou quadrados arredondados, dependendo do celular. Um ícone maskable preenche o quadrado inteiro com a cor de fundo e mantém o logotipo dentro dos 80% do meio, para nada importante ser cortado seja qual for o formato do celular.
Dicas para um favicon claro
Em 16 pixels, o detalhe desaparece. Uma letra em negrito, uma marca simples ou a parte mais reconhecível do seu logotipo funciona melhor que o logotipo completo com palavras. Um forte contraste entre a marca e o fundo ajuda a destacá-la entre as outras abas, nos temas claro e escuro do navegador.
Adicionando os ícones ao seu site
- Descompacte os arquivos e envie-os para a pasta que você nomeou em Pasta de ícones, normalmente a raiz do seu site.
- Cole o HTML copiado na seção head de cada página.
- Recarregue a página e limpe o cache do navegador se o ícone antigo continuar aparecendo. Os navegadores guardam favicons por muito tempo.
- Comece com uma imagem quadrada de pelo menos 512 pixels de largura para todos os tamanhos ficarem nítidos.
Quem usa
Donos de pequenos negócios com um site novo, freelancers que criam sites para clientes, blogueiros e estudantes que colocam um projeto online. Para redimensionar ou converter o seu logotipo antes, experimente o conversor de imagens.
Perguntas
Minha imagem é enviada?
Não. Os ícones são feitos no seu navegador.
Quais formatos de imagem posso usar?
PNG, JPG, SVG e WebP.
Por que meu favicon antigo ainda aparece?
Os navegadores guardam favicons em cache por muito tempo. Limpe o cache ou abra o site em uma janela privada para conferir.