Um Favicon Deve Ter Fundo Transparente?
Um fundo transparente serve para o favicon da aba do navegador, deixando a marca ficar de forma limpa sobre uma interface clara ou escura. Mas o iOS ignora a transparência no apple-touch-icon e o compõe sobre preto, então um ícone de tela inicial transparente pode virar uma forma flutuando sobre um quadrado preto. Use transparência para o favicon da aba, e um fundo sólido para o apple-touch-icon e outros tamanhos da tela inicial.
Transparente onde ajuda, sólido onde não
Para o favicon da aba, a transparência é uma vantagem: a marca se adapta a qualquer cor que a interface do navegador tenha, clara ou escura. Essa é a única superfície em que um fundo transparente genuinamente ajuda.
Os ícones de tela inicial são o oposto. O iOS descarta o canal alfa e compõe o apple-touch-icon sobre preto, e os ícones maskable do Android querem um fundo com sangramento total para recortar em um formato. Em ambos, uma origem transparente fica errada.
Perguntas frequentes sobre transparência de favicon
Meu favicon deve ter fundo transparente?
Para a aba do navegador, sim. Ela se adapta a interfaces claras e escuras. Para o apple-touch-icon e outros tamanhos da tela inicial, não. Use um fundo sólido.
Por que o ícone da minha tela inicial do iOS está em um quadrado preto?
Porque o iOS ignora a transparência e compõe o apple-touch-icon sobre preto. Reexporte esse ícone com um preenchimento de fundo sólido.
Ícones maskable precisam de um fundo?
Sim. Ícones maskable são recortados em um formato pelo launcher, então precisam de um fundo com sangramento total com a marca mantida dentro da zona de segurança.