Interno · Desenvolvimento

Favicons e meta tags

O conjunto completo de ícones de navegador e de app, mais o bloco de head que faz o link renderizar certo em qualquer lugar.

Acesso interno

Entre com a sua conta Biglink

Esta página é uma ferramenta interna. Entre com o seu e-mail @biglink.io para continuar.

Cole no head

Este bloco cobre navegador, aba, atalho de celular, tile do Windows e prévia de link em rede social. Os caminhos já apontam para o CDN, então funciona em qualquer projeto sem copiar arquivo nenhum.

<!-- Biglink :: favicons, manifest e SEO -->
<link rel="icon" type="image/svg+xml" href="https://cdn.biglink.io/brand/v1/favicons/favicon.svg">
<link rel="icon" type="image/png" sizes="96x96" href="https://cdn.biglink.io/brand/v1/favicons/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="32x32" href="https://cdn.biglink.io/brand/v1/favicons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="https://cdn.biglink.io/brand/v1/favicons/favicon-16x16.png">
<link rel="shortcut icon" href="https://cdn.biglink.io/brand/v1/favicons/favicon.ico">
<link rel="apple-touch-icon" sizes="180x180" href="https://cdn.biglink.io/brand/v1/favicons/apple-touch-icon.png">
<link rel="manifest" href="https://cdn.biglink.io/brand/v1/favicons/site.webmanifest">
<meta name="theme-color" content="#ffffff">
<meta name="msapplication-TileColor" content="#00ed82">
<meta name="msapplication-config" content="https://cdn.biglink.io/brand/v1/favicons/browserconfig.xml">
<!-- Open Graph / SEO -->
<meta property="og:image" content="https://cdn.biglink.io/brand/v1/favicons/og-image.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://cdn.biglink.io/brand/v1/favicons/og-image.png">

Os arquivos

14 arquivos
Formato
apple-touch-icon.png180 x 180 · 5 KBBaixar
favicon-16x16.png16 x 16 · 618 BBaixar
favicon-32x32.png32 x 32 · 1 KBBaixar
favicon-48x48.png48 x 48 · 2 KBBaixar
favicon-96x96.png96 x 96 · 4 KBBaixar
icon-192.png192 x 192 · 9 KBBaixar
icon-512.png512 x 512 · 23 KBBaixar
icon-maskable-192.png192 x 192 · 5 KBBaixar
icon-maskable-512.png512 x 512 · 13 KBBaixar
icon-round-512.png512 x 512 · 31 KBBaixar
mstile-150x150.png150 x 150 · 4 KBBaixar
og-image.png1200 x 630 · 37 KBBaixar
favicon.svg512 x 512 · 711 BBaixar
favicon.ico6 KBBaixar

Nenhum arquivo com esses filtros.

Configuração

site.webmanifest

Nome, ícones e cores para instalar como app no celular. Os caminhos dentro dele são relativos à própria pasta, então funciona apontando direto para o CDN.

Ver o manifest

browserconfig.xml

Tile do Windows, com o mstile-150x150.png e a cor de fundo.

Ver o browserconfig

og-image.png

1200 por 630, a imagem que aparece quando alguém cola o link no WhatsApp, no LinkedIn ou no Slack. Troque por uma específica se a página merecer.

Sobre o theme-color

O manifest declara #ffffff, que serve para projeto de fundo claro. Em página de fundo escuro, como as deste CDN, sobrescreva com <meta name="theme-color" content="#03614d"> depois do link do manifest. A barra do navegador no celular segue a última declaração.