Favicon, “Favourite Icon” (Ícone Favorito), é uma imagem utilizada pelos navegadores para representar graficamente uma página na internet. Antigamente o único formato aceito era o “.ico” e no tamanho 16×16 pixels, mas hoje em dia podemos utilizar outros formatos como “.png”, “.jpg” e “.svg” e tamanhos. Atualmente o favicon é comumente utilizado para:

  • Barra de navegação
  • Barra de favoritos
  • Ícones de área de trabalho
  • Ícone de tela inicial mobile

A maioria dos navegadores buscará por padrão um arquivo na raiz do seu site chamado “favicon.ico” porém podemos fornecer outro local e tamanhos do ícone através da tag html <link />.

Tag HTML Link

Se não queremos utilizar o método padrão dos navegadores para disponibilizar o ícone e também para fornecer variações de tamanhos utilizamos a tag html <link />.

<link rel="" type="" sizes="" href="">

Rel

A propriedade “rel”significa “relationship” (relacionamento) e é usada para indicar qual a relação do link em questão com a página. Em navegadores muito antigos se utilizava o valor “shortcut icon” porém vamos focar nos modernos e mais utilizados, então utilizaremos o valor “icon”.

<link rel="icon" type="" sizes="" href="">

Type

A propriedade “type” indica o tipo de formato MIME do arquivo que está sendo referenciado. Por exemplo: Para um arquivo no formato “.ico” utilizamos “image/x-icon”, já no formato “.png” seria “image/png”. Embora não seja uma propriedade obrigatória é recomendada para dar suporte a navegadores antigos (IE9 e IE10).

<link rel="icon" type="image/png" sizes="" href="">

Sizes

A propriedade “sizes” é utilizada para indicar o tamanho do ícone sendo referenciado. Como podemos fornecer versões otimizadas para diferente usos, aqui falamos para o navegador qual o tamanho e assim ele sabe qual o melhor ícone usar em cada caso.

<link rel="icon" type="image/png" sizes="228x228" href="">

Href

A propriedade “href” indica o local no servidor do arquivo referenciado.

<link rel="icon" type="image/png" sizes="228x228" href="/icons/favicon.ico">

Colinha

Navegador Tag Link: “rel” / “type” Formatos Aceitos
IE 8 ou anteriores rel=”shortcut icon” .ico
IE 9, IE 10 rel=”icon” type=”image/x-icon” .ico
IE 11 rel=”icon” type=”image/x-icon ou png ou gif .ico, .png, .gif
Chrome rel=”icon” type=”image/x-icon ou png ou gif .ico, .png, .gif
Firefox rel=”icon” type=”image/x-icon ou png ou gif .ico, .png, .gif, .svg*
Safari rel=”icon” type=”image/x-icon ou png ou gif .ico, .png, .gif
Opera rel=”icon” type=”image/x-icon ou png ou gif .ico, .png, .gif

Dispositivos Mobile

Alguns navegadores mobiles permitem a criação de atalhos na tela inicial e para isso podemos fornecer imagens com qualidade e tamanhos otimizados:

Dispositivo / NavegadorTag Link “rel”Tamanhos (size)
Apple / Safarirel=”apple-touch-icon” or
rel=”apple-touch-icon-precomposed”
76×76 – iPad 2 e iPad mini
120×120 – iPhone 4s, 5, 6
152×152 – iPad (retina) 
180×180 – iPhone 6 Plus
Apple / Opera Coastrel=”icon”
228×228
Android / Chromerel=”icon”
192×192

Tamanhos mais utilizados

Para finalizar separei uma lista com a maioria dos tamanhos utilizadas e por quem:

Tamanho Nome Utilização
32×32 favicon-32.png Padrão para a maioria dos navegadores
57×57 favicon-57.png Padrão para a tela inicial do iOS e iPhone até a 3 geração
76×76 favicon-76.png Tela inicial iPad
96×96 favicon-96.png GoogleTV
120×120 favicon-120.png iPhone de retina
128×128 favicon-128.png Chrome Web Store icon e Tela de iniciar do Windows 8
144×144 favicon-144.png Ícone metro do IE10 *
152×152 favicon-152.png iPad
167×167 favicon-167.png iPad de Retina
180×180 favicon-180.png iPhone 6 plus
192×192 favicon-192.png Recomendação do Google Developer Web App
195×195 favicon-195.png Opera Speed Dial (Versão 15 e anteriores)
196×196 favicon-196.png Atalho na tela inicial do Chrome no Android
228×228 favicon-228.png Opera Coast icon

Sites geradores de Favicons

Para facilitar nossas vidas existem sites que geram todos os principais tamanhos automaticamente:

Author

Um nerd nada tradicional… Desenvolvedor web full-stack, escritor amador e inventor nas horas vagas. Apaixonado por tecnologia e entusiasmado por projetos de código aberto!

Deixe um comentário

avatar
  Subscribe  
Notify of