Um favicon é uma maneira criativa e prática de adicionar um toque visual sutil à presença do seu site. Favicons são pequenas imagens que os navegadores da Web usam nas guias de página e nas barras de endereço. Eles exibem um logotipo ou imagem associada ao site que atua como um identificador visual da marca ao lado do título ou URL. Os favicons são identificadores de site particularmente úteis na navegação por abas porque o espaço de texto disponível usado para títulos de página diminui para quase nada à medida que o usuário abre mais abas.
Etapa 1
Crie o ícone que deseja usar em um programa de edição de fotos ou gráficos. Você pode pegar um logotipo ou imagem existente associado ao seu site ou marca e ajustá-lo para aderir aos padrões de favicon. Os favicons sempre usam dimensões quadradas e têm um tamanho máximo suportado de 256 por 256 pixels. Corte e dimensione a imagem para caber em um quadrado de 256 por 256 pixels se você for usar um compactador de ícones para oferecer suporte a vários tamanhos. Se você for fazer apenas uma versão, escolha um tamanho de 16 por 16 pixels.
Etapa 2
Exporte o gráfico do ícone como um arquivo de imagem PNG do programa de design gráfico. PNG é o formato de imagem padrão do W3C para favicons. Alguns navegadores podem exibir arquivos JPG como favicons, mas o padrão não é oficialmente suportado. Além disso, os programas de compactação de ícones podem não funcionar com imagens em outros formatos. Os favicons também suportam arquivos GIF e ICO.
Etapa 3
Empacote seu arquivo PNG exportado em um arquivo ICO com um programa conversor ICO. Um programa de conversão de ícones processa um favicon PNG, formata-o para vários tamanhos de favicon amplamente suportados e os incorpora em um único arquivo. Os arquivos ICO fornecem favicons de resolução mais alta do que 16 por 16 pixels para dispositivos que os suportam.
Etapa 4
Faça login no serviço de hospedagem do seu site e carregue o arquivo PNG ou ICO no servidor de mídia do seu site. Copie o URL do arquivo carregado; você vai precisar dele para anexar o favicon ao site.
Etapa 5
Abra o programa de edição do seu site e adicione o código a seguir, modificado com o URL do arquivo favicon conforme indicado, ao
seção do seu site.
Para arquivos PNG:
Para arquivos ICO:
A menos que você esteja usando um site controlado por CMS ou inclua um arquivo baseado
seção, você terá que adicionar o código a cada página que você deseja destacar o ícone. O favicon aparece depois que você salva e atualiza as páginas do site.
Dica
Programas de edição de fotos como Photoshop e Corel Draw funcionam bem para projetar e formatar o ícone. Alternativamente, você pode usar programas gratuitos como Paint.net e Pixlr.
Aviso
Alguns navegadores associam automaticamente um arquivo de imagem localizado no diretório /favicon como favicon; no entanto, a organização W3C desencoraja essa prática porque não é um padrão com suporte universal e é contrário aos princípios da arquitetura da Web. Além disso, muitos serviços de hospedagem na Web e sistemas CMS não permitem que o usuário coloque conteúdo de mídia fora dos diretórios de arquivos de mídia, tornando essa prática impossível.
