as seguintes tabelas ilustram o Suporte de várias funcionalidades com os principais navegadores da web. A menos que anotado, os números de versão indicam o número de versão inicial de um recurso suportado.
Suporte Ao Formato do ficheiro
a tabela seguinte ilustra o suporte do formato do ficheiro da imagem para o favicon.
- ^ Safari, desde a versão 12.0, suporta uma única cor SVG favicons em alguns casos, em um não-padrão
mask-icon
formato.,
16×16, 32×32, 48×48, ou 64×64 pixels em tamanho, e 8-bit, 24-bit, ou 32-bit em profundidade de cor. O artigo do formato de arquivo ICO explica os detalhes para ícones com mais de 256 cores em várias plataformas Microsoft Windows.
Utilização do faviconEdit
Esta tabela ilustra as diferentes áreas do navegador onde os favicons podem ser apresentados.
Opera Software added the ability to change the favicon in the Speed Dial in Opera 10.,
como usar o useEdit
Esta tabela ilustra as diferentes formas como o favicon pode ser reconhecido pelo navegador web. A implementação padrão usa um elemento de ligação com umrel
atributo no<head>
secção do documento para especificar o formato, nome e localização dos ficheiros.
- ^ Firefox só aceita
favicon.ico
no site de raiz, sem um<link>
tag se a configuraçãobrowser.chrome.site_icons
está definido paratrue
noabout:config
., O valor padrão étrue
. Se definido parafalse
, estes favicons são ignorados. - ^ Opera carrega
/favicon.ico
somente seMultimedia/Always load favicon
opçãoopera:config
está definido para1
. Veja a página de Suporte do Opera para mais detalhes.
se estiverem presentes ligações tanto para PNG como para ICO favicons, os navegadores compatíveis com PNG-favicon seleccionam o formato e o tamanho a usar como se segue. O Firefox e o Safari vão usar o favicon que chegar em último., O cromo para Mac irá usar o favicon que for formatado pela ICO, caso contrário o favicon 32×32. O Chrome for Windows irá usar o favicon que vem em primeiro lugar se for 16×16, caso contrário o ICO. Se nenhuma das opções acima mencionadas estiver disponível, ambos os cromos usarão o favicon que vier primeiro, exatamente o oposto do Firefox e Safari. De fato, o Chrome para Mac vai ignorar o 16×16 favicon e usar a versão 32×32, apenas para reduzi-lo para 16×16 em dispositivos não-retina. O Opera irá escolher entre qualquer um dos ícones disponíveis completamente ao acaso.,
apenas o SeaMonkey não obtém favicon.ico
ficheiros na raiz do website por omissão.
Device supportEdit
Para dispositivos da Apple com o sistema operacional iOS versão 1.1.3 ou posterior, bem como alguns dispositivos Android, é possível fornecer um ícone personalizado que os usuários podem exibir em suas telas iniciais usando o Adicionar à Tela de início botão dentro de compartilhamento folha no Safari., Esta característica é ativada fornecendo uma seção <link rel="apple-touch-icon" ...>
no <head>
de documentos servidos pelo site. Se o ícone personalizado não for fornecido, uma miniatura da página web será colocada na tela inicial em vez disso.
O tamanho básico recomendado para este ícone é 152×152 pixels.
para o iPad, o tamanho básico é 180×180 pixels. Os tablets Android preferem um ícone PNG 192×192.
o ficheiro de ícones referenciado por apple-touch-icon
é modificado para adicionar cantos arredondados., Nas versões anteriores ao iOS 7, uma sombra drop, e brilho refletivo seriam adicionados, e apple-touch-icon-precomposed
icon pode ser fornecido para instruir os dispositivos para não aplicar brilho refletivo na imagem.
com cantos arredondados, adicionados por iOS
<link rel="apple-touch-icon" href="https://example.com/image.png">
não é necessário HTML pelos navegadores ou dispositivos móveis para recuperar estes ícones, seja. A raiz do site é a localização padrão para o arquivo apple-touch-icon.png
(por ordem de prioridade).,
HTML5 recomendação para ícones em vários sizesEdit
O atual especificação do HTML5 recomenda a especificação de vários tamanhos de ícones, usando os atributos de rel="icon" sizes="space-separated list of icon dimensions"
dentro de <link>
tag. Vários formatos de ícones, incluindo formatos de contêineres como a Microsoft .ico e Macintosh .os arquivos icns, bem como gráficos vetoriais escaláveis podem ser fornecidos pela inclusão do tipo de conteúdo do ícone no formato type="file content-type"
dentro da etiqueta <link>
tag.,
A partir de iOS 5, dispositivos móveis Apple ignorar a recomendação HTML5 e, em vez disso, usar o proprietário apple-touch-icon
método detalhado acima. O navegador Google Chrome web, no entanto, irá selecionar o tamanho de correspondência mais próximo dos fornecidos nos cabeçalhos HTML para criar ícones de 128×128 pixels de aplicação, quando o usuário escolhe os atalhos de Aplicação criar… do menu “Ferramentas”.
faviconsEdit animado
vários navegadores, como Chrome, Firefox e Opera support animation of favicons., Um relatório de bug foi aberto para o Firefox desde 2001, solicitando uma maneira de desativar o recurso.
Deixe uma resposta