Adicione seu logotipo e alguns dados para obter todos os ícones, uma imagem de compartilhamento e as tags head em um só .zip. Você recebe favicon.ico, os ícones PNG e Apple, um manifesto web, uma imagem de compartilhamento de 1200 por 630 e as tags head para colar. Sua imagem nunca sai deste dispositivo. É grátis.
Como criar seus ícones e tags, passo a passo
- Escolha um Logotipo ou imagem, ou solte na página. Um logotipo quadrado de 512 px ou mais funciona melhor.
- Escolha o estilo da Imagem de compartilhamento: Logotipo sobre cor ou Foto inteira.
- Preencha o Nome do site, o Título da página, a Descrição, o Endereço da página e o usuário do X.
- Escolha a Cor de fundo e a Cor do tema, que colore a barra do navegador do celular.
- Confira a prévia do cartão de compartilhamento e dos ícones.
- Toque em Baixar .zip e Copiar HTML.
- Envie os arquivos para a sua pasta de arquivos e depois cole as tags no head das suas páginas.
O que há no pacote
O favicon.ico guarda ícones de 16, 32 e 48 pixels para todo navegador. favicon-16.png e favicon-32.png são as versões nítidas que os navegadores modernos usam. O apple-touch-icon.png é para a tela inicial do iPhone e do iPad, e os ícones Android e o site.webmanifest são usados quando alguém instala o seu site. O og-image.png é a imagem mostrada quando o seu link é compartilhado, e o head.html tem todas as tags prontas para colar.
Obtendo uma boa imagem de compartilhamento
Apps de chat e redes sociais mostram a imagem em cerca de 1200 × 630 e depois a cortam ou reduzem para cartões menores, então mantenha o título curto e o logotipo claro. O estilo Logotipo coloca o seu logotipo sobre a cor de fundo ao lado do título. O estilo Foto preenche o cartão com a sua imagem e coloca o título sobre uma sombra suave, o que funciona melhor com fotos largas. As imagens de compartilhamento precisam de um endereço https:// completo, então preencha o endereço da página.
Conferindo se funciona
Depois de enviar os arquivos, abra sua página e veja o código-fonte para ver as tags. Muitos sites guardam em cache os cartões de compartilhamento, então, se uma imagem antiga ainda aparece, adicione uma versão ao endereço da imagem, como og-image.png?v=2, ou peça à ferramenta de prévia de links da plataforma para buscar a página de novo.
Dicas
- Use um logotipo simples que continue claro em 16 pixels.
- Escolha uma cor de fundo que combine com a sua marca.
- Escreva uma descrição curta que dê vontade de clicar.
- Confira sua página depois com a verificação pré-lançamento.
Para um conjunto de tags mais completo, como robots e detalhes de artigo, veja o gerador de meta tags e, só para um ícone, o gerador de favicon.
Quem usa
Pessoas que lançam um site pessoal, um portfólio, uma loja ou a página de uma pequena empresa e desenvolvedores que querem todos os ícones e arquivos de compartilhamento criados de uma vez.
Perguntas
Onde coloco os arquivos?
Envie tudo do .zip para a pasta de arquivos do seu site e depois cole as tags no head das suas páginas.
Preciso de todos os ícones?
Usar o conjunto completo faz seu ícone aparecer corretamente nos navegadores, na tela inicial do celular e quando seu site é instalado.
Meu logo é enviado?
Não. Tudo é feito no seu navegador.