É fácil subestimar um pacote favicon. Muitas pessoas pensam nele como uma pequena imagem num separador do navegador, mas um site moderno geralmente precisa de um pequeno conjunto de recursos relacionados. O ícone do separador do navegador é apenas uma superfície. Os atalhos móveis, os ícones do Android, os ícones de toque da Apple e as referências de manifesto podem necessitar dos seus próprios ficheiros.
O objetivo prático não é recolher todas as variantes possíveis de ícones. O objetivo é enviar um pacote focado que cubra navegadores comuns e superfícies semelhantes a aplicações, sem transformar a preparação de lançamento em trabalho manual de exportação. O Favicon/App Icon Generator no Converty é construído em torno deste trabalho: comece com uma imagem quadrada e descarregue um pacote com os ficheiros comuns juntos.
O ficheiro principal ainda é favicon.ico
favicon.ico continua a ser o ficheiro favicon mais familiar. É o ativo que as pessoas esperam ver associado aos separadores do navegador, aos favoritos e às convenções de favicon mais antigas.
Mesmo quando um website também inclui ícones PNG e um manifesto web, o favicon.ico continua a ser útil porque cobre um caminho tradicional que muitos navegadores e ferramentas compreendem. Para um site simples, é geralmente o primeiro ficheiro que alguém verifica quando o ícone do separador não parece correto.
Os ícones PNG cobrem superfícies modernas
Os pacotes de ícones modernos incluem frequentemente ficheiros PNG em vários tamanhos. Diferentes navegadores, atalhos e contextos de visualização podem utilizar dimensões diferentes. Exportar apenas um tamanho pode fazer com que o browser ou o dispositivo dimensione a imagem, o que pode fazer com que os ícones pequenos pareçam suaves ou aglomerados.
É por isso que a arte original é importante. Uma imagem quadrada, simples e legível produz melhores resultados em todo o pacote do que um gráfico detalhado comprimido em vários tamanhos. O Converty não pode transformar um logótipo complexo numa marca minúscula perfeita, mas pode remover o trabalho repetitivo de exportação assim que tiver uma fonte adequada.
Os ícones de toque da Apple e os ícones do Android servem superfícies diferentes
Os ícones de toque da Apple são utilizados para as superfícies de atalho dos dispositivos Apple. Os ícones prontos para Android suportam casos de utilização de instalação e atalhos relacionados em superfícies orientadas para Android.
Estes ficheiros são fáceis de esquecer porque nem sempre são visíveis durante uma verificação normal do browser do ambiente de trabalho. O site pode parecer bom num separador e ainda perder recursos importantes depois de alguém o guardar na tela inicial do dispositivo. Um pacote completo torna isso menos provável.
Se estiver a decidir se um ícone de toque da Apple está separado de um favicon, leia Apple Touch Icon vs Favicon: o que deve incluir um site moderno?.
O manifesto une superfícies semelhantes a aplicações
Um iniciador site.webmanifest fornece a uma aplicação web ou a um website um local para descrever ícones e metadados de visualização relacionados. Não substitui os próprios ficheiros de ícones. Aponta para eles para que as superfícies compatíveis possam compreender quais os ativos disponíveis.
É por isso que o Converty inclui um manifesto inicial no pacote. O ficheiro gerado fornece um ponto de partida prático, mas ainda precisa de colocar os ativos no seu projeto e referenciá-los na configuração do website.
Uma lista de verificação prática do pacote favicon
Um pacote de favicon focado deve geralmente incluir:
favicon.ico- vários tamanhos de ícones PNG
- Saída de ícone de toque da Apple
- Saída de ícones pronta para Android
- um principiante
site.webmanifest
Isto é suficiente para muitos pequenos sites, lançamentos SaaS, páginas de marketing e projetos de documentação. As definições mais especializadas podem precisar de recursos extra específicos da plataforma, mas o pacote comum elimina o trabalho de rotina.
Abra o Favicon/App Icon Generator quando tiver uma imagem de origem quadrada e necessitar dos ficheiros comuns do pacote favicon agrupados numa exportação. Para um fluxo de trabalho mais amplo, leia Como gerar um pacote completo de favicon a partir de uma imagem.
