Link Nacional

Favicon: o que é e como inserir no seu site WordPress?

por | Atualizado em 31 de março de 2021 | Notícias

Você já ouviu falar em favicon e sabe o que significa? Ele é um pequeno ícone, mas a sua importância é enorme para quem deseja ter uma marca facilmente identificável na web. Sabe quando estamos navegando na internet e aparece um ícone no canto da aba de navegação ou ao lado da barra de endereços? Então, o que é este símbolo? É o favicon, mas para que serve ele serve?

Este pequeno acessório faz toda a diferença na visualização da marca nos meios digitais, pois ele auxilia o usuário na sua experiência de navegação. Imagine um barco em alto-mar sem uma bússola que o direcione para o ponto que deseja alcançar. O favicon é o instrumento que vai guiar o usuário pelos mares digitais até o seu site.

Hoje a Link Nacional vai mostrar tudo a respeito destes pequenos ícones, mas que fazem uma grande diferença na hora que os usuários reconhecem a sua marca na web. É sempre bom ter em mente que o favicon não é um mero detalhe, por isso, ao elaborar o seu, pense nos aspectos como tamanho e tipo de formato, para evitar complicações em navegadores web ou apps.

A transparência também é outro ponto a se considerar, pois um visual mais limpo ajuda o usuário a reconhecer e relacionar o seu favicon à sua marca. Venha navegar com a gente e descubra como criar o seu favicon, bem como inseri-lo no seu site. Saiba para que serve este ícone e como a Link Nacional te dá uma mãozinha para colocar o seu favicon em seu site!

Continue lendo

Favicon zoom

O que é favicon?

A terminologia favicon é a junção dos nomes favorites + icon, e é exatamente assim que identificamos um: quando nos acostumamos a acessar um site, o seu favicon se torna familiar para nós. Esta é a sua principal função, destacar o seu site em meio ao mar da web, facilitando a vida do usuário na hora de localizar a sua página. O favicon é formado pelo ícone que representa o logotipo da empresa e funciona como uma bússola, orientando o seu cliente até a sua página.

Mas é importante considerar que, como o favicon é criado a partir da logo da sua empresa, é preciso que ele reproduza com clareza a sua marca. Assim, o uso de um visual mais clean e menos pesado ajuda na identificação do seu favicon.

Como gerar um favicon pelo generator?

Se você ainda não tem o favicon pronto, você pode usar o generator, uma plataforma online que cria o seu favicon de modo gratuito. De forma intuitiva, em poucos instantes você vai ver o seu favicon prontinho, bem ao alcance do seu mouse. Siga os passos e veja como gerar o seu bem do seu jeito:

  1. Acesse a página favicon-generator.org;
  2. Selecione a imagem do seu favicon nos formatos PNG, JPG ou GIF;
  3. Selecione o modelo de favicon (web, Microsoft, Android ou IOS ou apenas favicon 16 x 16);
  4. Se você quer manter o mesmo tamanho do seu favicon, selecione “manter a dimensão da imagem”;
  5. Se você quer que o favicon seja salvo na galeria, selecione “incluir favicon na galeria”;
  6. Clique em “Create Favicon”.
O seu favicon já sai do forno pronto para uso!
Print icon generator

Qual o tamanho e o formato ideal?

Sabemos que tamanho não é documento, e o favicon é um exemplo perfeito para esta máxima. Ainda assim, é necessário ter a exata noção da sua medida ideal, pois não pode ser nem muito espaçoso, para não obstruir a navegação, nem muito reduzido, impedindo que o usuário reconheça a sua marca. Assim, a medida ideal é 512 x 512 pixels. Outro aspecto a ser considerado é o formato de arquivo adequado para o favicon, pois isso influencia tanto na qualidade da imagem como na sua adaptação a diferentes navegadores. Por isso, o formato mais recomendado é a extensão PNG.

Como inserir o favicon no meu site?

Se você ainda não colocou o favicon no seu site, chegou a hora de mudar esta história. São várias maneiras possíveis para inserir o seu favicon, depois que você criou o ícone. Uma delas é por meio do código HTML da sua página. Outra alternativa é inserir o favicon a partir do Divi, ou ainda pelos CMS´s, por exemplo, o WordPress.

Mas e se eu não sei como inserir o favicon? A Link Nacional vai mostrar como fazer!

Como inserir o favicon em html no meu site?

Veja como fazer para inserir o favicon no seu site usando html:

HTML icone
  1. Crie o seu favicon;
  2. No cabeçalho da página inicial, insira a tag:
    <link rel=”shortcut icon” href=”/path/to/favicon.ico”>
  3. Utilize uma das strings:
    – “shortcut icon”; – “icon”; – “apple-touch-icon” ou “apple-touch-icon-precomposed”;
  4. A URL do favicon precisa estar no mesmo domínio da página inicial;

Para quem já é cliente da Link Nacional, um caminho mais fácil é inserir o favicon diretamente do Divi, assim você não vai precisar do conhecimento em html para realizar esta operação.

Como inserir o favicon no WordPress

Confira agora o passo a passo para inserir seu favicon no WordPress:

WordPress icone
  1. Acesse o painel de controle do administrador;
  2. Na seção Aparência, clique em Personalizar;
  3. Selecione a Identidade do site;
  4. Embaixo do Ícone do Site, acesse Selecionar Imagem;
  5. Execute o upload do seu favicon;
  6. Após Publicar, salve as alterações efetuadas.
Show de bola! O seu favicon já está no ar, de forma simples e prática!

Como inserir favicon pelo Divi

Para facilitar a sua vida, inserir o favicon pelo Divi é simples e rápido. Os clientes da Link Nacional podem contar com mais esta vantagem:

Divi icone
  1. No WordPress, acesse o painel administrativo;
  2. Acesse o Divi;
  3. Entre em customizador de tema;
  4. Acesse configurações gerais;
  5. Entre em identidade do site;
  6. Selecione a opção ícone do site.

Sem complicação e o seu favicon já está online!

Conclusão

Gostou de saber mais sobre o favicon? Que tal aproveitar e conhecer os serviços da Link Nacional? Temos uma equipe de especialistas em marketing digital e tecnologia! Venha conhecer nossos produtos e serviços e se surpreenda!

Criar site guia

Crie seu Favicon

5 3 votes
Vote no Artigo
guest
Por favor entre com seu nome completo
Digite um endereço de email válido para uma possível notificação de retorno.
Número de whatsApp para eventual notificação de resposta.
0 Comentários
Inline Feedbacks
View all comments

Últimas postagens