WDD 231: Desenvolvimento Frontend para Web I

S02 – Atividade de Aprendizagem: Favicon

Visão Geral

Já percebeu que quando, ao acessar a maioria dos sites, cada um deles tem uma pequena imagem, ou ícone, ao lado do título na aba do navegador? Isso é chamado de favicon, e é uma maneira de melhorar a identidade visual do seu site e fazer com que ele pareça profissional.

Nesta atividade, você aprenderá mais sobre favicons e como criar e adicionar um às suas páginas.

Preparação

Favicon significa favorites icon (ícone de favoritos). O favicon serve para aprimorar a marca do site quando adicionado aos sites "favoritos" do navegador.

Por exemplo, esta página da atividade de aprendizagem tem o logotipo da BYU-Idaho como um favicon, como você pode ver no título da aba:

Exemplo de favicon
Qual é o favicon do site principal da Igreja?
Captura de tela do ícone de favorito da Igreja de Jesus Cristo dos Santos dos Últimos Dias

Onde o favicon aparece?

O favicon aparece em:

Como definir o favicon de uma página?

O favicon é definido na seção <head> da página, usando um elemento link que tem o atributo rel="icon", por exemplo:

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

Como o favicon é definido na seção <head>, para que ele esteja presente em todas as páginas do seu site, ele deve ser definido em todas as páginas.

Qual tamanho e formato de imagem são ideais para um favicon?

O favicon é um pequeno arquivo de imagem em formato quadrado (mesma largura e altura). Ele pode ter até 16 por 16 pixels, porém, o desenvolvimento do Google recomenda múltiplos de 48 pixels quadrados.

É possível definir vários favicons de tamanhos diferentes para que, quando o ícone for usado para algo pequeno, como uma aba do navegador, uma versão pequena seja usada, mas se for renderizado em uma página inicial, uma versão maior possa ser usada.

Neste curso, será utilizada uma única imagem pequena como favicon, para simplificar.

A maioria dos formatos de arquivo de imagem da web são compatíveis com favicons, mas a abordagem recomendada é usar o formato .ico, que é o que você usará neste curso. O formato .ico foi desenvolvido para ser pequeno, eficiente e próprio para ícones, diferentemente de formatos como o .png, que é de uso geral para imagens em tamanho original. Curiosamente, o formato .png é, na verdade, o formato mais comumente usado para favicons na web atualmente.

Como criar um favicon no formato .ico?

Você pode usar qualquer programa de edição de imagens que desejar para criar um arquivo .ico. Existe uma ferramenta online e gratuita, que converte imagens de outros formatos para favicons no formato .ico chamada FreeConvert.

Instruções da Atividade

Para esta atividade, você criará um favicon 16x16 e o adicionará ao seu site do curso.

  1. Acesse a aplicação geradora de ICO online gratuita em https://www.freeconvert.com/pt/jpg-to-ico
  2. Selecione Escolher Arquivos para enviar seu arquivo.
  3. Verifique se a Saída está configurada para ICO e use o ícone de Configurações Avançadas (engrenagem) para configurar o tamanho do ícone, entre outras opções conforme desejado.
  4. Assim que estiver tudo certo, clique em Converter e depois em Download para baixar o arquivo. Salve seu arquivo na raiz da pasta do seu repositório local wdd231 com o nome favicon.ico.
  5. Faça referência ao favicon na página inicial do seu portal da tarefa, em <head>. 
    <link rel="icon" href="favicon.ico">
  6. Teste sua página e verifique se o favicon aparece quando sua página é carregada no navegador.

Recursos Opcionais