Favicon - Favicon

Um favicon ( / f æ v . ˌ k ɒ n / ; curto para ícone favorito ), também conhecido como um ícone de atalho , ícone do site , ícone do guia , ícone URL , ou ícone de marcador , é um arquivo contendo um ou mais pequeno ícones , associados a um determinado site ou página da web . Um web designer pode criar esse ícone e carregá-lo em um site (ou página da web) de vários meios, e navegadores gráficos farão uso dele. Os navegadores que oferecem suporte a favicon normalmente exibem o favicon de uma página na barra de endereços do navegador (às vezes também no histórico) e ao lado do nome da página em uma lista de favoritos . Os navegadores que oferecem suporte a uma interface de documento com guias geralmente mostram o favicon de uma página ao lado do título da página na guia, e os navegadores específicos do site usam o favicon como um ícone da área de trabalho .

O favicon da Wikipedia , mostrado em uma versão mais antiga do Firefox (de 2008)

História

Em março de 1999, a Microsoft lançou o Internet Explorer 5 , que oferecia suporte a favicons pela primeira vez. Originalmente, o favicon era um arquivo chamado favicon.icocolocado no diretório raiz de um site. Foi utilizado em Internet Explorer 's favoritos (bookmarks) e ao lado da URL na barra de endereço se a página foi marcada. Um efeito colateral foi que o número de visitantes que adicionaram a página aos favoritos pode ser estimado pelas solicitações do favicon. Esse efeito colateral não funciona mais, pois todos os navegadores modernos carregam o arquivo favicon para exibir em sua barra de endereço da web, independentemente de o site estar ou não marcado.

estandardização

O favicon foi padronizado pelo World Wide Web Consortium (W3C) na recomendação HTML 4.01, lançada em dezembro de 1999, e posteriormente na recomendação XHTML 1.0, lançada em janeiro de 2000. A implementação padrão usa um elemento de link com um relatributo na <head>seção do documento para especificar o formato do arquivo, o nome e a localização do arquivo. Ao contrário do esquema anterior, o arquivo pode estar em qualquer diretório de site da Web e ter qualquer formato de arquivo de imagem.

Em 2003, o .icoformato foi registrado por um terceiro na Internet Assigned Numbers Authority (IANA) sob o tipo MIME image/vnd.microsoft.icon . No entanto, ao usar o .icoformato para exibir como imagens (por exemplo, não como favicon), o Internet Explorer não pode exibir arquivos servidos com este tipo MIME padronizado. Uma solução alternativa para o Internet Explorer é associar .ico-se ao image/x-icontipo MIME não padrão em servidores Web.

O RFC 5988 estabeleceu um registro de relação de link da IANA e rel="icon"foi registrado em 2010 com base na especificação HTML5 . O popular <link rel="shortcut icon" type="image/png" href="image/favicon.png">teoricamente identifica duas relações, shortcute icon, mas shortcutnão é registrado e é redundante. Em 2011, o padrão de vida HTML especificou que, por razões históricas, shortcuté permitido imediatamente antes icon; no entanto, shortcutnão tem um significado neste contexto.

Legado

O Internet Explorer 5–10 suporta apenas o formato de arquivo ICO . As versões 5 e 6 do Netscape 7 e do Internet Explorer exibem o favicon apenas quando a página é marcada, e não simplesmente quando as páginas são visitadas como em navegadores posteriores.

Implementação do navegador

As tabelas a seguir ilustram o suporte a vários recursos dos principais navegadores da web. A menos que indicado, os números da versão indicam o número da versão inicial de um recurso compatível.

Suporte para formato de arquivo

A tabela a seguir ilustra o suporte ao formato de arquivo de imagem para o favicon.

Navegador formato de arquivo de imagem
ICO PNG GIF GIFs animados JPEG APNG SVG
Borda sim sim sim Não sim Desconhecido sim
Raposa de fogo 1.0 1.0 1.0 sim sim 3,0 41,0
Google Chrome sim sim 4,0 Não 4,0 Não 80
Internet Explorer 5.0 11,0 11,0 Não Não Não Não
Ópera 7,0 7,0 7,0 7,0 7,0 9,5 44,0
Safári sim 4,0 4,0 Não 4,0 Não Fora do padrão (12,0)

Além disso, esses arquivos de ícone podem ter 16 × 16, 32 × 32, 48 × 48 ou 64 × 64 pixels de tamanho e 8 bits, 24 bits ou 32 bits em profundidade de cor . O artigo sobre formato de arquivo ICO explica os detalhes para ícones com mais de 256 cores em várias plataformas Microsoft Windows .

Uso de favicon

Esta tabela ilustra as diferentes áreas do navegador onde os favicons podem ser exibidos.

