{"id":3259,"date":"2025-10-06T16:09:25","date_gmt":"2025-10-06T14:09:25","guid":{"rendered":"https:\/\/tecnologia.euroinnova.com\/favicon-en-html-descubre-como-ponerlo\/"},"modified":"2025-10-07T14:52:24","modified_gmt":"2025-10-07T12:52:24","slug":"favicon-en-html","status":"publish","type":"post","link":"https:\/\/tecnologia.euroinnova.com\/fr\/favicon-en-html","title":{"rendered":"Favicon en HTML : d\u00e9couvrez comment le mettre en place"},"content":{"rendered":"

Cuando empiezas a navegar por internet, seguro que llegas a ese momento en el que tienes un mont\u00f3n de pesta\u00f1as abiertas. \u00bfC\u00f3mo sabes moverte entre ellas y saber exactamente cu\u00e1l es cada una de las p\u00e1ginas abiertas? \u00a1A trav\u00e9s del favicon!<\/strong> En esa situaci\u00f3n, solo se ve el logo de cada uno de los sitios webs, lo que recibe el nombre de favicon.<\/p>\n

En Euroinnova queremos explicarte c\u00f3mo poner un favicon en HTML, aunque tambi\u00e9n te explicaremos otras formas. Por ejemplo, puedes dejar que los navegadores detecten autom\u00e1ticamente el favicon<\/strong>, aunque no sea la mejor opci\u00f3n. \u00bfEst\u00e1s preparado? \u00a1Comenzamos!<\/p>\n

\u00bfQu\u00e9 es un favicon y por qu\u00e9 deber\u00edas conocerlo?<\/strong><\/h2>\n

Como ya hemos comentado, el favicon es el logotipo<\/strong>, que t\u00fa elijas, que aparece junto al meta t\u00edtulo<\/strong> en la pesta\u00f1a de tu navegador. En otras palabras, consiste en decirle al navegador que muestre la imagen que le indicas en el HTML en lugar de mostrar un espacio en blanco. Esto es interesante porque la gente va a recordar tu favicon, lo que genera autoridad para tu marca.<\/p>\n

Crear un favicon<\/strong> es muy sencillo, ya que existen multitud de webs que te permiten generar el tuyo propio en cuesti\u00f3n de segundos. Sin embargo, aqu\u00ed tienes que tener en cuenta otros aspectos como la identidad visual de tu marca. Piensa que es un elemento que el usuario va a relacionar directamente con tu marca.<\/p>\n

Para ahondar m\u00e1s en el concepto de favicon<\/strong>, antes de explicarte c\u00f3mo ponerlo en el HTML,<\/strong> vamos a hablar de sus funcionalidades.<\/p>\n

\u00bfPara qu\u00e9 sirve un favicon?<\/strong><\/h3>\n

A continuaci\u00f3n, te vamos a mostrar un peque\u00f1o listado con los motivos por los que debes cuidar tu favicon:<\/p>\n

    \n
  • Identidad visual:<\/strong> sirve para identificar de un simple vistazo a tu marca Sobre todo, en esos momentos en los que los usuarios tienen muchas pesta\u00f1as abiertas.<\/li>\n
  • Profesionalismo:<\/strong> poner un favicon en el HTML indica que tienes un cuidado extremo con todos los detalles de la web, lo que indica un nivel de profesionalismo admirable.<\/li>\n
  • Facilidad de acceso:<\/strong> un favicon tambi\u00e9n se visualiza en la barra de marcadores o en los favoritos de tu navegador. Por ello, debes tenerlo en cuenta para que te localicen de forma r\u00e1pida.<\/li>\n
  • Personalizaci\u00f3n:<\/strong> tu favicon no solo puede reflejar tu marca, sino que tambi\u00e9n el contenido de tu web.<\/li>\n
  • Formatos compatibles:<\/strong> en este aspecto, existe cierta flexibilidad porque se aceptan formatos de imagen como PNG y GIF.<\/li>\n
  • F\u00e1cil implementaci\u00f3n:<\/strong> \u00bfc\u00f3mo se pone un favicon en el HTML? Justo te vamos a contestar a esta pregunta.<\/li>\n<\/ul>\n

    \u00bfC\u00f3mo pone un favicon en HTML?<\/strong><\/h2>\n

    En Euroinnova, te mostramos el paso a paso que debes seguir para implementar un favicon en HTML.<\/strong> \u00a1Vamos!<\/p>\n

    Crea tu favicon<\/strong><\/h3>\n

    Como venimos diciendo, existen multitud de opciones para generar tu propio favicon. Al final, se trata de una imagen cuadrada que debe respetar las siguientes medidas: 16×16 p\u00edxeles, 32×32 p\u00edxeles o 48×48 p\u00edxeles.<\/strong> Es importante que especifiques el tama\u00f1o en el HTML, pero el navegador es el que, en \u00faltima instancia, elegir\u00e1 el tama\u00f1o m\u00e1s apropiado seg\u00fan el contexto.<\/p>\n

    El formato de la imagen<\/strong><\/h3>\n

    El formato adecuado para una compatibilidad m\u00e1xima es el .ico<\/strong>, pero tambi\u00e9n puedes usar otros formatos como .png<\/strong> o .gif.<\/strong> Lo importante aqu\u00ed es revisar que tanto el formato como el tama\u00f1o son los correctos.<\/p>\n

    Sube el favicon a tu servidor<\/strong><\/h3>\n

    Este paso es realmente sencillo. Tan solo tienes que cargar tu favicon desde el Administrador de archivos<\/strong> de tu alojamiento o hosting. Prepara la imagen en formato .ico o .png, por ejemplo, y realiza la operaci\u00f3n de subida.<\/p>\n

    Poner el favicon en el HTML<\/strong><\/h3>\n

    Cuando ya tengas tu favicon subido al alojamiento, tienes que ir al c\u00f3digo de tu p\u00e1gina web. En la parte del head, deber\u00e1s a\u00f1adir una nueva l\u00ednea:<\/p>\n

    <link rel=\u00bbicon\u00bb sizes=\u00bb16×16 32×32 48×48″ type=\u00bbimage\/png\u00bb href=\u00bbimages\/myicon.png\u00bb \/><\/strong><\/em><\/p>\n

    Para que no te quede ninguna duda, vamos a explicarte el significado de cada atributo:<\/p>\n

      \n
    • rel=\u201dicon\u201d:<\/strong> con esta etiqueta le estamos diciendo que se trata del favicon de la web.<\/li>\n
    • sizes=\u201d16\u00d716 32\u00d732 48\u00d748\u2033:<\/strong> aqu\u00ed, como ys sabemos, tenemos que decirle directamente a la web el tama\u00f1o de nuestro favicon.<\/li>\n
    • type=\u201dimage\/png\u201d:<\/strong> le decimos a nuestra web que se trata de una imagen en formato .png.<\/li>\n
    • href=\u201dimages\/myicon.png\u201d:<\/strong> en este punto, le comunicamos la ubicaci\u00f3n del archivo de imagen del favicon.<\/li>\n<\/ul>\n

      Guarda los cambios<\/strong><\/h3>\n

      Una ve que guardes los cambios en tu archivo HTML,<\/strong> podr\u00e1s abrir el navegador web para ver tu favicon. Si no aparece, puede ser que tengas que refrescar la cach\u00e9. Ten mucho cuidado con esto.<\/p>\n

      \u00bfExisten tipos especiales de faviconos?<\/strong><\/h2>\n

      S\u00ed, un aspecto importante que debes saber es que existen dos tipos especiales de iconos no est\u00e1ndar en el navegador Safari. Se trata de apple-touch-icon<\/strong> para dispositivos iOS y mask-icon<\/strong> para los casos en los que la navegaci\u00f3n se produzca a trav\u00e9s de macOS.<\/p>\n

      A continuaci\u00f3n, te mostramos c\u00f3mo se pondr\u00eda en HTML<\/strong> en ambos casos.<\/p>\n

      apple-touch-icon<\/strong><\/h3>\n

      <link rel=\u00bbapple-touch-icon\u00bb sizes=\u00bb180×180″ href=\u00bbimages\/myicon.png\u00bb \/><\/em><\/p>\n

      mask-icon<\/strong><\/h3>\n

      Aqu\u00ed debemos tener en cuenta que el icono debe ser un SVG monocrom\u00e1tico y debe incorporar el atributo color.<\/p>\n

      <link rel=\u00bbmask-icon\u00bb href=\u00bbimages\/myicon.svg\u00bb color=\u00bb#226DAA\u00bb \/><\/em><\/p>","protected":false},"excerpt":{"rendered":"

      Cuando empiezas a navegar por internet, seguro que llegas a ese momento en el que tienes un mont\u00f3n de pesta\u00f1as […]<\/p>\n","protected":false},"author":2,"featured_media":871,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[1],"tags":[],"class_list":["post-3259","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-sin-categorizar"],"acf":[],"_links":{"self":[{"href":"https:\/\/tecnologia.euroinnova.com\/fr\/wp-json\/wp\/v2\/posts\/3259","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tecnologia.euroinnova.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tecnologia.euroinnova.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tecnologia.euroinnova.com\/fr\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/tecnologia.euroinnova.com\/fr\/wp-json\/wp\/v2\/comments?post=3259"}],"version-history":[{"count":0,"href":"https:\/\/tecnologia.euroinnova.com\/fr\/wp-json\/wp\/v2\/posts\/3259\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/tecnologia.euroinnova.com\/fr\/wp-json\/wp\/v2\/media\/871"}],"wp:attachment":[{"href":"https:\/\/tecnologia.euroinnova.com\/fr\/wp-json\/wp\/v2\/media?parent=3259"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tecnologia.euroinnova.com\/fr\/wp-json\/wp\/v2\/categories?post=3259"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tecnologia.euroinnova.com\/fr\/wp-json\/wp\/v2\/tags?post=3259"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}