{"id":3793,"date":"2024-07-26T18:08:08","date_gmt":"2024-07-26T18:08:08","guid":{"rendered":"https:\/\/hocoos.com\/?post_type=answer&#038;p=3793"},"modified":"2025-12-18T16:04:16","modified_gmt":"2025-12-18T16:04:16","slug":"o-que-e-um-favicon","status":"publish","type":"answer","link":"https:\/\/hocoos.com\/pt\/respostas\/o-que-e-um-favicon\/","title":{"rendered":"O que \u00e9 um Favicon?"},"content":{"rendered":"<div class=\"wp-block-rank-math-toc-block\" id=\"rank-math-toc\"><h2>\u00cdndice<\/h2><nav><ul><li><a href=\"#what-is-a-favicon-used-for\">Para que serve um favicon?<\/a><\/li><li><a href=\"#where-do-favicons-appear\">Onde os favicons aparecem?<\/a><\/li><li><a href=\"#what-are-common-favicon-file-formats\">Quais s\u00e3o os formatos de arquivo comuns para favicon?<\/a><\/li><li><a href=\"#why-are-favicons-important\">Por que os favicons s\u00e3o importantes?<\/a><\/li><li><a href=\"#are-favicons-important-for-seo\">Os favicons s\u00e3o importantes para SEO?<\/a><\/li><li><a href=\"#can-a-favicon-be-animated\">Um favicon pode ser animado?<\/a><\/li><li><a href=\"#what-sizes-are-needed-for-a-favicon-on-each-browser\">Quais tamanhos s\u00e3o necess\u00e1rios para um favicon em cada navegador?<\/a><\/li><li><a href=\"#conclusion\">Conclus\u00e3o<\/a><\/li><\/ul><\/nav><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"exploring-favicon-details\" style=\"font-size:32px\">Explorando os detalhes do favicon&nbsp;<\/h2>\n\n\n\n<p style=\"font-size:18px\">Os principais recursos do favicon s\u00e3o:&nbsp;<\/p>\n\n\n\n<ul style=\"font-size:18px\" class=\"wp-block-list\">\n<li><strong>Imagem quadrada pequena:<\/strong> Geralmente 16 \u00d7 16 ou 32 \u00d7 32 pixels, mas \u00e0s vezes, eles ser\u00e3o diferentes. Os favicons s\u00e3o sempre quadrados e devem caber em qualquer lugar onde voc\u00ea os colocar.&nbsp;<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<ul style=\"font-size:18px\" class=\"wp-block-list\">\n<li><strong>Imagens:<\/strong> Os favicons s\u00e3o normalmente iniciais, um logotipo da empresa ou uma imagem que o p\u00fablico pode reconhecer como associada \u00e0 marca.&nbsp;<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<ul style=\"font-size:18px\" class=\"wp-block-list\">\n<li><strong>Identifica\u00e7\u00e3o: <\/strong>Os favicons s\u00e3o projetados para que os usu\u00e1rios identifiquem um site, especialmente se eles tiverem v\u00e1rias guias ou favoritos abertos.&nbsp;<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<ul style=\"font-size:18px\" class=\"wp-block-list\">\n<li><strong>Identidade:<\/strong> Use favicons para identidade da marca.&nbsp;<\/li>\n<\/ul>\n\n\n\n<p style=\"font-size:18px\">As aplica\u00e7\u00f5es na vida real incluem:&nbsp;<\/p>\n\n\n\n<ul style=\"font-size:18px\" class=\"wp-block-list\">\n<li><strong>Corpora\u00e7\u00f5es e organiza\u00e7\u00f5es<\/strong>: O \u00edcone de ma\u00e7\u00e3 associado \u00e0 Apple, o G colorido do Google e o quadrado azul com \"in\" do LinkedIn s\u00e3o exemplos de favicons.&nbsp;<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<ul style=\"font-size:18px\" class=\"wp-block-list\">\n<li><strong>eCommerce: <\/strong>Lojas online normalmente usam seu logotipo como favicon.&nbsp;<\/li>\n<\/ul>\n\n\n\n<div style=\"height:72px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"what-is-a-favicon-used-for\" style=\"font-size:32px\"><strong>Para que serve um favicon?<\/strong><\/h2>\n\n\n\n<p style=\"font-size:18px\">As marcas usam favicons para branding e experi\u00eancia do usu\u00e1rio.&nbsp;<\/p>\n\n\n\n<ul style=\"font-size:18px\" class=\"wp-block-list\">\n<li><strong>Reconhecimento da marca:<\/strong> Como visto nos exemplos reais anteriores, os favicons s\u00e3o uma dica visual para os usu\u00e1rios identificarem seu website.&nbsp;<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<ul style=\"font-size:18px\" class=\"wp-block-list\">\n<li><strong>Usabilidade:<\/strong> Os favicons s\u00e3o particularmente vis\u00edveis quando um usu\u00e1rio tem v\u00e1rias guias abertas e pode navegar de volta para o seu site.<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<ul style=\"font-size:18px\" class=\"wp-block-list\">\n<li><strong>Profissionalismo: <\/strong>Os usu\u00e1rios notar\u00e3o se voc\u00ea tiver um \u00edcone padr\u00e3o; adicione um favicon para um toque profissional r\u00e1pido.&nbsp;<\/li>\n<\/ul>\n\n\n\n<div style=\"height:72px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"where-do-favicons-appear\" style=\"font-size:32px\"><strong>Onde os favicons aparecem?<\/strong><\/h2>\n\n\n\n<p style=\"font-size:18px\">Voc\u00ea ver\u00e1 favicons nestes locais online:&nbsp;<\/p>\n\n\n\n<ul style=\"font-size:18px\" class=\"wp-block-list\">\n<li><strong>Guias do navegador:<\/strong> Os favicons nas guias do navegador s\u00e3o projetados para que os usu\u00e1rios possam clicar de volta no seu website quando estiverem navegando com v\u00e1rias guias e sites abertos.&nbsp;<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<ul style=\"font-size:18px\" class=\"wp-block-list\">\n<li><strong>Barra de favoritos:<\/strong> Os favicons aparecem quando os usu\u00e1rios adicionam um site aos favoritos; eles ver\u00e3o o \u00edcone em sua lista.&nbsp;<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<ul style=\"font-size:18px\" class=\"wp-block-list\">\n<li><strong>Hist\u00f3rico:<\/strong> Quando os usu\u00e1rios verificam seu hist\u00f3rico de pesquisa, os favicons normalmente aparecem.&nbsp;<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<ul style=\"font-size:18px\" class=\"wp-block-list\">\n<li><strong>Resultados da pesquisa:<\/strong> Alguns mecanismos de busca, como o Google, exibem favicons ao lado dos t\u00edtulos do site e dos artigos.&nbsp;<\/li>\n<\/ul>\n\n\n\n<div class=\"answers-tip-box mt-8 mt-lg-10\">\n<div class=\"answers-small-title\">\n\t\t\t\t\t\t\t\nDica profissional:\n\n<\/div>\n<div class=\"answers-small-description mt-4\">\n\nAo criar um favicon, teste-o em diferentes dispositivos e navegadores. Fa\u00e7a ajustes de tamanho conforme necess\u00e1rio.\n\n<\/div>\n<\/div>\n\n\n\n<div style=\"height:72px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"practical-guidance-on-favicons\" style=\"font-size:32px\">Orienta\u00e7\u00f5es pr\u00e1ticas sobre favicons<\/h2>\n\n\n\n<p style=\"font-size:18px\">Considere o seguinte ao criar e usar favicons:&nbsp;<\/p>\n\n\n\n<ul style=\"font-size:18px\" class=\"wp-block-list\">\n<li><strong>Mantenha a simplicidade:<\/strong> Evite designs complexos, pois os \u00edcones ser\u00e3o pequenos; a simplicidade melhorar\u00e1 o reconhecimento da marca.<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<ul style=\"font-size:18px\" class=\"wp-block-list\">\n<li><strong>Escolha elementos reconhec\u00edveis:<\/strong> Escolha um logotipo, suas iniciais ou uma imagem associada \u00e0 sua marca.<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<ul style=\"font-size:18px\" class=\"wp-block-list\">\n<li><strong>Use alto contraste:<\/strong> Teste para ver se o favicon est\u00e1 vis\u00edvel no Modo Claro, Modo Escuro e em outros cen\u00e1rios.&nbsp;<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<ul style=\"font-size:18px\" class=\"wp-block-list\">\n<li><strong>Crie v\u00e1rios tamanhos:<\/strong> Altere os tamanhos e resolu\u00e7\u00f5es para diferentes plataformas.&nbsp;<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<ul style=\"font-size:18px\" class=\"wp-block-list\">\n<li><strong>Use o formato .ico:<\/strong> Este \u00e9 o formato de favicon mais comum.&nbsp;<\/li>\n<\/ul>\n\n\n\n<div style=\"height:72px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"what-are-common-favicon-file-formats\" style=\"font-size:32px\"><strong>Quais s\u00e3o os formatos de arquivo comuns para favicon?<\/strong><\/h2>\n\n\n\n<p style=\"font-size:18px\">ICO \u00e9 o principal formato de arquivo de favicon, mas voc\u00ea pode usar outros, se desejar.&nbsp;<\/p>\n\n\n\n<ul style=\"font-size:18px\" class=\"wp-block-list\">\n<li><strong>PNG:<\/strong> Usado com navegadores modernos como uma alternativa ao ICO.&nbsp;<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<ul style=\"font-size:18px\" class=\"wp-block-list\">\n<li><strong>SVG:<\/strong> Sigla para Scalable Vector Graphics. Os SVGs s\u00e3o usados em diferentes tamanhos.&nbsp;<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<ul style=\"font-size:18px\" class=\"wp-block-list\">\n<li><strong>GIF:<\/strong> Usado para favicons animados; alguns navegadores os suportam. No entanto, eles aparecem como imagens est\u00e1ticas em outros.<\/li>\n<\/ul>\n\n\n\n<div class=\"answers-tip-box mt-8 mt-lg-10\">\n<div class=\"answers-small-title\">\n\t\t\t\t\t\t\t\nDica profissional:\n\n<\/div>\n<div class=\"answers-small-description mt-4\">\n\nUse geradores de favicon online para converter sua imagem para navegadores e dispositivos. Genfavicon e Favicon Generator s\u00e3o alguns exemplos. \n\n<\/div>\n<\/div>\n\n\n\n<div style=\"height:72px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"why-are-favicons-important\" style=\"font-size:32px\"><strong>Por que os favicons s\u00e3o importantes?<\/strong><\/h2>\n\n\n\n<p style=\"font-size:18px\">Considere usar favicons pelos seguintes motivos:&nbsp;<\/p>\n\n\n\n<ul style=\"font-size:18px\" class=\"wp-block-list\">\n<li><strong>Branding: <\/strong>Os favicons podem refor\u00e7ar<a href=\"https:\/\/hocoos.com\/pt\/respostas\/o-que-e-um-guia-de-estilo-de-design\/\" data-type=\"link\" data-id=\"https:\/\/hocoos.com\/answers\/what-is-a-design-style-guide\/\"> identidade de marca<\/a>; \u00e9 f\u00e1cil para os usu\u00e1rios esquecerem seu site se voc\u00ea tiver um logotipo CMS padr\u00e3o.&nbsp;<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<ul style=\"font-size:18px\" class=\"wp-block-list\">\n<li><strong>Experi\u00eancia do usu\u00e1rio:<\/strong> Visitantes do site usam favicons <a href=\"https:\/\/hocoos.com\/pt\/respostas\/por-que-a-boa-navegacao-do-site-importa\/\" data-type=\"link\" data-id=\"https:\/\/hocoos.com\/answers\/why-does-good-website-navigation-matter\/\">para navega\u00e7\u00e3o<\/a>.&nbsp;<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<ul style=\"font-size:18px\" class=\"wp-block-list\">\n<li><strong>Profissionalismo:<\/strong> Ter um favicon sugere aten\u00e7\u00e3o aos detalhes e que voc\u00ea se importa com as pequenas coisas, enquanto ignorar isso pode diminuir a credibilidade.&nbsp;<\/li>\n<\/ul>\n\n\n\n<div style=\"height:72px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"are-favicons-important-for-seo\" style=\"font-size:32px\">Os favicons s\u00e3o importantes para SEO?<\/h2>\n\n\n\n<p style=\"font-size:18px\">Os favicons n\u00e3o afetam diretamente o SEO, mas isso n\u00e3o significa que voc\u00ea deva ignor\u00e1-los completamente. Os usu\u00e1rios podem clicar no seu site se notarem um favicon nos resultados da pesquisa, o que pode levar a classifica\u00e7\u00f5es mais altas nos mecanismos de pesquisa; \u00e9 f\u00e1cil ignorar ou esquecer um site sem um favicon.<\/p>\n\n\n\n<div style=\"height:72px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"can-a-favicon-be-animated\" style=\"font-size:32px\">Um favicon pode ser animado?<\/h2>\n\n\n\n<p style=\"font-size:18px\">Os Favicons \u00e0s vezes podem ser animados via GIF. Alguns navegadores suportam Favicons GIF e outros n\u00e3o, por isso, vale a pena verificar as regras de cada um que voc\u00ea usa.&nbsp;<\/p>\n\n\n\n<div style=\"height:72px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"what-sizes-are-needed-for-a-favicon-on-each-browser\" style=\"font-size:32px\">Quais tamanhos s\u00e3o necess\u00e1rios para um favicon em cada navegador?<\/h2>\n\n\n\n<p style=\"font-size:18px\">Abaixo est\u00e1 uma tabela com os tamanhos de favicon com base na plataforma em que s\u00e3o usados.&nbsp;<\/p>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><thead><tr><th><strong>Tamanho (Pixels)<\/strong><\/th><th><strong>Caso(s) de Uso<\/strong><\/th><\/tr><\/thead><tbody><tr><td>16&#215;16<\/td><td>Guias e favoritos do navegador&nbsp;<\/td><\/tr><tr><td>32&#215;32<\/td><td>Guias (\u00e0s vezes) e outros monitores de alta resolu\u00e7\u00e3o&nbsp;<\/td><\/tr><tr><td>48&#215;48<\/td><td>\u00cdcones da \u00e1rea de trabalho em computadores Windows<\/td><\/tr><tr><td>64&#215;64<\/td><td>iOS e outras plataformas&nbsp;<\/td><\/tr><tr><td>128&#215;128<\/td><td>Chrome Web Store e outras lojas online<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<div style=\"height:72px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"conclusion\" style=\"font-size:32px\">Conclus\u00e3o<\/h2>\n\n\n\n<p style=\"font-size:18px\">Favicons podem ajudar <a href=\"https:\/\/hocoos.com\/pt\/respostas\/o-que-e-branding-de-website\/\" data-type=\"link\" data-id=\"https:\/\/hocoos.com\/answers\/what-is-website-branding\/\">identidade de marca<\/a> e profissionalismo, mas voc\u00ea deve otimizar seus tamanhos para obter os melhores resultados. Os navegadores normalmente usam 32&#215;32, mas tamanhos maiores s\u00e3o necess\u00e1rios para <a href=\"https:\/\/hocoos.com\/pt\/products\/ai-store-builder\/\" data-type=\"link\" data-id=\"https:\/\/hocoos.com\/products\/ai-store-builder\/\">lojas online<\/a> e outras m\u00eddias. Ao criar um favicon, mantenha-o simples e escolha cores que estejam associadas \u00e0 sua marca. Pense se voc\u00ea deseja usar logotipos, imagens ou \u00edcones.<\/p>","protected":false},"excerpt":{"rendered":"<p>Exploring favicon details&nbsp; Key favicon features are:&nbsp; Real-life applications include:&nbsp; What is a favicon used for? Brands use favicons for branding and user experience.&nbsp; Where do favicons appear? You will see favicons in these places online:&nbsp; Pro Tip: When making a favicon, test it across different devices and browsers. Make sizing adjustments as needed. Practical [&hellip;]<\/p>","protected":false},"author":39,"featured_media":3794,"template":"","answers_category":[28],"class_list":["post-3793","answer","type-answer","status-publish","has-post-thumbnail","hentry","answers_category-website-design"],"acf":{"image":7682,"card_image":3794,"content":[{"acf_fc_layout":"header_section","title":"O que \u00e9 um Favicon?","descriptions":"Favicon stands for \u201cfavorite icon,\u201d and it\u2019s a small square image used by websites and brands.\r\n\r\nNormally, favicons are 16x16 or 32x32 pixels. You\u2019ll see favicons in different places online, such as:\r\n\r\n\u2022 Search engine results pages (SERPs)\r\n\r\n\u2022 (Occasionally) mobile app icons\r\n\r\n\u2022 Browser tabs and address bars\r\n\r\n\u2022 Bookmark lists","tip_label":"Pro Tip","tip":"While favicons are small, users will notice if your site doesn't have them. Use favicons for brand recognition and user experience; if you\u2019re in doubt, start with your logo if you don\u2019t know what to create.","additional_tips":null,"key_takeaways_label":"Key Takeaways:","key_takeaways":[{"label":"Favicons are small images that appear at the top of a website tab in your browser. ","body":""},{"label":"Companies use Favicons for brand recognition and, indirectly, SEO. ","body":""},{"label":"Favicons can be a custom image or logo, and they should use your brand colors. ","body":""}]}]},"_links":{"self":[{"href":"https:\/\/hocoos.com\/pt\/wp-json\/wp\/v2\/answer\/3793","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hocoos.com\/pt\/wp-json\/wp\/v2\/answer"}],"about":[{"href":"https:\/\/hocoos.com\/pt\/wp-json\/wp\/v2\/types\/answer"}],"author":[{"embeddable":true,"href":"https:\/\/hocoos.com\/pt\/wp-json\/wp\/v2\/users\/39"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/hocoos.com\/pt\/wp-json\/wp\/v2\/media\/3794"}],"wp:attachment":[{"href":"https:\/\/hocoos.com\/pt\/wp-json\/wp\/v2\/media?parent=3793"}],"wp:term":[{"taxonomy":"answers_category","embeddable":true,"href":"https:\/\/hocoos.com\/pt\/wp-json\/wp\/v2\/answers_category?post=3793"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}