Ferramenta 04

Favicon completo

Do logo ou de uma inicial para o pacote inteiro: ICO, ícones Apple e Android, manifest e as tags do head.

Usar meu kit

Origem

Letra ou siglaFonte

Fundo

Letra

Forma na aba

Respiro interno8%

Ícone Android (maskable)

Fundo

Cor do tema

Zona segura18%Nome do app (manifest)

favicon.ico (16, 32, 48), favicon-32.png, apple-touch-icon 180, ícones 192 e 512, maskable, site.webmanifest, favicon.svg.

Cole dentro do <head>

<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#0F1012">

site.webmanifest

{
  "name": "Minha Marca",
  "short_name": "Minha Marca",
  "icons": [
    {
      "src": "/icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icon-512.png",
      "sizes": "512x512",
      "type": "image/png"
    },
    {
      "src": "/icon-maskable-512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
  ],
  "theme_color": "#0F1012",
  "background_color": "#0F1012",
  "display": "standalone"
}