O que é um favicon e para que serve?
Um favicon é um emblema (ícone) que aparece nas guias do navegador, favoritos e fragmentos de resultados de pesquisa.
O Favicon desempenha um papel importante em aplicativos da web. Pode melhorar a aparência do site nos resultados da pesquisa, aumentar o reconhecimento do seu site, ajudar o usuário a encontrar rapidamente a página desejada nos favoritos e nas abas.
Além disso, o usuário pode adicionar a página do seu site à tela inicial do telefone ou salvá-la como um aplicativo da web. Nesse caso, usando o favicon, você pode localizar rapidamente um site entre um grande número de outros aplicativos.
Qual formato usar para favicon?
Anteriormente, o ICO era usado como formato principal. A peculiaridade desse formato é sua multidimensionalidade. Este arquivo pode armazenar vários tamanhos de ícone. O ICO foi substituído pelo formato PNG. Os ICOs ainda são suportados, mas a maioria dos navegadores modernos opta pelo formato de ícone PNG, que é mais fácil. Alguns navegadores não conseguem selecionar o ícone correto no arquivo ICO, resultando no uso incorreto do ícone de baixa resolução.
Quais plataformas este artigo abordará?
- Navegadores de desktop clássicos
- Android Chrome
- iOS Safari Web Clip
- Mac OS
- janelas
Navegadores de desktop clássicos
Vamos começar com o desktop clássico.
Conforme mencionado anteriormente, o formato ICO está desatualizado hoje, mas isso não significa que você precise esquecê-lo. O formato ICO pode salvar seu ícone e exibir favicon corretamente em alguns casos. Por exemplo, antes do IE 11, o formato PNG não era compatível. Portanto, para o IE10 e versões anteriores, você precisa usar o formato ICO antigo. Nesse caso, é aconselhável usar a seguinte combinação de formatos ICO e PNG:
<link type="image/x-icon" rel="shortcut icon" href="…/favicon.ico">
<link type="image/png" sizes="16x16" rel="icon" href="… /favicon-16x16.png">
<link type="image/png" sizes="32x32" rel="icon" href="…/favicon-32x32.png">
<link type="image/png" sizes="96x96" rel="icon" href="…/favicon-96x96.png">
<link type="image/png" sizes="120x120" rel="icon" href="…/favicon-120x120.png">Para criar um ícone ICO de vários tamanhos, você pode usar o serviço de conversor icoconvert . Ao gerar um ícone, selecione as seguintes dimensões: 16x16, 32x32, 48x48 (ícone de maior resolução).
Os ícones PNG têm os seguintes tamanhos: 16x16, 32x32, 96x96, 120x120. Por que um ícone de 120 x 120? O Yandex Help informa que pode utilizar um ícone deste tamanho.
Se prestarmos atenção ao valor de rel (tipo de recurso), o ícone é levado em consideração pela maioria dos navegadores e o ícone de atalho é levado em consideração pelo navegador IE.
Android Chrome
O Android espera ver um ícone PNG 192x192, o canal alfa (transparência) é incentivado.
<link type="image/png" sizes="192x192" rel="icon" href="…/android-icon-192x192.png">O Android Chrome depende do manifesto do aplicativo da web. Qualquer site pode usar o manifesto para vincular a alguns dos ícones.
O próprio arquivo de manifesto está no formato json e é declarado com a seguinte linha:
<link rel="manifest" href="…/manifest.json">O arquivo de manifesto para Android Chrome pode ser gerado usando o serviço RealFaviconGenerator .
{
"name": "My Application",
"short_name": "App",
"description": "Application OK",
"lang": "ru-Ru",
"start_url": "/",
"scope": "/",
"display": "standalone",
"theme_color": "#ffffff",
"background_color": "#ffffff",
"icons": [
{
"src": "\/res\/img\/icons\/android-icon-72x72.png",
"sizes": "72x72",
"type": "image\/png",
"density": "1.5"
},
{
"src": "\/res\/img\/icons\/android-icon -96x96.png",
"sizes": "96x96",
"type": "image\/png",
"density": "2.0"
},
{
"src": "\/res\/img\/icons\/android-icon-144x144.png",
"sizes": "144x144",
"type": "image\/png",
"density": "3.0"
},
{
"src": "\/res\/img\/icons\/android-icon-192x192.png",
"sizes": "192x192",
"type": "image\/png",
"density": "4.0"
},
{
"src": "\/res\/img\/icons\/android-icon-512x512.png",
"sizes": "512x512",
"type": "image\/png"
}
]
}Os ícones devem ter os seguintes tamanhos: 72x72, 96x96, 144x144, 192x192, 512x512 no formato PNG, a transparência é incentivada. Como o ícone pode ter um fundo transparente, você pode especificar a cor no manifesto usando background_color .
Vale a pena cancelar que no telefone o usuário tem a possibilidade de salvar a página do navegador na tela inicial. Será simplesmente um link para uma página do seu site, um ícone com o nome android-icon-192x192.png será exibido , o qual é declarado no seu código.
Se você conectar um manifesto ao site, ao abrir a página, o usuário poderá ser solicitado a salvar o site como um aplicativo. Nesse caso, você pode declarar o mesmo ícone visualmente ( android-icon-192x192.png) ou refaça o design do ícone do aplicativo para atender às suas necessidades e declare-o no manifesto com as dimensões apropriadas.
iOS Safari Web Clip
O iOS Safari espera ver um ícone de toque da apple . Este é um ícone 180x180 PNG, sem canal alfa (sem transparência). Os cantos do ícone serão arredondados automaticamente, tornando mais fácil criar um ícone de toque de maçã .
Os usuários do IOS também podem adicionar um site à tela inicial e ele se parecerá com um aplicativo. Esse link é exibido como um ícone e é chamado de Web Clip.
Os tamanhos de ícone a seguir são projetados para oferecer suporte a uma variedade de dispositivos, como iPhone e iPad:
<link sizes="57x57" rel="apple-touch-icon" href="…/apple-touch-icon-57x57.png">
<link sizes="60x60" rel="apple-touch-icon" href="…/apple-touch-icon-60x60.png">
<link sizes="72x72" rel="apple-touch-icon" href="…/apple-touch-icon-72x72.png">
<link sizes="76x76" rel="apple-touch-icon" href="…/apple-touch-icon-76x76.png">
<link sizes="114x114" rel="apple-touch-icon" href="…/apple-touch-icon-114x114.png">
<link sizes="120x120" rel="apple-touch-icon" href="…/apple-touch-icon-120x120.png">
<link sizes="144x144" rel="apple-touch-icon" href="…/apple-touch-icon-144x144.png">
<link sizes="152x152" rel="apple-touch-icon" href="…/apple-touch-icon-152x152.png">
<link sizes="180x180" rel="apple-touch-icon" href="…/apple-touch-icon-180x180.png">No código, adicione o atributo rel = "apple-touch-icon" e especifique o tamanho usando tamanhos.
Se o site não tiver um ícone cujo tamanho seja o recomendado para o dispositivo, o ícone maior mais próximo será usado. O ícone do apple touch principal é um ícone de 180 x 180. Outros dispositivos podem misturar o ícone.
Não se esqueça do preenchimento ao criar um ícone. Eles devem ter pelo menos 4 px em todos os lados. Isso evita que seu ícone seja cortado, pois o ícone do aplicativo iOS tem cantos arredondados.
Deve-se notar que os dispositivos iOS não são os únicos que procuram um ícone apple touch... Alguns navegadores, como o Android Chrome, podem usar ícones apple touch, pois são mais comuns do que outros ícones PNG de alta resolução.
Mac OS
No Mac OS, as coisas são completamente diferentes. Se o usuário tentar salvar o site na área de trabalho, uma captura de tela da página com o código html será exibida no lugar do ícone do site.
Para adicionar um ícone, você precisa usar o formato SVG, o que permitirá que você faça uma máscara de ícone. Este ícone será exibido quando você fixar uma guia no Safari.
<link color="#e52037" rel="mask-icon" href="…/safari-pinned-tab.svg">Você precisa adicionar o atributo rel = "mask-icon" em seu código . O ícone SVG em si deve ser preto. A cor do ícone é definida no atributo color = "# e52037" .
O ícone SVG é usado em uma guia fixada (sem foco) em preto e branco. Ao passar o mouse (guia fixada - foco), o ícone será pintado na cor que possui o atributo " cor ". A cor do atributo " cor " também é passada para a barra de toque .
Ao criar um ícone, você precisa remover todas as sombras existentes, torná-lo plano e simples. Você pode simplificar um ícone para um único objeto usando as operações "União" e "Achatar". Essas operações são fáceis de aplicar no Figma.
Se você fechar os olhos para criar um ícone de máscara, o navegador simplesmente exibirá a primeira letra do domínio do seu site.
janelas
Com o Windows, é preciso mexer um pouco para ter um bom desempenho.
Para o IE10 e versões inferiores, o formato ICO deve ser usado, pois PNG não era compatível antes do IE11.
Com a chegada do IE11 e do Windows 8.1, tornou-se possível fixar sites como blocos ativos. Para ladrilhos pequenos, o favicon padrão é usado, e para ladrilhos grandes e largos você precisa definir uma imagem de um tamanho específico. Isso pode ser feito adicionando tags de metadados à marcação do site ou criando um browserconfig.xml (arquivo de configuração do navegador).
Um exemplo de adição de tags de metadados à marcação de seu site para blocos grandes:
<meta name="msapplication-TileImage" content="…/mstile-144x144.png">
<meta name="msapplication-square70x70logo" content="…/mstile-70x70.png">
<meta name="msapplication-square150x150logo" content="…/mstile-150x150.png">
<meta name="msapplication-wide310x150logo" content="…/mstile-310x310.png">
<meta name="msapplication-square310x310logo" content="…/mstile-310x150.png">Com esta linha, especificamos a cor de fundo do bloco:
<meta name="msapplication-TileColor" content="#2b5797">Você pode especificar o nome do seu site:
<meta name="application-name" content="My Application">O que é browserconfig ? É um documento XML que lista vários ícones que correspondem à UI do Metro.
Para incluir o arquivo browserconfig na marcação, adicione a seguinte linha ao cabeçalho :
<meta name="msapplication-config" content="…/browserconfig.xml">O próprio arquivo terá a seguinte aparência:
<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
<msapplication>
<tile>
<square70x70logo src="…/mstile-70x70.png"/>
<square150x150logo src="…/mstile-150x150.png"/>
<square310x310logo src="…/mstile-310x310.png"/>
<wide310x150logo src="…/mstile-310x150.png"/>
<TileColor>#ffc40d</TileColor>
</tile>
</msapplication>
</browserconfig>O arquivo browserconfig define imagens para diferentes tamanhos de blocos.
A Microsoft recomenda o uso de tamanhos de imagem maiores para oferecer suporte a telas de alta densidade de pixels.
A lista a seguir fornece algumas diretrizes para o uso de tamanhos diferentes:
- Pequeno - 70 x 70 (tamanho recomendado: 128 x 128)
- Médio - 150 x 150 (tamanho recomendado: 270 x 270)
- Largo - 310 x 150 (tamanho recomendado: 558 x 270)
- Grande - 310 x 310 (tamanho recomendado: 558 x 558)
Por exemplo, para uma imagem de 70x70, o tamanho recomendado é 128x128. Isso significa que você precisa criar uma imagem de 128x128 com fundo transparente, cujo nome será mstile-70x70 . Faça o mesmo com o resto das dimensões.
Preparando favicons
Antes de adicionar seus ícones à pasta raiz do site, você precisa prepará-los. Os tamanhos originais dos ícones não são muito grandes, mas podem ser compactados com o mínimo de perda de qualidade.
Por exemplo, no meu caso, o peso de todas as imagens era de 200kb, após a compressão era de 50kb. A qualidade das imagens quase não mudou. Você pode usar qualquer serviço de compressão de imagem conveniente. Eu usei iloveimg .
Conclusão
Sequência de conexão na marcação do site:
<link type="image/x-icon" rel="shortcut icon" href="…/favicon.ico">
<link type="image/png" sizes="16x16" rel="icon" href="… /favicon-16x16.png">
<link type="image/png" sizes="32x32" rel="icon" href="…/favicon-32x32.png">
<link type="image/png" sizes="96x96" rel="icon" href="…/favicon-96x96.png">
<link type="image/png" sizes="120x120" rel="icon" href="…/favicon-120x120.png">
<link type="image/png" sizes="192x192" rel="icon" href="…/android-icon-192x192.png">
<link sizes="57x57" rel="apple-touch-icon" href="…/apple-touch-icon-57x57.png">
<link sizes="60x60" rel="apple-touch-icon" href="…/apple-touch-icon-60x60.png">
<link sizes="72x72" rel="apple-touch-icon" href="…/apple-touch-icon-72x72.png">
<link sizes="76x76" rel="apple-touch-icon" href="…/apple-touch-icon-76x76.png">
<link sizes="114x114" rel="apple-touch-icon" href="…/apple-touch-icon-114x114.png">
<link sizes="120x120" rel="apple-touch-icon" href="…/apple-touch-icon-120x120.png">
<link sizes="144x144" rel="apple-touch-icon" href="…/apple-touch-icon-144x144.png">
<link sizes="152x152" rel="apple-touch-icon" href="…/apple-touch-icon-152x152.png">
<link sizes="180x180" rel="apple-touch-icon" href="…/apple-touch-icon-180x180.png">
<link color="#e52037" rel="mask-icon" href="…/safari-pinned-tab.svg">
<meta name="msapplication-TileColor" content="#2b5797">
<meta name="msapplication-TileImage" content="…/mstile-144x144.png">
<meta name="msapplication-square70x70logo" content="…/mstile-70x70.png">
<meta name="msapplication-square150x150logo" content="…/mstile-150x150.png">
<meta name="msapplication-wide310x150logo" content="…/mstile-310x310.png">
<meta name="msapplication-square310x310logo" content="…/mstile-310x150.png">
<meta name="application-name" content="My Application">
<meta name="msapplication-config" content="…/browserconfig.xml">
<link rel="manifest" href="…/manifest.json">
<meta name="theme-color" content="#ffffff">Com a última linha do código " theme-color ", você pode pintar a barra de endereço e a barra de notificação em qualquer cor. O valor do conteúdo define a cor.
Use RealFaviconGenerator para verificar os ícones do seu site . Este serviço mostrará como seus ícones são exibidos em diferentes plataformas, informará onde e quais problemas podem haver.
Além disso, este serviço pode gerar os tamanhos, formatos de ícone e código necessários. Mas é necessário verificar as fontes para a presença de todos os tamanhos recomendados para exibição correta em vários dispositivos.