Favicon: o ícone do seu site na barra de endereço
O Favicon é um ícone que fica na barra de endereços do seu navegador, que pode ser a logomarca da sua empresa ou serviço. Veja aqui como criá-lo.
Você já reparou na presença de um ícone, acima do URL, na aba do navegador? Ele se chama Favicon e é muito simples instalá-lo no seu próprio site.
FavIcon from Pics (em inglês);
FavIcon generator (em inglês);
Favikon (em inglês).
Peguemos como exepmo a primeira ferramenta. Nela você pode criar um Favicon a partir de uma imagem do PC. Na página inicial, clique no botão Escolher arquivo, selecione a imagem desejada e clique em Generate Favicon.ico.
O ícone será criado e você terá algumas opções para personalizá-lo. É possível adicionar o texto que aparecerá depois do Favicon, criar um ícone animado, aditar cor de fundo, etc.
Agora, basta baixar o arquivo zipado no seu computador. Depois de descompactar o arquivo baixado, copie o arquivo favicon.ico no seu site. Se você baixou um ícone animado, o arquivo ZIP também vai ter uma pasta extra, com o seu favicon animado. Se for o caso, copie animated_favicon1.gif no seu site.
Como sempre, o Internet Explorer possui padrões diferentes dos demais navegadores e não os formatos mais comuns. Para esse navegador, use uma imagem ou formato ICO (ou BMP) no tamanho 16x16.
A logomarca criada pode ser baixada de graça em baixa resolução. Para obtê-la em alta resolução e alguns outros benefícios, o serviço é pago. Não é preciso baixar o logo criado caso seu objetivo seja obter apenas o Favicon.
Dependendo do formato, o atributo tipo mudará:
Formato PNG: imagem/png;
Formato GIF : imagem/gif;
Formato JPEG (extensão JPG ou JPEG): imagem/jpeg.
Se você tiver um ícone que não respeita os padrões, o atributo rel também muda:
Também é possível colocar um arquivo favicon.ico na raiz da página, para que alguns navegadores o usem automaticamente, mas isso não é padrão.
Foto: © John Schnobrich - Unsplash.
- Como criar o Favicon
- Criar logo e Favicon para seu site
- Como colocar o Favicon online
- Se seu ícone for animado (GIF)
- Observação
Você já reparou na presença de um ícone, acima do URL, na aba do navegador? Ele se chama Favicon e é muito simples instalá-lo no seu próprio site.
Como criar o Favicon
Você pode criá-lo com um software de desenho (Gimp, ou Pixlr, por exemplo), com software especializado (IconEdit32 ou IconWare) ou um website que transforme uma imagem em Favicon:FavIcon from Pics (em inglês);
FavIcon generator (em inglês);
Favikon (em inglês).
Peguemos como exepmo a primeira ferramenta. Nela você pode criar um Favicon a partir de uma imagem do PC. Na página inicial, clique no botão Escolher arquivo, selecione a imagem desejada e clique em Generate Favicon.ico.
O ícone será criado e você terá algumas opções para personalizá-lo. É possível adicionar o texto que aparecerá depois do Favicon, criar um ícone animado, aditar cor de fundo, etc.
Agora, basta baixar o arquivo zipado no seu computador. Depois de descompactar o arquivo baixado, copie o arquivo favicon.ico no seu site. Se você baixou um ícone animado, o arquivo ZIP também vai ter uma pasta extra, com o seu favicon animado. Se for o caso, copie animated_favicon1.gif no seu site.
Formato e dimensões
Para a maioria dos navegadores, opte por uma imagem no formato PNG ou GIF (outros formatos também podem ser aceito). Você também pode escolher diferentes tamanhos, como 16x16 ou 32x32, medidas em pixels.Como sempre, o Internet Explorer possui padrões diferentes dos demais navegadores e não os formatos mais comuns. Para esse navegador, use uma imagem ou formato ICO (ou BMP) no tamanho 16x16.
Criar logo e Favicon para seu site
Em geral, o Favicon guarda relação com a logomarca da sua empresa ou do serviço oferecido por você. Caso ainda não tenha um logo, a plataforma Logaster oferece a criação gratuita de logomarca e, na sequência, sugere diversas opções de Favicons que tenham semelhanças com o logo criado. Assim, você pode escolher uma das alternativas e promover alterações, como a combinação de cores, por exemplo.A logomarca criada pode ser baixada de graça em baixa resolução. Para obtê-la em alta resolução e alguns outros benefícios, o serviço é pago. Não é preciso baixar o logo criado caso seu objetivo seja obter apenas o Favicon.
Como colocar o Favicon online
Depois disso, você deverá colocar o Favicon no seu site e indicar o caminho com o link nas tags do cabeçalho head. Veja um exemplo com uma imagem no formato PNG:<link rel="icon" type="imagem/png" href="/imagens/meufavicon.png" />
Dependendo do formato, o atributo tipo mudará:
Formato PNG: imagem/png;
Formato GIF : imagem/gif;
Formato JPEG (extensão JPG ou JPEG): imagem/jpeg.
Se você tiver um ícone que não respeita os padrões, o atributo rel também muda:
<link rel = "shortcut icon" type = "imagem/x-icon" href = "/imagens/icone_ie.ico"/>
Também é possível colocar um arquivo favicon.ico na raiz da página, para que alguns navegadores o usem automaticamente, mas isso não é padrão.
Se seu ícone for animado (GIF)
Insira a seguinte tag:<link rel="icon" href="/imagens/animated_favicon1.gif" type="imagem/gif">
Observação
Se você usar um ícone com formato padrão e um outro com formato ICO, evite colocar este último na raiz, os navegadores só irão exibi-los se não encontrarem a imagem PNG.Foto: © John Schnobrich - Unsplash.
Veja também
- Icone html
- Como colocar icone no site - Melhores respostas
- Colocar icone no site - Melhores respostas
- Como fixar site na barra de tarefas chrome - Dicas - Chrome
- Como criar icone de um site no desktop - Dicas - Internet
- ícone de som sumiu da barra de tarefas windows 8 - Dicas - Windows
- Como tirar um site da barra de favoritos - Dicas - Navegadores
- Como tirar um site da barra de pesquisa - Dicas - Chrome
Este documento, intitulado 'Favicon: o ícone do seu site na barra de endereço', está disponível sob a licença Creative Commons. Você pode copiar e/ou modificar o conteúdo desta página com base nas condições estipuladas pela licença. Não se esqueça de creditar o CCM (br.ccm.net) ao utilizar este artigo.
4 Comentários
Denunciar
usuário anônimo
Muito obrigado,isso ajudou bastante
Denunciar
MISODOR
Nossa, excelente, agradeço de coração!
Denunciar
ClaudioDiCapua
Conteúdo muito útil, e os links dos conversores são ótimos, fiz um teste gerou o favicon em formato ico com 16px. Muito prático mesmo.
Denunciar
Wellington
Show, muito obrigado, era o que estava procurando
