Os favoritos substituem o ícone do globo na barra de endereço.
Crédito da imagem: r0mu / iStock / Getty Images
Um favicon é uma forma 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 da 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 com guias 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 guias.
Passo 1
Projete 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 do 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 ícone para oferecer suporte a vários tamanhos. Se você vai fazer apenas uma versão, escolha um tamanho de 16 por 16 pixels.
Vídeo do dia
Passo 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 compatível. Além disso, os programas de compactador de ícones podem não funcionar com imagens em outros formatos. Os Favicons também oferecem suporte a arquivos GIF e ICO.
etapa 3
Empacote seu arquivo PNG exportado em um arquivo ICO com um programa conversor ICO. Um programa conversor de ícone processa um favicon PNG, formata-o para vários tamanhos diferentes 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.
Passo 4
Faça login no serviço de hospedagem do seu site e carregue o arquivo PNG ou ICO para o servidor de mídia do seu site. Copie o URL do arquivo enviado; você vai precisar dele para anexar o favicon ao site.
Etapa 5
Abra o programa de edição de seu site e adicione o seguinte código, modificado com a URL do arquivo favicon conforme indicado, à seção de seu site.
Para arquivos PNG:
Para arquivos ICO:
A menos que esteja usando um site controlado por CMS ou inclua uma seção baseada em arquivo, você terá que adicionar o código a cada página em que deseja exibir 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. Como alternativa, 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 um 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 de 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.
