Como criar um ícone para o seu site usando Favicon
Veja como criar um ícone para seu site que funcione em diferentes navegadores e dispositivos
24/01/2024
Como criar um ícone para o seu site usando Favicon
Introdução: o que é Favicon e para que ele serve?
O Favicon é um pequeno ícone representativo de um site. Ele é exibido em locais como as abas dos navegadores e listas de favoritos. Ele é essencial para a identidade visual de um site.
Neste tutorial, você aprenderá a criar e implementar um Favicon, passo a passo, de forma simples e eficaz.
Escolha da imagem e criação do Favicon
Use uma versão simplificada do logo da sua empresa ou um elemento gráfico que represente seu site ou sua marca. Lembre-se de que a imagem do ícone precisa ser facilmente reconhecível, mesmo em tamanhos pequenos.
Após escolher sua imagem, salve o arquivo com o nome favicon.ico e tamanho de 32x32 pixels. Isso garante boa visibilidade e compatibilidade entre diferentes dispositivos.
Se você não tiver um editor de imagens, use geradores de favicon online como Favicon.cc ou Favicon.io.
Implementação do Favicon
Coloque o arquivo favicon.ico na raiz do diretório do seu site. Isso ajuda os navegadores a encontrarem automaticamente o ícone.
Além disso, adicione o seguinte código dentro da tag <head> em todas as páginas do seu site:
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">Esse código indica para os navegadores qual arquivo deve ser usado como ícone em seu site.
Ícone do Site para Android e iPhone
Crie uma imagem com 192x192 pixels e salve-a como favicon-192x192.png em formato PNG transparente. Este tamanho e formato garantem a melhor compatibilidade entre dispositivos Android e iPhone.
Em seguida, envie o arquivo favicon-192x192.png para a raiz do seu site e adicione o seguinte código dentro da tag <head> em todas as páginas do seu site:
<link rel="icon" sizes="192x192" href="/favicon-192x192.png">
<link rel="apple-touch-icon" href="/favicon-192x192.png">Pronto! Agora tanto Android como iPhone usarão este arquivo como ícone do seu site.
Conclusão
Seguindo estes passos, você garante uma melhor identificação visual do seu site, melhorando a experiência do usuário em diferentes plataformas.