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

NavegadorTag Link: “rel” / “type”Formatos Aceitos
IE 8 ou anterioresrel=”shortcut icon”.ico
IE 9, IE 10rel=”icon” type=”image/x-icon”.ico
IE 11rel=”icon” type=”image/x-icon ou png ou gif.ico, .png, .gif
Chromerel=”icon” type=”image/x-icon ou png ou gif.ico, .png, .gif
Firefoxrel=”icon” type=”image/x-icon ou png ou gif.ico, .png, .gif, .svg*
Safarirel=”icon” type=”image/x-icon ou png ou gif.ico, .png, .gif
Operarel=”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:

TamanhoNomeUtilização
32×32favicon-32.pngPadrão para a maioria dos navegadores
57×57favicon-57.pngPadrão para a tela inicial do iOS e iPhone até a 3 geração
76×76favicon-76.pngTela inicial iPad
96×96favicon-96.pngGoogleTV
120×120favicon-120.pngiPhone de retina
128×128favicon-128.pngChrome Web Store icon e Tela de iniciar do Windows 8
144×144favicon-144.pngÍcone metro do IE10 *
152×152favicon-152.pngiPad
167×167favicon-167.pngiPad de Retina
180×180favicon-180.pngiPhone 6 plus
192×192favicon-192.pngRecomendação do Google Developer Web App
195×195favicon-195.pngOpera Speed Dial (Versão 15 e anteriores)
196×196favicon-196.pngAtalho na tela inicial do Chrome no Android
228×228favicon-228.pngOpera Coast icon
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 seu comentário!