HTML Favicon
Nosso objetivo neste artigo é mostrar a você os fundamentos dos favicons HTML, incluindo como criá-los, otimizá-los para diferentes dispositivos e navegadores e escolher o correto.
Você já reparou no pequeno ícone ao lado do título de um site nas guias do navegador ou na barra de favoritos? Esse pequeno ícone é chamado de favicon, que significa “ícone favorito”. O favicon do seu site promove o reconhecimento da marca, melhora a experiência do usuário e destaca o seu site.
Favicons são os ícones que aparecem nas páginas da web em HTML . As guias do navegador exibem um favicon ao lado do título da página.
Sites e blogs usam favicons para se representarem online. Um favicon OU HTML Favicon é um pequeno arquivo que contém um ou mais ícones. Também é chamado de ícone de guia, ícone de site, ícone de URL ou ícone de marcador.
Como adicionar um Favicon em HTML
Seu favicon HTML pode ser qualquer imagem de sua preferência. Um site como o favicon.io também pode ajudá-lo a criar um favicon para o seu site.
O favicon deve ser uma imagem simples e de alto contraste, pois é uma imagem pequena.
Na aba do navegador, o título da página é acompanhado por uma imagem de favicon, conforme a imagem abaixo.
Para adicionar um favicon ao seu site, salve a imagem do favicon no diretório raiz do seu servidor da Web ou crie uma pasta chamada images no diretório raiz e armazene a imagem do favicon lá. “ favicon.ico ” é um nome popular para uma imagem de favicon.
Para finalizar, adicione um elemento <link> após o elemento <title> em seu arquivo index.html:
HTML Favicon Example
Salve o arquivo “index.html” e recarregue-o em seu navegador. A imagem do favicon agora deve aparecer à esquerda do título da página na guia do navegador da web.
Aqui está outro exemplo do favicon onde você o encontrará no compilador:
Example:
Estilo de favicon
Favicon também pode ser estilizado com o uso de propriedades CSS aqui como podemos fazer isso:
Example:
Suporte ao formato de arquivo Favicon
Aqui estão os formatos de arquivo em que uma imagem de favicon HTML pode ser salva:
| Navegador | ICO | PNG | GIF | JPEG | SVG |
|---|---|---|---|---|---|
| cromada | Sim | Sim | Sim | Sim | Sim |
| Borda | Sim | Sim | Sim | Sim | Sim |
| Safári | Sim | Sim | Sim | Sim | Sim |
| Ópera | Sim | Sim | Sim | Sim | Sim |
| Raposa de fogo | Sim | Sim | Sim | Sim | Sim |
Marca de link HTML
| Marcação | Visão geral |
|---|---|
| <link> | Um recurso externo e sua relação com um documento. |
Confira nossa referência de tags HTML para encontrar uma lista completa de todas as tags HTML.
Conclusão
Um favicon, um elemento pequeno, mas fundamental do web design, pode ter um grande impacto na experiência do usuário e no reconhecimento da marca. Você pode melhorar o envolvimento do usuário criando um favicon que se alinhe com o esquema de cores, estilo e mensagem da sua marca.
Além disso, você pode garantir que seu favicon funcione bem em todas as plataformas, otimizando-o para diferentes dispositivos e navegadores. A capacidade de trabalhar com favicons é uma habilidade essencial para web designers, independentemente de seu nível de experiência.
Não se esqueça de adicionar um favicon ao seu site, caso ainda não o tenha feito. Seu site pode ser aprimorado visual e funcionalmente com um pouco de esforço, para que se destaque da multidão.
