Favicon: o ícone do seu site na barra de endereço
Você já reparou na presença de um ícone, à esquerda do URL, na barra de endereços do seu navegador em certos sites? 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).
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 a logomarca criada caso seu objetivo seja obter apenas o Favicon.
Para terminar, também é possível gerar um ícone animado sem texto, marcando a caixa Animated Favicon. Valide e clique no botão Generate Favicon.ico (Gerar Favicon.ico) para ter uma visão geral do seu Favicon.
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.
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: © Pixabay.
- Como criar o Favicon
- Como criar logo e Favicon para seu site
- Como colocar o Favicon online
- Se seu ícone for animado (GIF)
- Observação
Como criar o Favicon
Você pode criá-lo com um software de desenho (Gimp, Pixia, etc.); com um 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).
Como 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ê. Por conta disso, a plataforma Logaster oferece a criação gratuita de uma logomarca para seu website e, na sequência, sugere diversas opções de Favicons que tenham semelhanças com a logo criada. Assim, você pode escolher uma das alternativas e promover algumas 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 a logomarca criada caso seu objetivo seja obter apenas o Favicon.
Para a maioria dos navegadores
Para começar, crie uma imagem no formato PNG ou GIF (usar formatos padrão). Também podemos usar formatos mais raros (veja o link no final da página). Você também pode escolher diferentes tamanhos, como 16x16 ou 32x32 (em pixels).No Internet Explorer
Como sempre, o IE não respeita os padrões e não utiliza as imagens com o formato correto. Para este navegador, use uma imagem ou formato ICO (ou BMP) e no tamanho 16x16.Para criar um Favicon animado ou apenas um arquivo ICO
Esta ferramenta ajudará a criar facilmente um arquivo ICO, bem como animar seu Favicon. Clique no botão Percorrer e escolha uma imagem do seu computador. Você também pode adicionar o texto que aparecerá depois do ícone, o que criará automaticamente um ícone animado.Para terminar, também é possível gerar um ícone animado sem texto, marcando a caixa Animated Favicon. Valide e clique no botão Generate Favicon.ico (Gerar Favicon.ico) para ter uma visão geral do seu Favicon.
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 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. Vejamos 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: © Pixabay.
Veja também
- Colocar icone no site
- Como colocar icone no site
- Icone site
- Como bloquear sites no google chrome » Dicas - Chrome
- Peggo site oficial » Downloads - Android
- Peggo: baixe MP3s do YouTube e SoundCloud » Dicas - Áudio
- ́www.ssyoutube.com.br site » Downloads - Música
- Baixar videos de qualquer site online » Dicas - Web