{"id":52125,"date":"2025-03-07T15:30:00","date_gmt":"2025-03-07T18:30:00","guid":{"rendered":"https:\/\/www.locaweb.com.br\/blog\/?p=52125"},"modified":"2025-02-25T15:55:27","modified_gmt":"2025-02-25T18:55:27","slug":"o-que-e-favicon-e-como-fazer-um-para-seu-site","status":"publish","type":"post","link":"https:\/\/www.locaweb.com.br\/blog\/temas\/de-olho-no-digital\/o-que-e-favicon-e-como-fazer-um-para-seu-site\/","title":{"rendered":"O que \u00e9 favicon e como fazer um para o seu site?\u00a0"},"content":{"rendered":"\n<p class=\"has-text-align-center\"><em>Saiba tudo sobre o favicon, um pequeno \u00edcone de 16&#215;16 pixels que, embora pequeno, pode influenciar como a sua marca \u00e9 vista na internet.<\/em>\u00a0<\/p>\n\n\n\n<p>Quem tem o costume de utilizar muitas p\u00e1ginas ao mesmo tempo sabe muito bem a import\u00e2ncia de um pequeno \u00edcone que aparece em cada aba do navegador. Ele n\u00e3o existe por acaso! Chama-se favicon e, se voc\u00ea empreende e tem um neg\u00f3cio online, a maneira como o utiliza pode trazer resultados positivos ou negativos para sua marca.&nbsp;<\/p>\n\n\n\n<p>Pode parecer um detalhe bobo, mas ele interfere na presen\u00e7a online do seu neg\u00f3cio. Por\u00e9m, quando aplicado de maneira estrat\u00e9gica e adequada, pode proporcionar uma experi\u00eancia mais coesa para seus clientes e potenciais <a href=\"https:\/\/www.locaweb.com.br\/blog\/temas\/marketing-e-seo\/geracao-de-leads\/\" target=\"_blank\" rel=\"noreferrer noopener\">leads<\/a>.&nbsp;&nbsp;<\/p>\n\n\n\n<p>Assim, <strong>se voc\u00ea quer saber o que \u00e9 um favicon<\/strong>, qual \u00e9 a sua import\u00e2ncia e como implement\u00e1-lo em seu site profissional, <strong>continue lendo<\/strong>!&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>O que \u00e9 um favicon?<\/strong>&nbsp;<\/h2>\n\n\n\n<p>O nome favicon vem da abrevia\u00e7\u00e3o de \u201cfavorite icon\u201d (do ingl\u00eas, \u201c\u00edcone favorito\u201d). Ele pode ser definido como uma <strong>miniatura de um \u00edcone gr\u00e1fico que representa uma marca na internet<\/strong>.&nbsp;&nbsp;<\/p>\n\n\n\n<p>A imagem utilizada geralmente \u00e9 a do logotipo ou as iniciais da empresa. No entanto, \u00e9 poss\u00edvel utilizar at\u00e9 mesmo GIFs e outras <strong>imagens alinhadas com a estrat\u00e9gia da marca<\/strong>.&nbsp;<\/p>\n\n\n\n<p><strong>Leia mais:<\/strong>&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/www.locaweb.com.br\/blog\/temas\/codigo-aberto\/5-melhores-praticas-de-ux-design-no-desenvolvimento-de-sites\/\" target=\"_blank\" rel=\"noreferrer noopener\">5 melhores pr\u00e1ticas de UX design no desenvolvimento de sites<\/a>\u00a0<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/www.locaweb.com.br\/blog\/produtos\/criador-de-sites\/monte-sua-pagina-criador-de-sites-locaweb\/\" target=\"_blank\" rel=\"noreferrer noopener\">Monte uma p\u00e1gina do zero com o Criador de Sites Locaweb<\/a>\u00a0\u00a0<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/www.locaweb.com.br\/blog\/temas\/marketing-e-seo\/otimizar-imagens\/\" target=\"_blank\" rel=\"noreferrer noopener\">Como otimizar imagens? 7 ferramentas para compactar + dicas para melhorar a performance<\/a>\u00a0<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Para que serve um favicon?<\/strong>&nbsp;<\/h2>\n\n\n\n<p>Um favicon serve, principalmente, para facilitar o reconhecimento do site pelo usu\u00e1rio, refor\u00e7ar a imagem da marca na web e transmitir credibilidade para o neg\u00f3cio. Confira outros detalhes sobre o seu uso:&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Facilidade de navega\u00e7\u00e3o e reconhecimento<\/strong>&nbsp;<\/h3>\n\n\n\n<p>Em um mar de abas abertas, <strong>o favicon \u00e9 o farol que facilita a navega\u00e7\u00e3o na web<\/strong>. Isso porque, quando bem aplicado, ele pode ser rapidamente reconhecido pelos usu\u00e1rios, sendo associado a um determinado site ou empresa. A medida contribui para uma <a href=\"https:\/\/www.locaweb.com.br\/blog\/temas\/codigo-aberto\/os-elementos-da-experiencia-do-usuario\/\" target=\"_blank\" rel=\"noreferrer noopener\">boa experi\u00eancia do cliente<\/a>.&nbsp;&nbsp;<\/p>\n\n\n\n<p>Al\u00e9m disso, como o favicon aparece em outras inst\u00e2ncias, <strong>tamb\u00e9m auxilia na localiza\u00e7\u00e3o de p\u00e1ginas marcadas como favoritas <\/strong>e ao buscar algum conte\u00fado no hist\u00f3rico do navegador ou mecanismos de busca, como o Google.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Impacto na imagem da marca<\/strong>&nbsp;<\/h3>\n\n\n\n<p>O favicon <strong>contribui significativamente para a imagem da marca<\/strong>. Enquanto um \u00edcone em alta resolu\u00e7\u00e3o, bem projetado e alinhado \u00e0 identidade visual do site ou da empresa transmite uma mensagem de profissionalismo e confiabilidade, o contr\u00e1rio tamb\u00e9m acontece.&nbsp;<\/p>\n\n\n\n<p>Favicons mal diagramados, de baixa qualidade, n\u00e3o otimizados para v\u00e1rios navegadores ou sem muita rela\u00e7\u00e3o com a marca passam uma ideia de desleixo e amadorismo. Dessa forma, eles podem at\u00e9 mesmo causar uma impress\u00e3o de que a pessoa acessou um site falso, afetando a credibilidade do neg\u00f3cio.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Onde um favicon pode ser adicionado no site?&nbsp;<\/strong>&nbsp;<\/h3>\n\n\n\n<p>O favicon costuma ficar posicionado ao lado esquerdo da aba e no t\u00edtulo da p\u00e1gina, assim como na barra de favoritos e no hist\u00f3rico de navega\u00e7\u00e3o ou antes da <a href=\"https:\/\/www.locaweb.com.br\/registro-de-dominio-web\/\" target=\"_blank\" rel=\"noreferrer noopener\">URL do site,<\/a> na barra de endere\u00e7os.&nbsp;&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Como criar um favicon para o seu site?<\/strong>&nbsp;<\/h2>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"812\" height=\"500\" src=\"https:\/\/www.locaweb.com.br\/blog\/wp-content\/uploads\/2025\/02\/favicon_1-min.jpg\" alt=\"Uma jovem mulher asi\u00e1tica, vestindo uma blusa listrada de branco e preto, segura uma p\u00e1gina com uma logomarca impressa. Na tela do computador posicionado na mesa a sua frente, est\u00e1 a mesma logomarca, que pode ser usada como favicon de um site.\u00a0\" class=\"wp-image-52127\" srcset=\"https:\/\/www.locaweb.com.br\/blog\/wp-content\/uploads\/2025\/02\/favicon_1-min.jpg 812w, https:\/\/www.locaweb.com.br\/blog\/wp-content\/uploads\/2025\/02\/favicon_1-min-500x308.jpg 500w, https:\/\/www.locaweb.com.br\/blog\/wp-content\/uploads\/2025\/02\/favicon_1-min-768x473.jpg 768w, https:\/\/www.locaweb.com.br\/blog\/wp-content\/uploads\/2025\/02\/favicon_1-min-150x92.jpg 150w\" sizes=\"(max-width: 812px) 100vw, 812px\" \/><figcaption class=\"wp-element-caption\"><em>Formas simples e leg\u00edveis s\u00e3o essenciais para um bom favicon.<\/em>\u00a0<\/figcaption><\/figure>\n\n\n\n<p>Antes de qualquer coisa, \u00e9 importante refor\u00e7ar que <strong>o favicon deve seguir a mesma <\/strong><a href=\"https:\/\/www.locaweb.com.br\/blog\/temas\/de-olho-no-digital\/o-que-e-identidade-visual-e-como-criar-uma\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>identidade visual da marca<\/strong><\/a><strong> ou da campanha atual<\/strong>. Isso significa que, se esse fator for alterado ou o logo for atualizado, o favicon tamb\u00e9m deve ser ajustado para manter a coes\u00e3o.&nbsp;&nbsp;<\/p>\n\n\n\n<p>Para criar um favicon, basta seguir os passos abaixo:&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>1. Escolhendo o design certo<\/strong>&nbsp;<\/h3>\n\n\n\n<p><strong>A escolha do favicon deve ser estrat\u00e9gica<\/strong>. Empresas tradicionais ou de <a href=\"https:\/\/www.locaweb.com.br\/blog\/temas\/marketing-e-seo\/marketing-de-nicho-como-criar\/\" target=\"_blank\" rel=\"noreferrer noopener\">nichos<\/a> s\u00e9rios geralmente escolhem uma vers\u00e3o simplificada do logotipo. J\u00e1 companhias modernas podem utilizar imagens diferentes, mas relacionadas \u00e0 marca, ou optar por uma imagem com transpar\u00eancia e at\u00e9 animada.\u00a0<\/p>\n\n\n\n<p>Outra op\u00e7\u00e3o \u00e9 <strong>escolher uma <\/strong><a href=\"https:\/\/www.locaweb.com.br\/blog\/temas\/de-olho-no-digital\/como-descobrir-a-fonte-de-uma-imagem-na-internet\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>imagem<\/strong><\/a><strong> tempor\u00e1ria para campanhas promocionais<\/strong>, como <a href=\"https:\/\/www.locaweb.com.br\/blog\/temas\/black-friday\/como-preparar-seu-site-para-black-friday\/\" target=\"_blank\" rel=\"noreferrer noopener\">Black Friday<\/a> e a Semana do Consumidor, ou eventos sazonais, como Natal, Halloween e o Dia dos Namorados. A quest\u00e3o mais importante aqui \u00e9 que o design fa\u00e7a sentido com a identidade da marca no momento.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>2. Formatos e dimens\u00f5es ideais<\/strong>&nbsp;<\/h3>\n\n\n\n<p>Diversos formatos de arquivo podem ser utilizados para o favicon, sendo <strong>os mais comuns os com finais .ico e&nbsp; .png<\/strong>.&nbsp;&nbsp;<\/p>\n\n\n\n<p>J\u00e1 quando o assunto \u00e9 dimens\u00e3o, o padr\u00e3o tradicional \u00e9 de 16&#215;16 pixels. Por\u00e9m, atualmente, <strong>a recomenda\u00e7\u00e3o \u00e9 disponibilizar algumas op\u00e7\u00f5es de tamanho<\/strong> e <a href=\"https:\/\/www.locaweb.com.br\/blog\/temas\/marketing-e-seo\/otimizacao-de-sites\/\" target=\"_blank\" rel=\"noreferrer noopener\">otimizar o \u00edcone<\/a> para acessos de dispositivos com diferentes resolu\u00e7\u00f5es de tela, al\u00e9m de plataformas mais exigentes.&nbsp;<\/p>\n\n\n\n<p>Dessa forma, <strong>as dimens\u00f5es ideais s\u00e3o<\/strong>:&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>32&#215;32 pixels:<\/strong> para a maioria dos <strong>navegadores de PCs e macOS<\/strong>.\u00a0<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>48&#215;48 pixels:<\/strong> melhor tamanho para a barra de favoritos e resultados em buscadores, bem como o <strong>navegador Safari <\/strong>dos dispositivos macOS e iOS.\u00a0<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>96&#215;96 pixels:<\/strong> para \u00edcones de <strong>atalhos no desktop<\/strong>.\u00a0<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>180&#215;180 pixels:<\/strong> apresenta melhor qualidade em novos <strong>smartphones e tablets<\/strong>, incluindo dispositivos Android e iOS (Apple Touch).\u00a0<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>192&#215;192 pixels ou mais:<\/strong> embora n\u00e3o seja um requisito, oferecer op\u00e7\u00f5es de dimens\u00f5es maiores permite uma melhor qualidade de exibi\u00e7\u00e3o em <strong>navegadores de smart TVs e displays de alta defini\u00e7\u00e3o<\/strong>.\u00a0<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>3. Ferramentas para criar um favicon<\/strong>&nbsp;<\/h3>\n\n\n\n<p>A imagem do favicon deve ser criada pelo seu designer ou equipe de design. Se voc\u00ea j\u00e1 a tiver pronta, no formato quadrado e em alta resolu\u00e7\u00e3o, <strong>\u00e9 poss\u00edvel utilizar gratuitamente alguma ferramenta online para gerar as diferentes dimens\u00f5es e export\u00e1-las no formato .ico<\/strong>.&nbsp;&nbsp;<\/p>\n\n\n\n<p>H\u00e1 v\u00e1rias op\u00e7\u00f5es de geradores de favicon, mas seguem duas indica\u00e7\u00f5es:&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/genfavicon.com\/pt\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Genfavicon<\/strong><\/a>: dispon\u00edvel em portugu\u00eas. Basta subir o arquivo, selecionar as dimens\u00f5es desejadas, ajustar na pr\u00e9-visualiza\u00e7\u00e3o e baix\u00e1-lo.\u00a0<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/realfavicongenerator.net\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>RealFaviconGenerator<\/strong><\/a>: em ingl\u00eas. Suba o arquivo e clique em \u201cNext\u201d ao fim da p\u00e1gina. Ser\u00e1 gerado um pacote do favicon com v\u00e1rias dimens\u00f5es e formatos, al\u00e9m de instru\u00e7\u00f5es completas sobre como aplic\u00e1-lo em diferentes plataformas utilizando HTML ou frameworks para <a href=\"https:\/\/www.locaweb.com.br\/blog\/temas\/codigo-aberto\/full-stack-front-end-e-back-end-quais-sao-as-diferencas\/\" target=\"_blank\" rel=\"noreferrer noopener\">front-end<\/a>, como React, Grunt, Ruby on Rails e outras.\u00a0<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Como adicionar um favicon no seu site?<\/strong>&nbsp;<\/h2>\n\n\n\n<p>Voc\u00ea pode adicion\u00e1-lo ao seu site de duas formas, dependendo do formato utilizado. Para usar <strong>arquivos em formato .png ou .ico<\/strong>, certifique-se de que a imagem desejada esteja nomeada como \u201cfavicon.ico\u201d ou \u201cfavicon.png\u201d e suba o arquivo na pasta public_html do Gerenciador de Arquivos, localizado no painel do seu <a href=\"https:\/\/www.locaweb.com.br\/blog\/produtos\/hospedagem-de-sites\/tipos-hospedagem-de-sites\/\" target=\"_blank\" rel=\"noreferrer noopener\">servi\u00e7o de hospedagem<\/a>. &nbsp;<\/p>\n\n\n\n<p>Se voc\u00ea gerencia seu pr\u00f3prio site e usa <a href=\"https:\/\/www.locaweb.com.br\/servidor-vps\/\" target=\"_blank\" rel=\"noreferrer noopener\">VPS<\/a>, por exemplo, basta colocar a imagem na pasta raiz, a mesma que est\u00e1 configurada no seu servidor web. <strong>Grande parte dos navegadores identificar\u00e1 o favicon nesses formatos<\/strong>.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"Criador de Sites: \u00c9 poss\u00edvel personalizar facilmente? | Locaweb\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/iB-Nfmabnjs?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Usando HTML para incluir o favicon<\/strong>&nbsp;<\/h3>\n\n\n\n<p>Se voc\u00ea deseja uma <strong>imagem animada .gif ou em outro formato<\/strong>, tamb\u00e9m \u00e9 poss\u00edvel usar seu favicon. Fa\u00e7a o mesmo processo anterior e, ent\u00e3o, acesse o arquivo header.php e adicione a <a href=\"https:\/\/www.locaweb.com.br\/blog\/temas\/codigo-aberto\/html-guia-completo-sobre-a-principal-linguagem-da-internet\/\" target=\"_blank\" rel=\"noreferrer noopener\">sintaxe HTML<\/a> abaixo, ao final da tag &lt;head&gt; e antes do fechamento &lt;\/head&gt;:&nbsp;<\/p>\n\n\n\n<p>&lt;link rel=&#8221;shortcut icon&#8221; type=&#8221;image\/gif&#8221; href=&#8221;favicon.gif&#8221; &gt;&nbsp;<\/p>\n\n\n\n<p>Nesse exemplo, utilizamos .gif, mas podem ser aplicados outros formatos, desde que sejam de imagem.&nbsp;&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Configura\u00e7\u00f5es para diferentes plataformas e navegadores<\/strong>&nbsp;<\/h3>\n\n\n\n<p>Para garantir que seu favicon seja exibido corretamente em qualquer navegador, plataforma ou dispositivo, siga as instru\u00e7\u00f5es anteriores, mas<strong> utilize uma sintaxe para cada vers\u00e3o<\/strong>. Por exemplo:&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>&lt;link rel=&#8221;shortcut icon&#8221; href=&#8221;\/favicon.ico&#8221; \/>\u00a0<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>&lt;link rel=&#8221;icon&#8221; href=&#8221;favicon-16&#215;16.png&#8221; sizes=&#8221;16&#215;16&#8243; type=&#8221;image\/png&#8221;>\u00a0<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>&lt;link rel=&#8221;icon&#8221; href=&#8221;favicon-32&#215;32.png&#8221; sizes=&#8221;32&#215;32&#8243; type=&#8221;image\/png&#8221;>\u00a0<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>&lt;link rel=&#8221;icon&#8221; type=&#8221;image\/png&#8221; href=&#8221;\/favicon-96&#215;96.png&#8221; sizes=&#8221;96&#215;96&#8243; \/>\u00a0<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>&lt;link rel=&#8221;apple-touch-icon&#8221; sizes=&#8221;180&#215;180&#8243; href=&#8221;\/apple-touch-icon.png&#8221; \/>\u00a0<\/li>\n<\/ul>\n\n\n\n<p>Pode parecer exagero, mas <strong>esse procedimento garante compatibilidade<\/strong> com navegadores de desktop, <a href=\"https:\/\/www.locaweb.com.br\/blog\/temas\/codigo-aberto\/programacao-para-mobile-tudo-o-que-voce-precisa-saber\/\" target=\"_blank\" rel=\"noreferrer noopener\">dispositivos m\u00f3veis<\/a> e equipamentos inteligentes em diferentes sistemas operacionais.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Erros comuns ao criar um favicon<\/strong>&nbsp;<\/h2>\n\n\n\n<p>Assim como existem as melhores pr\u00e1ticas para desenvolver o seu favicon, tamb\u00e9m h\u00e1 diversos erros que acontecem com frequ\u00eancia durante sua cria\u00e7\u00e3o. Abaixo destacaremos alguns dos <strong>principais pontos de falha em favicons e como evit\u00e1-los<\/strong> ao criar os do seu neg\u00f3cio:&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Exagerar no design<\/strong>&nbsp;<\/h3>\n\n\n\n<p>Como as dimens\u00f5es do favicon s\u00e3o muito pequenas, <strong>o design da imagem deve ser o mais simplificado poss\u00edvel<\/strong>. Caso seu desenho seja complexo, ele pode tornar-se ileg\u00edvel no tamanho reduzido, prejudicando a identifica\u00e7\u00e3o por parte do usu\u00e1rio.&nbsp;<\/p>\n\n\n\n<p>Para que isso n\u00e3o ocorra, opte por vers\u00f5es minimalistas da imagem escolhida, inclusive se ela for apenas as iniciais ou o <a href=\"https:\/\/www.locaweb.com.br\/blog\/temas\/marketing-e-seo\/como-trabalhar-o-branding\/\" target=\"_blank\" rel=\"noreferrer noopener\">logotipo da empresa<\/a>.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Sobrecarga de detalhes<\/strong>&nbsp;<\/h3>\n\n\n\n<p><strong>Ornamentar o design com muitos elementos gr\u00e1ficos ou escolher uma fonte muito detalhada tamb\u00e9m pode prejudicar<\/strong> a legibilidade do favicon.&nbsp;<\/p>\n\n\n\n<p>Assim, se a imagem ou o logo forem muito detalhados, escolha apenas um <a href=\"https:\/\/www.locaweb.com.br\/blog\/temas\/primeiros-passos\/como-criar-uma-marca\" target=\"_blank\" rel=\"noreferrer noopener\">elemento que os represente<\/a> .&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Escolher um \u00edcone de baixa qualidade<\/strong>&nbsp;<\/h3>\n\n\n\n<p>Utilizar uma imagem de baixa qualidade para o seu \u00edcone pode prejudicar a imagem do seu site ou neg\u00f3cio. Para que isso n\u00e3o ocorra:&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Utilize as vers\u00f5es do favicon nos <strong>tamanhos e formatos recomendados;<\/strong>\u00a0<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Certifique-se de que a imagem tenha uma <strong>resolu\u00e7\u00e3o igual ou maior a 96 ppi<\/strong> (pixels por polegada);\u00a0<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Se n\u00e3o souber redimensionar ou converter a imagem, pe\u00e7a ajuda de um profissional de design ou, ent\u00e3o, <strong>utilize um dos geradores de favicon<\/strong> indicados antes.\u00a0<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Ignorar o tamanho e a visibilidade em dispositivos m\u00f3veis<\/strong>&nbsp;<\/h3>\n\n\n\n<p>Por fim, outro erro comum \u00e9 n\u00e3o considerar a visibilidade do favicon em dispositivos m\u00f3veis, como smartphones e tablets.&nbsp;<\/p>\n\n\n\n<p>No Brasil, por exemplo, <a href=\"https:\/\/nic.br\/noticia\/releases\/92-milhoes-de-brasileiros-acessam-a-internet-apenas-pelo-telefone-celular-aponta-tic-domicilios-2022\/\" target=\"_blank\" rel=\"noreferrer noopener\">mais da metade dos acessos ocorre por meio do celular<\/a>. Nesse sentido,<strong> \u00e9 imprescind\u00edvel utilizar favicons adequados <\/strong>e, de prefer\u00eancia, testar a sua legibilidade.&nbsp;<\/p>\n\n\n\n<p>O favicon pode ser apenas um pequeno \u00edcone, mas como voc\u00ea p\u00f4de ver neste artigo, ele influencia muito em como a sua marca \u00e9 vista na internet.&nbsp;&nbsp;<\/p>\n\n\n\n<p>Se voc\u00ea est\u00e1 no processo de cria\u00e7\u00e3o de um site profissional para aumentar a visibilidade do seu neg\u00f3cio e quer uma experi\u00eancia de <a href=\"https:\/\/www.locaweb.com.br\/hospedagem-de-sites-com-dominio-gratis\/\" target=\"_blank\" rel=\"noreferrer noopener\">hospedagem facilitada<\/a>, venha conhecer os planos da Locaweb!&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Saiba tudo sobre o favicon, um pequeno \u00edcone de 16&#215;16 pixels que, embora pequeno, pode influenciar como a sua marca \u00e9 vista na internet.\u00a0 Quem tem o costume de utilizar muitas p\u00e1ginas ao mesmo tempo sabe muito bem a import\u00e2ncia de um pequeno \u00edcone que aparece em cada aba do navegador. Ele n\u00e3o existe por [&hellip;]<\/p>\n","protected":false},"author":60,"featured_media":52128,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[691],"tags":[],"class_list":["post-52125","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-de-olho-no-digital"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.locaweb.com.br\/blog\/wp-json\/wp\/v2\/posts\/52125","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.locaweb.com.br\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.locaweb.com.br\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.locaweb.com.br\/blog\/wp-json\/wp\/v2\/users\/60"}],"replies":[{"embeddable":true,"href":"https:\/\/www.locaweb.com.br\/blog\/wp-json\/wp\/v2\/comments?post=52125"}],"version-history":[{"count":1,"href":"https:\/\/www.locaweb.com.br\/blog\/wp-json\/wp\/v2\/posts\/52125\/revisions"}],"predecessor-version":[{"id":52129,"href":"https:\/\/www.locaweb.com.br\/blog\/wp-json\/wp\/v2\/posts\/52125\/revisions\/52129"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.locaweb.com.br\/blog\/wp-json\/wp\/v2\/media\/52128"}],"wp:attachment":[{"href":"https:\/\/www.locaweb.com.br\/blog\/wp-json\/wp\/v2\/media?parent=52125"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.locaweb.com.br\/blog\/wp-json\/wp\/v2\/categories?post=52125"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.locaweb.com.br\/blog\/wp-json\/wp\/v2\/tags?post=52125"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}