fbpx
Logo agência ISSO marketing branco

/ blog ISSO Marketing®

Bruno Oliveira - CEO ISSO Marketing®

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.

Imagem destacando o favicon que inserimos em nosso site via html na plataforma wordpress.

Agência ISSO Marketing Digital
Exemplo de favicon da agência ISSO

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!

Compartilhe

Curtiu esse conteúdo? Compartilhe!

Vamos falar sobre o seu projeto, preencha o formulário disponível.
Ou, se preferir contate-nos através de um dos canais de comunicação disponíveis:

Curtiu esse conteúdo? Compartilhe!