{"id":4260,"date":"2017-04-19T01:38:43","date_gmt":"2017-04-18T23:38:43","guid":{"rendered":"https:\/\/blog.hostinger.io\/tutoriales\/?p=4260"},"modified":"2025-01-15T09:53:55","modified_gmt":"2025-01-15T08:53:55","slug":"anadir-favicon","status":"publish","type":"post","link":"\/mx\/tutoriales\/anadir-favicon\/","title":{"rendered":"C\u00f3mo a\u00f1adir un favicon a tu sitio web"},"content":{"rendered":"

Es posible que te encuentres con el término favicon al diseñar y desarrollar un sitio web. Pero, ¿qué es exactamente? En este artículo, responderemos tu pregunta y te mostraremos cómo añadir un favicon a tu sitio web. ¡Empecemos!<\/p>

\"\"<\/a><\/figure>

¿Qué es un favicon y por qué es importante?<\/h2>

En pocas palabras, un favicon es el logotipo que aparece junto al meta título en la pestaña del navegador. Es decir, en lugar de mostrar un icono de documento en blanco en el navegador, se mostrará el icono oficial de tu sitio web.<\/p>

La mayoría de los sitios web suelen utilizar su logotipo como favicon. Si tu sitio no tiene un logo, puedes crear uno con nuestro creador de páginas web<\/a>. De esta manera, tus visitantes notarán fácilmente tu sitio web cuando abran muchas pestañas en una ventana del navegador. Además, tu sitio tendrá un aspecto mucho más profesional.<\/p>

\n
\"Ejemplo<\/figure>\n<\/div>

¿Cómo añadir un favicon a tu sitio web?<\/h2>

Para añadir un favicon a tu sitio web, puedes dejar que los navegadores lo detecten automáticamente o poner el favicon en HTML. A continuación, explicamos ambos métodos en detalle.<\/p>

Dejar que los navegadores detecten automáticamente el favicon<\/h3>

La forma más fácil de añadir un favicon es cargándolo como un archivo .png<\/strong> o .ico<\/strong> desde el Administrador de archivos<\/strong> de tu alojamiento. Sigue estos pasos para hacerlo:<\/p>

    \n
  1. Prepara una imagen de dimensiones cuadradas en formato .png<\/strong> o .ico<\/strong> para el logotipo de tu sitio web.
    <\/li>\n<\/ol>

    Poner favicon en HTML con una imagen de cualquier formato<\/h3>

    Con este método, si tienes una imagen que no sea de formato .png<\/strong> o .ico<\/strong> (jpg, BMP, gif, etc.), también puedes utilizarla como icono de tu sitio web. Sin embargo, necesitas modificar el header de tu tema actual. <\/p>

    Para añadir el favicon en HTML, agrega el siguiente fragmento de código en el header de tu tema:<\/p>

    <link rel=\"icon\" type=\"image\/jpg\" href=\"\/mx\/favicon.jpg\"\/><\/pre>
    En WordPress, sigue estos pasos desde el hPanel.<\/p>
      \n
    1. Una vez que tengas una imagen de dimensiones cuadradas para tu logo, ve a Archivos -> Administrador de archivos -> public_html<\/strong>.<\/li>\n\n\n\n
    2. Sube la imagen a tu carpeta public_html<\/strong>.<\/li>\n<\/ol>
      Si no puedes ver el nuevo favicon, borra la caché del navegador<\/a> y vuelve a iniciarlo.<\/p>
      \"\"<\/a><\/figure>
      Conclusión<\/h2>
      Como puedes ver, tener un favicon en tu sitio web es crucial. No solo hace que tu sitio se distinga en las pestañas del navegador, sino que también le da un aspecto profesional.<\/p>
      Puedes agregarlo automáticamente cargando una imagen .png<\/strong> o .ico<\/strong> llamada favicon<\/strong> a tu carpeta public_html<\/strong>. Alternativamente, puedes poner el favicon en HTML con una imagen en cualquier formato modificando el archivo header.php<\/strong> dentro de la carpeta de temas que utilizas actualmente.<\/p>
      ¿Fue útil este tutorial? ¡Deja un comentario a continuación!<\/p>
              
      \n            
      \n                \n                    \n                <\/svg>\n                
      \n                    Lecturas recomendadas                <\/p>\n            <\/div>\n            
      Cómo añadir un Favicon en WordPress<\/a><\/p>
      Qué es un plugin de WordPress<\/a><\/p>
      Cómo crear un plugin en WordPress<\/a><\/p>\n                    <\/div>\n        <\/p>\n","protected":false},"excerpt":{"rendered":"
      Es posible que te encuentres con el término favicon al diseñar y desarrollar un sitio web. Pero, ¿qué es exactamente? En este artículo, responderemos tu pregunta y te mostraremos cómo añadir un favicon a tu sitio web. ¡Empecemos! ¿Qué es un favicon y por qué es importante? En pocas palabras, un favicon es el logotipo […]<\/p>\n
      Read More…<\/a><\/p>\n","protected":false},"author":138,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"rank_math_title":"C\u00f3mo a\u00f1adir favicon en HTML y autom\u00e1ticamente","rank_math_description":"Un favicon mejora la imagen y la apariencia general de tu sitio web. Aprende c\u00f3mo a\u00f1adir un favicon en HTML y autom\u00e1ticamente a tu sitio.","rank_math_focus_keyword":"favicon html","footnotes":""},"categories":[5701],"tags":[14178],"class_list":["post-4260","post","type-post","status-publish","format-standard","hentry","category-desarrollo-web","tag-anadir-favicon"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/tutorials\/how-to-add-favicon-to-website\/","default":1},{"locale":"pt-BR","link":"https:\/\/www.hostinger.com\/br\/tutoriais\/como-adicionar-favicon-no-site\/","default":0},{"locale":"fr-FR","link":"https:\/\/www.hostinger.com\/fr\/tutoriels\/favicon\/","default":0},{"locale":"es-ES","link":"https:\/\/www.hostinger.com\/es\/tutoriales\/anadir-favicon\/","default":0},{"locale":"en-PH","link":"https:\/\/www.hostinger.com\/ph\/tutorials\/how-to-add-favicon-to-website\/","default":0},{"locale":"en-MY","link":"https:\/\/www.hostinger.com\/my\/tutorials\/how-to-add-favicon-to-website\/","default":0},{"locale":"en-GB","link":"https:\/\/www.hostinger.com\/uk\/tutorials\/how-to-add-favicon-to-website\/","default":0},{"locale":"en-IN","link":"https:\/\/www.hostinger.com\/in\/tutorials\/how-to-add-favicon-to-website\/","default":0},{"locale":"en-CA","link":"https:\/\/www.hostinger.com\/ca\/tutorials\/how-to-add-favicon-to-website\/","default":0},{"locale":"en-AU","link":"https:\/\/www.hostinger.com\/au\/tutorials\/how-to-add-favicon-to-website\/","default":0},{"locale":"en-NG","link":"https:\/\/www.hostinger.com\/ng\/tutorials\/how-to-add-favicon-to-website\/","default":0},{"locale":"es-AR","link":"https:\/\/www.hostinger.com\/ar\/tutoriales\/anadir-favicon\/","default":0},{"locale":"es-MX","link":"https:\/\/www.hostinger.com\/mx\/tutoriales\/anadir-favicon\/","default":0},{"locale":"es-CO","link":"https:\/\/www.hostinger.com\/co\/tutoriales\/anadir-favicon\/","default":0},{"locale":"pt-PT","link":"https:\/\/www.hostinger.com\/pt\/tutoriais\/como-adicionar-favicon-no-site\/","default":0}],"acf":[],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-json\/wp\/v2\/posts\/4260","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-json\/wp\/v2\/users\/138"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-json\/wp\/v2\/comments?post=4260"}],"version-history":[{"count":25,"href":"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-json\/wp\/v2\/posts\/4260\/revisions"}],"predecessor-version":[{"id":44902,"href":"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-json\/wp\/v2\/posts\/4260\/revisions\/44902"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-json\/wp\/v2\/media?parent=4260"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-json\/wp\/v2\/categories?post=4260"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-json\/wp\/v2\/tags?post=4260"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}