Antônio Medeiros

Como personalizar o ícone do seu site

Sabe como personalizar o ícone do seu site? Aquele que aparece na barra de título, na aba, ou no menu dos favoritos, quando você adiciona seu site aos favoritos. Ele é mais conhecido na Internet por favicon. Antigamente, na época em que o IBM PC, o Windows e o Internet Explorer dominavam seus respectivos mercados, era suficiente criar um arquivo favicon.ico na raiz do site e adicionar a seguinte tag ao cabeçalho da página:

1

<link rel="shortcut icon" href="favicon.ico">

Agora, com a explosão dos dispositivos móveis (Android, iOS, BlackBerry, etc.) e a guerra dos navegadores (Mozilla Firefox, Google Chrome, Opera, Safari, etc.), é bem verdade que a referida tag ainda é reconhecida pelos navegadores mais utilizados, que exibem corretamente o ícone do seu site para a maioria dos visitantes.

No entanto, em alguns casos específicos, o navegador procura o ícone do site em outro arquivo que não o favicon.ico, ou verifica se existe algum ícone com maior resolução, como faz o navegador Safari no iPhone, por exemplo. Alguns sites já provêm vários ícones: o tradicional favicon.ico e outros ícones para esses casos específicos.

Aqui mostro como você pode disponibilizar vários ícones para o seu site, como fiz com o meu. Se não quiser saber como achei a solução, pode pular a seção a seguir.

Discussão

Isso é realmente necessário? Não, somente se você quiser prover a melhor experiência a seu visitante independente de qual dispositivo ele usa para acessar seu site (foi a conclusão a que vários entendidos no assunto chegaram após essa discussão). Eu considero isso importante, por isso pesquisei como se fazem ícones para sites hoje em dia para aplicar as novas técnicas ao meu site.

Iniciei uma pesquisa em profundidade sobre o assunto, tomando como ponto de partida a referida discussão, o que me levou a outras páginas interessantes:

Cheguei a conclusão que, para não me preocupar com as diferenças entre dispositivos e navegadores, o melhor seria utilizar uma ferramenta que as trata para mim. Foi então que decidi usar o Real Favicon Generator.

Mão na massa

O Real Favicon Generator é uma ferramenta online gratuita capaz de gerar uma variedade de arquivos de ícones para seu site com base em uma imagem que você forneça. Não só as imagens, ele provê também as tags HTML que você deve inserir em suas páginas para que diferentes navegadores e dispositivos determinem e exibam corretamente o ícone do seu site.

Para começar, acesse o Real Favicon Generator e forneça uma imagem quadrada. A resolução mínima exigida é 70x70, mas ele recomenda que a resolução da imagem seja 260x260 ou maior para melhores resultados. Isso permitirá que a ferramenta gere ícones de alta definição para dispositivos que os suportam.

Na página seguinte, várias opções são exibidas para que você possa personalizar a aparência do seu ícone em alguns casos específicos. É recomendado colocar os arquivos na raiz do site, pois alguns navegadores os buscam nesse local (por exemplo, www.vinyanalista.com.br/favicon.ico).

Por fim, a ferramenta fornecerá os arquivos que você deve baixar e salvar no seu e o código HTML que você deve inserir nas suas páginas.

O código gerado deve ser parecido com este:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png?v=2">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png?v=2">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png?v=2">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png?v=2">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png?v=2">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png?v=2">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png?v=2">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png?v=2">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png?v=2">
<link rel="icon" type="image/png" href="/favicon-32x32.png?v=2" sizes="32x32">
<link rel="icon" type="image/png" href="/favicon-194x194.png?v=2" sizes="194x194">
<link rel="icon" type="image/png" href="/favicon-96x96.png?v=2" sizes="96x96">
<link rel="icon" type="image/png" href="/android-chrome-192x192.png?v=2" sizes="192x192">
<link rel="icon" type="image/png" href="/favicon-16x16.png?v=2" sizes="16x16">
<link rel="manifest" href="/manifest.json?v=2">
<link rel="shortcut icon" href="/favicon.ico?v=2">
<meta name="msapplication-TileColor" content="#2d89ef">
<meta name="msapplication-TileImage" content="/mstile-144x144.png?v=2">
<meta name="theme-color" content="#2196f3">

Depois de alterar as páginas e disponibilizá-las online juntamente com os ícones, a ferramenta também permite verificar se tudo está nos conformes. Para isso, acesse o verificador de favicon e forneça o endereço do seu site.

No meu caso, como gerei o ícone do meu site usando a própria ferramenta, obviamente ela não encontrou nenhum erro:

Se tiver curiosidade de verificar quais dispositivos e navegadores são suportados pelo Real Favicon Generator, acesse essa página. Você também pode tirar quaisquer dúvidas na seção de perguntas frequentes (FAQ, no inglês).

Comentários

Sobre mim

Anúncio