Certamente você já notou que ao acessar um site, geralmente ele tem um ícone que é exibido ao lado do nome do site no seu navegador de internet, esse ícone é chamado de favicon.
Esse mesmo ícone é exibido quando você adiciona um site aos favoritos, e também é esse ícone que aparece no seu celular ou tablet, quando você adiciona um atalho na tela inicial do seu dispositivo.
Como adicionar um favicon no meu site?
Antigamente, era necessário apenas um único código de favicon, que todos os dispositivos (que era bem semelhantes) já renderizaram os ícones corretamente. Hoje em dia, por termos muitos tipos de dispositivos diferentes, surgiram novas tags de favicon para suprir a necessidade de tamanhos, dispostivos e formatos diferentes.
Código Favicon para usar no seu site
O código deve ser inserido entre a tag <head>código aqui</head> do seu site. Lembre-se de substituir o site de exemplo example.com pelo endereço do seu site, e também de adicionar os ícones nos formatos corretos no diretório correto, caso contrário, seus favicons não funcionaram corretamente.
<!-- Favicon padrão, geralmente com tamanho de 16x16 -->
<link rel="shortcut icon" href="https://example.com/favicon.ico" type="image/x-icon" />
<!-- Atualização do favicon.ico, os navegadores adicionaram suporte para formatos .png, tamanho de 32x32 -->
<link rel="icon" href="https://example.com/favicon-32x32.png" sizes="32x32" />
<!-- Favicon para dispositivos com alta resolução, tamanho de 192x192 -->
<link rel="icon" href="https://example.com/favicon-192x192.png" sizes="192x192" />
<!-- Favicon para dispositivos da Apple, exibidos quando adicionados a tela inicial, tamanho 180x180 -->
<link rel="apple-touch-icon" href="https://example.com/favicon-180x180.png" />
<!-- Favicon para o Microsoft Edge, exibido quando fixado na barra de tarefas do Windows, tamanho 270x270 -->
<meta name="msapplication-TileImage" content="https://example.com/favicon-270x270.png" />Favicon carregando de forma automática
Alguns navegadores reconhecem automaticamente o favicon e o adicionam ao seu site caso um arquivo chamado favicon.ico ou favicon.png estiver presente no diretório raiz. Porém não é uma boa prática, o ideal é você especificar com as tags próprias para isso onde estão os favicons e quais formatos você está disponibilizando no seu site. Geralmente essa abordagem é utilizada por hospedagens, para adicionar seus próprios favicons quando ainda não há arquivos do site configurado.
Conclusão
É sempre uma boa prática configurar o favicon do seu site. Eu mesmo utilizo apenas o favicon (sem nome) na minha barra de favoritos, dessa forma consigo utilizar vários favoritos na barra de uma única vez, veja:
Para quem tem muitos favoritos, essa é uma boa forma de organizar, e possibilita a utilização de muitos favoritos ao mesmo tempo, e ocupa bem menos espaço. Uma outra abordagem interessante, é adicionar pastas de favoritos, o que também ajuda bastante na organização.