Navegador Barra de endereço Lista suspensa da barra de endereço Barra de links Favoritos Abas Arraste para a área de trabalho
Borda Não sim sim sim sim sim
Raposa de fogo 1.0–12.0: Sim
> v13: Não
sim sim sim sim sim
Google Chrome Não Não sim sim 1.0 Não
Internet Explorer 7,0 Não 5.0 5.0 7,0 5.0
Ópera 7.0-12.17: Sim
> v14: Não
Não 7,0 7,0 7,0 7,0
Safári sim sim Não sim 1,0–8,0: Sim
9,0-11,0: Não
> 12,0: Opcional
Não

O Opera Software adicionou a capacidade de alterar o favicon no Speed ​​Dial do Opera 10 .

Como usar

Esta tabela ilustra as diferentes maneiras como o favicon pode ser reconhecido pelo navegador da web. A implementação padrão usa um elemento de link com um relatributo na <head>seção do documento para especificar o formato, nome e localização do arquivo.

Borda Raposa de fogo Google Chrome Internet Explorer Ópera Safári
<link rel="shortcut icon"
 href="https://example.com/myicon.ico">
sim sim sim sim sim sim
<link rel="icon"
 type="image/vnd.microsoft.icon"
 href="https://example.com/image.ico">
sim sim sim Sim (do IE 9) sim sim
<link rel="icon" type="image/x-icon"
 href="https://example.com/image.ico">
sim sim sim Sim (do IE 9) sim sim
<link rel="icon"
 href="https://example.com/image.ico">
sim sim sim Sim (do IE 11) sim sim
<link rel="icon" type="image/gif"
 href="https://example.com/image.gif">
sim sim sim Sim (do IE 11) sim sim
<link rel="icon" type="image/png"
 href="https://example.com/image.png">
sim sim sim Sim (do IE 11) sim sim
<link rel="icon" type="image/svg+xml"
 href="https://example.com/image.svg">
sim sim sim sim sim Não
<link rel="mask-icon"
 href="https://example.com/image.svg" color="red">
Não Não Não Não Não sim
favicon.ico localizado na raiz do site sim Opcional sim sim Opcional sim
precedência: prefira a versão raiz ou (X) HTML vinculada ligado ligado ligado ligado ? ?

Se houver links para favicons PNG e ICO, os navegadores compatíveis com o favicon PNG selecionam o formato e o tamanho a serem usados ​​da seguinte maneira. O Firefox e o Safari usarão o favicon que vier por último. O Chrome para Mac usará qualquer favicon que tenha o formato ICO, caso contrário, o favicon de 32 × 32. O Chrome para Windows usará o favicon que vem primeiro se for 16 × 16, caso contrário, o ICO. Se nenhuma das opções mencionadas acima estiver disponível, ambos os Chromes usarão o favicon que vier primeiro, exatamente o oposto do Firefox e Safari. Na verdade, o Chrome para Mac irá ignorar o favicon de 16 × 16 e usar a versão de 32 × 32, apenas para reduzi-lo de volta para 16 × 16 em dispositivos não retina. O Opera escolherá qualquer um dos ícones disponíveis de forma completamente aleatória.

Por padrão, apenas o SeaMonkey não busca favicon.icoarquivos na raiz do site.

Recomendação HTML5 para ícones em vários tamanhos

A especificação HTML5 atual recomenda especificar vários tamanhos para os ícones, usando os atributos dentro de uma tag. Vários formatos de ícone, incluindo formatos de contêiner, como arquivos Microsoft .ico e Macintosh .icns , bem como Gráficos vetoriais escaláveis podem ser fornecidos incluindo o tipo de conteúdo do ícone no formato dentro da tag. rel="icon" sizes="space-separated list of icon dimensions"<link>type="file content-type"<link>

A partir do iOS 5 , os dispositivos móveis da Apple ignoram a recomendação HTML5 e, em vez disso, usam o apple-touch-iconmétodo proprietário detalhado acima. O navegador Google Chrome , no entanto, selecionará o tamanho de correspondência mais próximo daqueles fornecidos nos cabeçalhos HTML para criar ícones de aplicativo de 128 × 128 pixels , quando o usuário escolher Criar atalhos de aplicativo ... no menu "Ferramentas".

Ícones da tela inicial em dispositivos móveis

Em iPhones e iPads da Apple , bem como em dispositivos móveis Android , os usuários podem fixar páginas da web como ícones de atalho na tela inicial . Esses ícones de atalho se parecem com aplicativos normais e os desenvolvedores da web podem fornecer ícones dedicados para eles.

Dispositivos Apple

Para dispositivos Apple com o sistema operacional iOS versão 1.1.3 ou posterior, os usuários podem fixar um site na tela inicial usando o botão Adicionar à tela inicial na planilha de compartilhamento do Safari.

