Transforme Seu Logo Em Um Favicon
Seu logo tem um logotipo, um símbolo e detalhes finos. Com 16 pixels de largura, só um deles sobrevive. Escolha-o deliberadamente antes de exportar qualquer coisa.
Por que o logo completo falha
Um favicon é renderizado tão pequeno quanto 16 pixels de largura. Um logo completo com um logotipo e detalhes finos vira uma mancha cinza nesse tamanho: o texto fica ilegível e o detalhe colapsa em papa.
A solução é tratar o favicon como seu próprio recurso derivado do logo, não o logo em si. A maioria dos favicons fortes é um símbolo, um monograma ou uma única letra, porque é só isso que sobrevive no tamanho de aba.
Do logo ao favicon
- 1
Extraia um elemento
Pegue o símbolo do seu logo, ou uma única inicial se o seu logo for um logotipo. Descarte o texto e qualquer coisa decorativa.
- 2
Simplifique até ficar legível em pequeno
Remova linhas finas, gradientes e detalhes internos. Busque uma única forma marcante com alto contraste contra o fundo.
- 3
Projete primeiro no menor tamanho
Dê zoom em 16x16 e torne-o legível ali. Se funciona a 16 funciona em todo lugar. Ampliar um design pequeno é fácil; o contrário não é.
- 4
Dê um fundo se necessário
Uma marca compacta costuma se ler melhor sobre um fundo sólido ou levemente espaçado do que flutuando de borda a borda. Isso também ajuda o apple-touch-icon, que o iOS preenche sobre preto.
- 5
Exporte o conjunto completo
Gere o favicon.ico, os PNGs e o apple-touch-icon a partir da marca final para que cada tamanho venha da mesma arte limpa.
Regras de design que sobrevivem ao encolhimento
Alto contraste primeiro. A marca precisa se separar fortemente do fundo, porque variações tonais sutis desaparecem em tamanhos pequenos. Primeiro plano marcante, fundo simples.
Uma forma, não três. Um favicon que se lê como uma única silhueta funciona. Empilhe múltiplos elementos e eles se fundem em ruído. Se você está em dúvida entre duas ideias, publique a mais simples.
Observe o espaço negativo. Lacunas finas entre formas se fecham a 16 pixels e a marca vira um borrão. Dê espaço às formas, ou engrosse-as para que as lacunas permaneçam abertas.
Perguntas frequentes
Posso usar meu logo como favicon?
Não o logo completo. Extraia o símbolo ou uma única inicial e simplifique até ficar legível a 16 pixels, depois exporte o conjunto de favicon a partir disso. Um logotipo completo vira papa na aba.
Como faço um favicon a partir de um logo?
Pegue um elemento do logo, tire os detalhes finos, ajuste a 16x16 para legibilidade, adicione um fundo se a marca for compacta, depois gere cada tamanho de favicon a partir da arte final.
Por que meu logo fica borrado como favicon?
Ele tem detalhes demais para 16 pixels. Linhas finas, texto e gradientes colapsam nesse tamanho. Simplifique para uma única forma marcante e de alto contraste.
Em que tamanho devo projetar um favicon?
Projete primeiro no menor tamanho, 16x16. Se a marca se lê ali, ela se lê em cada tamanho maior. Ampliar um design pequeno e limpo é seguro; encolher um detalhado não é.