fbpx

Inserindo um ícone favicon em html5

Índice do conteúdo

Inserindo um ícone favicon em html5

Todo projeto online merece um ícone que representa sua marca na barra de navegação dos navegadores, seja em notebook, desktops, tablets ou smartphones. Embora hoje você encontre vários softwares e plataformas que facilitam esse trabalho, aprender a inserir um ícone favicon de maneira manual vai te ajudar a aprender novas técnicas manuais e que possivelmente vai te ajudar a evitar futuras frustrações ao modificar ou incrementar um site.

O que significa favicon

Segundo a Wikipédia, a palavra favicon origina de duas palavras em inglês: favorite e icon. Os favicons são pequenas imagens que ficam guardados no site para visualização pelo navegador. Geralmente são utilizados como logotipos em tamanho reduzido, nos sites de empresas, entidades e marcas quaisquer.

Código para inserir favicon

Agora vamos compartilhar com você o código para inserir um favicon em seu site.

				
					<link rel="shortcut icon" href="img/favicon.ico">
				
			

Perceba que no final do código, em href= temos a palavra img (que informa para o navegador o caminho que está hospedado o seu arquivo, em seguida o nome e formato do arquivo).

Formato do favicon: “.ico ou .png”?

Você pode utilizar arquivos com o formato .ico, .gif e .png para inserir um favicon em seu website. No entanto, o formato mais utilizado é o formato .ico.

Inserir um favicon no formato .ico em seu site garante que todos os navegadores disponíveis no mercado façam a leitura do código e exiba seu ícone sem enfrentar nenhum tipo de problema, inclusive navegadores de dispositivos móveis Android e iOS. No comum, arquivos com a extensão .ico são mais leves e ágeis durante o carregamento, economizando o consumo de banda do plano de internet do usuário e colaborando para melhor desempenho do seu projeto.

Atualmente, muitos desenvolvedores estão adotando os ícones em sites no formato .png e não têm enfrentado problemas. Mas, a recomendação dos especialistas em desenvolvimento da #IssoQueÉMarketing continuam recomendando inserir seus ícones no formato .ico.

Como criar ou converter seu arquivo para o formato .ico

Existem várias maneiras de gerar um arquivo no formato .ico, e agora vamos abordar umas das mais utilizadas principalmente pelo nosso time de desenvolvedores de sites aqui na agência digital #IssoQueÉMarketing:

Corel Draw

Se você utiliza o software de criação Corel Draw, você pode exportar seu arquivo para o formato .ico diretamente pelo software. Veja como é simples:

  1. Com seu desenho aberto na tela, clique em Arquivo e em seguida clique em Exportar.
    Se você preferir, pressione as teclas de atalho Ctrl + E simultaneamente.
  2. Uma caixa de diálogo vai ser aberta. Em Tipo:, selecione ICO – Recurso de ícone do windows 3.x/NT.
  3. Clique em Exportar.
  4. Uma nova janela de título “Converter em bitmap” vai ser aberta informando as configurações do arquivo. Caso necessário, realize os ajustes de largura, altura e resolução para aplicar em seu projeto.
    Vale lembrar que as dimensões recomendadas para um favicon é de 16×16 px. Isso não é uma regra, mas é uma dica!
  5. Se todas as configurações estiverem de acordo com seu projeto, clique em Ok.
    Pronto, você acabou de gerar seu arquivo com a extensão .ico utilizando o corel draw.

Protoshop

Exportar uma imagem com o formato .ico no photoshop também é simples, porém é necessário instalar um plugin em seu software para inserir essa função, que não vêm de fábrica. Siga os passoa abaixo para gerar seu ícone do photoshop:

  1. Faça o download e instale o plugin ICO (Windows Ico) Format da Telegraphics em seu Photoshop.
  2. Com seu desenho aberto na tela, clique em Arquivo e em seguida clique em Salvar como….
  3. Uma caixa de diálogo vai ser aberta. Em Formato:, selecione ICO e clique em Salvar.
  4. Em seguida, na próxima janela selecione Standard ICO e clique em OK.
    Pronto, você acabou de gerar seu arquivo com a extensão .ico utilizando o photoshop.

Convertio

O site convertio.co permite que você converta seu arquivo de imagem em .png, .gif, .jpeg e / ou .bmp para o formato .ico em poucos segundos. Veja como é simples o procedimento:

  1. Acesse o site https://convertio.co.
  2. Clique sobre Selecionar arquivos.
  3. Escolha o caminho onde está o arquivo de imagem que deseja converter e clique am Abrir.
  4. Clique em Converter.
  5. Aguarde o rápido processo de conversão, em seguida clique em Descarregar.
    O download do seu arquivo .ico vai iniciar e em seguida você poderá inserí-lo em seu projeto com a extensão .ico.

Esse conteúdo foi útil pra você?

Espero que você tenha gostado da leitura e absolvido mais conhecimentos com a ajuda desta matéria. Precisamos da sua ajuda para continuar criando e compartilhando conteúdos com essa mesma qualidade, se possível compartilhe em suas redes sociais utilizando os botões disponíveis abaixo.

Compartilhe esse conhecimento com um amigo! 

Share on linkedin
Share on facebook
Share on twitter
Share on telegram
Share on whatsapp

Compartilhou? Agora comente aqui o que achou desse post, e se surgir alguma dúvida pode perguntar que eu respondo!
Mas antes, deixa eu me apresentar pra você:

Bruno Oliveira

Bruno Oliveira

Programador, designer gráfico e estudante de tecnologia em análise e desenvolvimento de sistemas.
Curto aprender e re-aprender técnicas de tecnologia e compartilhar com pessoas do mesmo interesse.

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Leia também…

O blog #IssoQueÉMarketing está repleto de conteúdos relacionados a desenvolvimento, tecnologia e marketing digital.
Invista seu tempo em conhecimento, leia mais artigos!

Incremente seu site com Google Maps

Incremente seu site com Google Maps

Inúmeros são os benefícios em inserir os mapas do Google em seu...

As importâncias de criar e compartilhar conteúdos

Alcance públicos com qualidade com o tráfego orgânico, crie conteúdos!

Publicidade

Rolar para cima