Isso funciona para qualquer site. Mas para que o iOS exiba o atalho com um ícone, o site precisa fornecer um <link rel="apple-touch-icon" ...>na <head>seção de documentos veiculados pelo site. Se o ícone personalizado não for fornecido, uma miniatura da página da web será colocada na tela inicial.

Os tamanhos dos ícones de aplicativos nas diferentes classes de dispositivos são diferentes. Os tamanhos recomendados para os ícones são 152x152 para iPads (até iPad 2 , lançado em 2011), 167x167 para iPads com telas Retina ( iPad 3 e posterior) e 180x180 para iPhones. Se nenhum ícone do tamanho correspondente for fornecido, o iOS escolherá o ícone maior rel="apple-touch-icon"e o redimensionará automaticamente.

Código de exemplo

<link rel="apple-touch-icon" type="image/png" sizes="167x167" href="favicon-167x167.png">

<link rel="apple-touch-icon" type="image/png" sizes="180x180" href="favicon-180x180.png">

O arquivo de ícone referenciado por apple-touch-iconé modificado para adicionar cantos arredondados. Nas versões do iOS anteriores ao iOS 7, uma sombra projetada e brilho reflexivo seriam adicionados, e o apple-touch-icon-precomposedícone pode ser fornecido para instruir os dispositivos a não aplicar brilho reflexivo na imagem.

Nenhum HTML é exigido por navegadores ou dispositivos móveis para recuperar esses ícones. A raiz do site é o local padrão para o arquivo apple-touch-icon.png(em ordem de prioridade).

Dispositivos Android

Em dispositivos Android, os usuários podem usar a função Adicionar à tela inicial no menu de ferramentas do Chrome para fixar uma página da web em sua tela inicial.

Isso também funciona para qualquer site da Web, mas se nenhum favicon for fornecido, um ícone genérico será usado. Como os ícones de aplicativos Android são dimensionados em 48 x 48 pontos, o site deve fornecer favicons com tamanhos múltiplos de 48 x 48 pixels. Para dispositivos modernos de alta resolução, o Google recomenda fornecer ícones em 192x192 pixels.

Código de exemplo

<link rel="icon" type="image/png" sizes="48x48" href="favicon-48x48.png">
<link rel="icon" type="image/png" sizes="192x192" href="favicon-192x192.png">

O Android também suporta arquivos Web Manifest, o que possibilita uma integração mais profunda de sites da Web ao sistema. Um Manifesto da Web é um arquivo JSON, que especifica metadados para um aplicativo da Web progressivo. Ele permite que o desenvolvedor não apenas forneça os ícones, mas também um nome curto para exibição na tela inicial, bem como as cores do tema. No entanto, fornecer um arquivo de manifesto da web não é necessário para que o recurso Adicionar à tela inicial funcione.

Favicons animados

Vários navegadores, como Chrome, Firefox e Opera suportam animação de favicons. Um relatório de bug foi aberto para o Firefox desde 2001, solicitando uma forma de desabilitar este recurso.

Limitações e críticas

Devido à necessidade de sempre verificar em um local fixo, o favicon pode levar a um tempo de carregamento de página artificialmente lento e entradas 404 desnecessárias no log do servidor, se não existir.

O W3C não padronizou o atributo rel, portanto, existem outras palavras-chave, como ícone de atalho, que também são aceitas pelo agente do usuário .

Os favicons costumam ser manipulados como parte de ataques de phishing ou espionagem contra páginas da web HTTPS . Muitos navegadores da web exibem favicons perto de áreas da IU do navegador da web, como a barra de endereço, que são usados ​​para indicar se a conexão com um site está usando um protocolo seguro como o TLS . Ao alterar o favicon para uma imagem de cadeado familiar, um invasor pode tentar enganar o usuário, fazendo-o pensar que está conectado com segurança ao site adequado. Ferramentas automatizadas de ataque man-in-the-middle , como SSLStrip, utilizam esse truque. Para eliminar isso, alguns navegadores da web, como Firefox ou Google Chrome, exibem o favicon na guia enquanto exibem o status de segurança do protocolo usado para acessar o site ao lado do URL.

Como os favicons geralmente estão localizados na raiz do diretório do site no servidor, eles podem ser empregados com alguma confiabilidade para divulgar se um cliente da web está conectado a um determinado serviço. Isso funciona fazendo uso do recurso de redirecionamento após o login de muitos sites, consultando o favicon em um URL de redirecionamento após o login e testando a resposta do servidor para discernir se o usuário recebe o recurso solicitado (o que significa que eles são conectado), ou redirecionado para a página de login (o que significa que eles não estão logados no serviço).

Em 2021, um método para rastreamento de navegador usando favicons foi demonstrado por pesquisadores da Universidade de Illinois.

Referências

links externos