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) e em seguida o nome e formato do arquivo.
Formato do favicon: “.ico ou .png”?
Você pode utilizar arquivos com o formato .ico, .gif, .webp, .svg 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 ISSO:
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:
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.
Uma caixa de diálogo vai ser aberta. Em Tipo:, selecione ICO – Recurso de ícone do windows 3.x/NT.
Clique em Exportar.
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!
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:
Faça o download e instale o plugin ICO (Windows Ico) Format da Telegraphics em seu Photoshop.
Com seu desenho aberto na tela, clique em Arquivo e em seguida clique em Salvar como….
Uma caixa de diálogo vai ser aberta. Em Formato:, selecione ICO e clique em Salvar.
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:
Acesse o site https://convertio.co.
Clique sobre Selecionar arquivos.
Escolha o caminho onde está o arquivo de imagem que deseja converter e clique am Abrir.
Clique em Converter.
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.
Conclusão
Agora que você conferiu nossas dicas para inserir um icone em seu site html, junto com o código e 03 maneiras de gerar ou converter seu arquivo .ico, que tal por em prática e ver o resultado?
Precisando de uma agência para desenvolver seu projeto? Nós da ISSO Marketing somos especialistas em criação de sites, blogs e loja virtual profissional com layout ultra moderno, responsivo e painel gerenciável, fale conosco!
Continue acompanhando nosso trabalho, compartilhamos sempre dicas legais para desenvolvedores iniciantes e avançados. Comente abaixo qual foi sua experiência!