03Símbolo e app icon
O símbolo vira ícone de app sem perder o desenho.
O ícone é o símbolo off-white com a alça rosa sobre night, num quadrado de cantos arredondados. É a mesma peça na home screen, na loja, na aba do navegador e no avatar das redes.
Na home screen
No iOS o sistema aplica a máscara contínua sobre o arquivo quadrado de 1024 px. No Android o ícone adaptativo é cortado pela máscara do aparelho, aqui em círculo.
Os outros ícones da tela são neutros de propósito: só o da Shake carrega cor.
- iOS
- 1024 × 1024, sem transparência
- Android
- frente + fundo, 108 dp
- Nome sob o ícone
- Shake
- Fundo do ícone
- night #121212
Abre em night, com o símbolo no centro. No Android 12 em diante, o logo pequeno entra embaixo como imagem de marca.
Medidas
O símbolo da splash tem 96 dp de altura. Sem texto, sem animação longa: a splash dura o tempo de abrir o app e o logo gira uma vez só quando a abertura passa de 1 segundo.
- Fundo
- night #121212
- Símbolo
- 96 dp, negativo
- Android 12
- ícone 240 dp, círculo 160
- Imagem de marca
- logo com 20 dp
No iOS a notificação usa o ícone do app. No Android, o ícone pequeno é a silhueta do símbolo numa cor só.
Ícone pequeno do Android
O Android pinta o ícone pequeno só pelo alfa. Por isso ele é a silhueta mono do símbolo, com 20 dp de desenho dentro da caixa de 24 dp, e a cor do círculo vem do app (rosa).
- iOS
- ícone do app
- Android
- silhueta mono, 24 dp
- Cor de destaque
- rosa #FF91F8
Na loja, o ícone aparece grande ao lado do nome. O fundo night se destaca no branco da loja.
Abaixo de 24 px o símbolo usa o traço reforçado para não sumir. O quadrado night garante leitura nos navegadores claro e escuro.
Arquivos
O favicon vai em SVG, com PNG de 16, 32 e 180 px como reserva. O apple-touch-icon de 180 px é o ícone inteiro, sem cantos.
- favicon.svg
- 32 px, traço normal
- 16 px
- traço reforçado 1,8
- apple-touch-icon
- 180 px
- Manifesto
- 192 e 512 px
O mesmo ícone serve para instalar a versão web. A versão maskable deixa o símbolo dentro do círculo de 80%.
No Instagram o avatar é redondo; no LinkedIn, quadrado com cantos pequenos. O ícone do app funciona nos dois.
Recorte
No círculo, o símbolo continua dentro da área segura porque ocupa 62,5% da altura. Não use o logo horizontal como avatar: fica pequeno demais.
- 320 × 320, recorte redondo
- 400 × 400
- Arquivo
- shake-app-icon-512.png