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

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.

Domínios hospedados
Clientes satisfeitos