Linkando recursos
Muitas vezes, é necessário linkar vários recursos externos a uma página web. Os casos mais comuns são os de CSS e Javascript, que já foram discutidos nos tutoriais Usando HTML com CSS e HTML com Javascript, respectivamente. Nesse tutorial, eu vou discutir como linkar outros tipos de recursos.
Favicons são aqueles pequenos ícones que ficam do lado esquerdo do título na aba da página.
Embora muitos sites ainda não tenham um favicon, muitas vezes até por nem saberem o que ele é, ele é quase unânime
em sites de médio e grande porte, porque faz parte da identidade visual do site e tem várias vantagens. Se você
quiser incluir um favicon no seu site, basta usar o elemento <link> no head, dessa forma:
<link rel="icon" type="image/png" href="/favicon.png">O atributo rel="icon" identifica que você está linkando um favicon. O MIME Type do arquivo do favicon deve ser especificado no atributo type.
Um arquivo chamado favicon.ico na raiz do site é carregado pelos browsers automaticamente, tornando desnecessária a inclusão dele no HTML de forma explícita.
É importante que você saiba que hoje são necessárias várias versões de favicons para servir favicons apropriados para os diversos dispositivos que temos hoje, com vários tamanhos e densidades de pixels diferentes. Antigamente, quando não havia smartphones nem tablets, e havia menos navegadores, tudo era mais simples, e apenas um favicon era suficiente.
Falar sobre as variações de favicon que um site deve ter está fora do escopo desses tutoriais. No entanto, há ferramentas que facilitam a geração desses favicons, como o Real Favicon Generator, que além de tudo explica esse assunto em detalhes.
Não são apenas outros tipos de recursos que podem ser linkados. É possível linkar para recursos que também são páginas web. Quando uma página é parte de uma série de artigos ou faz parte de qualquer coisa paginada, você pode usar os valores prev e next no atributo rel para apontar para páginas que vem antes e depois dela:
<link rel="prev" href="https://seusite.com/filmes/suspense/10">
<link rel="next" href="https://seusite.com/filmes/suspense/12">