Raiola Networks
Favicon: Qué es y cómo añadirlo a tu web

Favicon: Qué es y cómo añadirlo a tu web

Categoría:  Marketing digital, Desarrollo web, Diseño y UX/UI, Temas técnicos sobre webs
Fecha: 22/04/2026
Compartir y resumir con IA (¡Elige tu favorita!):
Haz click en los botones de abajo para obtener un resumen del post. Fórmate con Raiola ¡En un futuro habrá más!
ChatGPT ChatGPT Claude Claude Perplexity Perplexity

Toda web bien presentada tiene un pequeño icono junto al título de la página. Ese pequeño icono se llama favicon y vamos a contarte todo sobre él, porque cumple funciones clave para tu proyecto.

Si no tienes favicon, estás perdiendo mucho en cuanto a identidad visual y profesionalidad de tu web. Afecta negativamente a la navegación, porque si no tienes favicon… transmites sensación de que tu web no está bien configurada.

Así que vamos a darte todas las claves para entender qué es un favicon. También te contaremos cómo crearlo y cómo añadirlo correctamente. Vas a aprender:

  • Qué es un favicon y para qué sirve.
  • Por qué es importante para tu web y tu marca.
  • Qué formatos existen (ICO, PNG y SVG).
  • Cuáles son los tamaños correctos para cada dispositivo.
  • Cómo crear un favicon desde cero.
  • Qué herramientas gratuitas tienes para crearlo.
Índice del artículo

  • Qué es un favicon
  • Qué es un favicon en términos técnicos
  • Por qué es importante tener un favicon en tu web
  • Impacto en la identidad de marca y branding
  • Mejora de la experiencia de usuario (UX)
  • Beneficios del favicon para el SEO
  • Credibilidad y aspecto profesional de tu sitio
  • Formatos de favicon: ICO, PNG y SVG
  • Favicon ICO: el formato estándar
  • Favicon PNG: ventajas y compatibilidad
  • Favicon SVG: escalabilidad y modernidad
  • Cuándo usar cada formato según tus necesidades
  • Tamaño y medidas del favicon
  • Medidas favicon estándar: 16x16 y 32x32 píxeles
  • Tamaños para dispositivos móviles y tablets
  • Favicon para Apple Touch Icon
  • Cómo crear un favicon desde cero
  • Diseñar un favicon profesional: consejos prácticos
  • Herramientas y generador de favicon gratuitos
  • Cómo convertir imagen a favicon
  • ¿Y no puedo crear un favicon con inteligencia artificial?
  • Cómo añadir un favicon a tu web con código HTML
  • Cómo añadir un favicon en WordPress
  • Paso 1: acceder al personalizador
  • Paso 2: abrir identidad del sitio
  • Paso 3: subir la imagen
  • Ventajas de usar el sistema nativo de WordPress
  • Cómo añadir un favicon en Joomla
  • Cómo añadir un favicon en PrestaShop
  • Paso 1: acceder al panel de administración
  • Paso 2: subir el favicon
  • Paso 3: limpiar la caché
  • Problemas comunes con el favicon y cómo solucionarlos
  • El favicon no aparece en el navegador
  • Caché del servidor y del navegador
  • El favicon se ve borroso o pixelado
  • Incompatibilidad entre navegadores
  • Buenas prácticas para optimizar tu favicon
  • Mantener el archivo ligero
  • Usar fondo transparente
  • Evitar texto complejo
  • Usar siempre formato cuadrado
  • El futuro de los favicons: web apps y manifest.json
  • Conclusión e ideas clave sobre favicon

Qué es un favicon

Para empezar, podemos definir favicon como un icono pequeño que identifica tu web de forma visual dentro del navegador.

Normalmente aparece en varios lugares:

  • Pestaña del navegador.
  • Marcadores o favoritos.
  • Historial de navegación.
  • Algunos resultados de búsqueda.
  • Accesos directos del móvil.

Por ejemplo, si te fijas en las pestañas abiertas en tu navegador verás pequeños logotipos junto al nombre de cada página. Ese icono es el favicon.

El término realmente sale de "favorite icon", porque originalmente se utilizaba para identificar páginas guardadas en favoritos. Con el tiempo, se convirtió en un elemento estándar en prácticamente toda página web.

Qué es un favicon en términos técnicos

De forma técnica el favicon es un archivo de imagen asociado a una web que los navegadores cargan automáticamente. Lo que hace es, de hecho, representar esa página.

Tradicionalmente se guardaba como:

favicon.ico

Y se colocaba en la raíz del sitio:

tudominio.com/favicon.ico

Sin embargo, lo normal actualmente es que los navegadores usen un formato PNG o SVG, aunque el concepto sigue siendo ese: representar tu web de forma visual.

Por qué es importante tener un favicon en tu web

Muchos sitios web nuevos no tienen favicon simplemente porque el dueño de la web no sabe que existe o cómo configurarlo.

Sin embargo, añadirlo tiene varias ventajas importantes.

Impacto en la identidad de marca y branding

El favicon es, en realidad, parte de la identidad visual de tu marca.

Digamos que es el elemento que permite a los usuarios identificar tu web de un vistazo entre todas las pestañas del navegador. Imagina esta situación típica:

Un usuario abre 10 pestañas diferentes.

Entre ellas está tu web.

Si tienes un favicon reconocible, el usuario va a identificarlo en nada.

Si no lo tiene, aparece el icono genérico del navegador y tu página pasa más desapercibida.

Por eso las grandes webs cuidan mucho este detalle. Les permite que el reconocimiento visual de su web sea eso: inmediato.

Mejora de la experiencia de usuario (UX)

El favicon facilita la experiencia de usuario. ¿Por qué? Porque mejora la navegación de cualquier web.

Cuando alguien la guarda en favoritos o abre varias webs a la vez, el favicon funciona como una referencia visual rápida.

Esto mejora:

  • La navegación entre pestañas.
  • La identificación de páginas guardadas.
  • La experiencia general del usuario.

Te podría parecer un detalle menor, pero contribuye a que tu web se perciba como mil veces más profesional. Pero hay más.

Beneficios del favicon para el SEO

Aunque el favicon no es un factor directo de posicionamiento, sí tiene un impacto indirecto en el SEO.

Por ejemplo:

  • Mejora el reconocimiento de marca.
  • Facilita que los usuarios vuelvan a tu sitio.
  • Llega a aparecer en resultados móviles de búsqueda.
  • Aumenta la confianza del usuario.

Además, cuando tu web aparece en marcadores o accesos directos, el favicon contribuye a que sea más visible por destacar de forma positiva.

Vale, no te hará subir posiciones en buscadores por sí solo, pero forma parte de una web bien optimizada para posicionamiento SEO.

Credibilidad y aspecto profesional de tu sitio

Una web sin favicon tiende a parecer incompleta.

No da confianza.

Si estás sin favicon el navegador muestra el icono genérico de archivo o documento, algo que se asocia a "malo".

En cambio, cuando un sitio tiene favicon:

  • Refuerza la identidad visual.
  • Transmite profesionalidad.
  • Demuestra atención al detalle.

Es uno de esos pequeños elementos que diferencian una web amateur de una web bien hecha.

Formatos de favicon: ICO, PNG y SVG

Durante muchos años, los favicons solo podían utilizar un formato concreto. Por suerte, en la actualidad tenemos varias opciones para tu favicon.

Los tres formatos principales de favicon son:

  • ICO
  • PNG
  • SVG

Cada uno tiene sus ventajas como verás a continuación.

Favicon ICO: el formato estándar

El formato ICO es el gran clásico. Durante mucho tiempo fue el único compatible con todos los navegadores.

Características:

  • Puede contener múltiples tamaños en un solo archivo.
  • Alta compatibilidad.
  • Reconocido automáticamente por muchos navegadores.

Por eso, incluso hoy, muchos desarrolladores siguen generando un archivo llamado:

favicon.ico

Que después ponen en la raíz del sitio, ya que es la forma más segura de garantizar compatibilidad universal.

Favicon PNG: ventajas y compatibilidad

El formato PNG se ha vuelto muy popular para favicons modernos.

Esto es debido a las ventajas de un favicon PNG:

  • Mejor calidad de imagen.
  • Soporte de transparencia.
  • Fácil de generar desde cualquier editor gráfico.

Además, los navegadores modernos soportan PNG sin problemas.

Por ejemplo, puedes declarar un favicon en HTML así:

<link rel="icon" type="image/png" href="/favicon.png">

Logras así imágenes más limpias y mejor definidas que si optas por el formato ICO de siempre.

Favicon SVG: escalabilidad y modernidad

El formato SVG es vectorial, lo que significa que puede escalarse sin perder calidad. Esto lo hace ideal para pantallas de alta resolución.

Las ventajas del SVG son notables:

  • Escalable a cualquier tamaño.
  • Peso muy ligero.
  • Excelente calidad en pantallas de máxima resolución (retina).

Sin embargo, has de considerar que no todos los navegadores lo manejan igual de bien como favicon principal, por lo que suele usarse como complemento, no como único formato.

Cuándo usar cada formato según tus necesidades

En la práctica, la mejor estrategia suele ser combinar varios formatos.

La configuración típica de favicon sería la siguiente:

  • favicon.ico para compatibilidad universal.
  • favicon.png para navegadores modernos.
  • apple-touch-icon para dispositivos Apple.

Esto garantiza que tu icono se vea correctamente en prácticamente cualquier contexto, y te aporta esa seguridad. Pese a ello, interesa verlo en más detalle.

Tamaño y medidas del favicon

Uno de los errores más comunes al crear un favicon es no utilizar las medidas correctas.

Para evitar que se vea mal o borroso, existen tamaños recomendados.

Medidas favicon estándar: 16x16 y 32x32 píxeles

Los tamaños clásicos son:

  • 16x16 px.
  • 32x32 px.

Estos tamaños se utilizan en:

  • Pestañas del navegador.
  • Barras de direcciones.
  • Marcadores.

Aunque parezcan diminutos, así van a ir perfectos. Tenlo en cuenta porque te ayudará.

Tamaños para dispositivos móviles y tablets

Los dispositivos móviles utilizan iconos más grandes.

Precisamente por eso, son tamaños habituales:

  • 48x48 px.
  • 96x96 px.
  • 192x192 px.

Estos tamaños son habituales en Android y en aplicaciones web progresivas.

Favicon para Apple Touch Icon

Los dispositivos Apple utilizan un icono especial llamado Apple Touch Icon.

Este icono aparece cuando alguien añade tu web a la pantalla de inicio del iPhone o iPad.

En esos casos, el tamaño recomendado es:

180x180 px

Se define normalmente así:

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

Si no configuras este icono, iOS genera uno automáticamente a partir de tu web. Esto da resultados muy poco estéticos, así que cuidado con el detalle.

Cómo crear un favicon desde cero

Crear un favicon es algo que haces en minutos sin conocimientos de diseño gráfico.

Herramienta online para generar un favicon desde una imagen

Diseñar un favicon profesional: consejos prácticos

Debido a su tamaño reducido, un favicon debe ser simple y reconocible.

Así que resultan buenas prácticas:

  • Usar un símbolo claro.
  • Evitar texto largo.
  • Utilizar alto contraste.
  • Priorizar la simplicidad.

Así, muchas marcas utilizan simplemente:

  • La primera letra de su nombre.
  • Un icono del logotipo.
  • O un símbolo reconocible.

Recuerda que se verá en tamaños muy pequeños, por lo que los detalles complejos casi siempre se pierden y no valen la pena.

Herramientas y generador de favicon gratuitos

Existen herramientas online que permiten crear un favicon gratis y de forma automática a partir de una imagen.

Tan sencillo como:

  • Subir una imagen.
  • Generar todos los tamaños necesarios.
  • Descargar el paquete completo.

Estas herramientas generan automáticamente:

  • favicon.ico.
  • favicons en PNG.
  • apple-touch-icon.
  • código HTML listo para copiar.

Esto simplifica mucho el proceso. Por si ayuda, te dejamos otra opción más para crear tu favicon.

Cómo convertir imagen a favicon

El proceso básico suele ser este:

  1. Crear un icono base (normalmente cuadrado).
  2. Subirlo a un generador de favicon.
  3. Descargar los archivos generados.
  4. Subirlos a tu servidor.

Después solo queda añadir el código correspondiente en el HTML de tu web.

¿Y no puedo crear un favicon con inteligencia artificial?

Sí, aunque usualmente se producen pequeñas alucinaciones y detalles raros que hacen poco recomendable usar la IA para crear un favicon.

Cómo añadir un favicon a tu web con código HTML

Lo más frecuente para implementar el favicon es que se haga a través de código HTML. Tan sencillo como irse a la etiqueta <head> de tu web y ponerlo, ya que esto le indica al navegador dónde encontrar el icono y qué formato debe utilizar.

El código que aplicar sería el siguiente:

<link rel="icon" href="/favicon.ico" type="image/x-icon">

Este método está bien porque da un poco igual el navegador, moderno o antiguo, tiende a funcionar bien. Ten en cuenta que cada línea indica al navegador qué icono debe usar en distintas situaciones:

  • Pestañas del navegador.
  • Marcadores.
  • Accesos directos en móviles.
  • Aplicaciones web instaladas.

Al final usar etiquetas diferentes garantizan que tu favicon funcione en todos los dispositivos, por lo que nos parece un acierto implementarlas si es posible.

Cómo añadir un favicon en WordPress

Si utilizas WordPress, añadir un favicon es mucho más sencillo porque no necesitas tocar código.

Por defecto, desde la versión 4.3 WordPress incluye una función nativa llamada "icono del sitio". Así que como siempre el proceso en WP es muy simple.

Paso 1: acceder al personalizador

Ve al panel de administración y entra en:

Apariencia > Personalizar

Paso 2: abrir identidad del sitio

Dentro del personalizador encontrarás una sección llamada:

Identidad del sitio

Aquí verás la opción para subir el icono del sitio, que es el favicon.

Paso 3: subir la imagen

WordPress recomienda subir una imagen de 512 x 512 píxeles.

A partir de esa imagen generará automáticamente los tamaños necesarios. Vamos, que WordPress crea automáticamente:

  • favicon para navegador.
  • Iconos para móviles.
  • Apple touch icon.

Si optas por tener tu web en WordPress, no tendrás que tocar nada más.

Ventajas de usar el sistema nativo de WordPress

Como ves este método tiene varias ventajas:

  • No necesitas editar HTML.
  • WordPress genera los tamaños automáticamente.
  • Es compatible con todos los navegadores.
  • Evita errores de implementación.

Por eso es nuestra opción recomendada para la mayoría de usuarios. Funciona y es muy pero que muy fácil.

Cómo añadir un favicon en Joomla

En el caso del favicon para Joomla, el proceso va a variar más en función de la plantilla que utilices.

Sin embargo, el método más habitual consiste en subir el archivo favicon.ico a la carpeta raíz del sitio.

Normalmente se coloca en:

/templates/tu-plantilla/

Muchos templates modernos incluyen además un campo específico dentro de la configuración del tema para subir el favicon directamente desde el panel.

Si no es así, puedes añadir manualmente la línea HTML en el archivo:

index.php del template

Como siempre, dentro de la etiqueta <head>.

Cómo añadir un favicon en PrestaShop

En PrestaShop también existe una forma sencilla de configurar el favicon desde el panel.

El proceso suele ser el siguiente.

Pasos para configurar un favicon en WordPress

Paso 1: acceder al panel de administración

Entra en:

Diseño > Tema y logotipo

Paso 2: subir el favicon

Dentro de esta sección verás el campo:

Favicon

Solo tienes que subir tu archivo y guardar los cambios. ¿Lo mejor? Que PrestaShop lo aplicará automáticamente en todo el sitio.

Paso 3: limpiar la caché

Después de subirlo, es recomendable limpiar la caché del sistema para que el cambio se vea inmediatamente.

Esto se hace desde:

Parámetros avanzados > Rendimiento

Problemas comunes con el favicon y cómo solucionarlos

Aunque no lo creas, de los problemas más típicos con el favicon es que no aparezca inmediatamente en el navegador.

Esto suele deberse a factores técnicos como los que te contamos a continuación.

Problemas frecuentes con el favicon y cómo solucionarlos

El favicon no aparece en el navegador

Este es el problema más típico, que pasa incluso si el favicon está correctamente configurado.

Las causas habituales son:

La solución más rápida suele ser forzar la actualización del navegador.

Puedes hacerlo con un comando sencillo:

Ctrl + F5

Esto "obliga" al navegador a recargar todos los recursos desde el servidor y suele ser la solución más rápida.

Caché del servidor y del navegador

Los navegadores almacenan favicons en caché durante mucho tiempo. Así, cuando cambias el icono, tienden a tardar en actualizarse.

Soluciones habituales:

  • Limpiar caché del navegador.
  • Abrir la página en modo incógnito.
  • Cambiar temporalmente el nombre del archivo.

Por ejemplo pasas a llamarlo favicon-2.ico y, con eso, consigues que el navegador cargue el nuevo icono.

El favicon se ve borroso o pixelado

Si el favicon se ve borroso casi siempre es por uno de estos motivos:

  • La imagen original tiene baja resolución.
  • Se ha escalado incorrectamente.
  • El diseño tiene demasiados detalles.

Recuerda que los favicons se muestran en tamaños muy pequeños. Por eso es recomendable usar:

  • Diseños simples.
  • Iconos vectoriales.
  • Alto contraste.

Un buen favicon debe ser reconocible incluso en 16x16 píxeles.

Incompatibilidad entre navegadores

Aunque hoy en día los navegadores son bastante compatibles, todavía pueden existir diferencias.

Por ejemplo:

  • Algunos priorizan ICO.
  • Otros usan PNG.
  • Algunos prefieren apple-touch-icon en móviles.

La solución más simple es la que te decíamos antes: definir varios formatos en el HTML. Esto garantiza compatibilidad total.

Buenas prácticas para optimizar tu favicon

Aunque el favicon es un elemento pequeño, también puede optimizarse para mejorar el rendimiento y la experiencia del usuario.

Aquí tienes algunas recomendaciones útiles.

Mantener el archivo ligero

El favicon debe ser muy pequeño. Idealmente menos de 20 KB.

Esto evita añadir peso innecesario a la carga de la página y mejora la velocidad de tu web.

Usar fondo transparente

En muchos casos es útil optar por un fondo transparente para que el icono se adapte bien a distintos navegadores y temas. El formato PNG es perfecto para esto.

Evitar texto complejo

El texto pequeño se vuelve ilegible en tamaños reducidos. Por eso, en lugar de palabras completas, lo mejor es utilizar:

  • Iniciales.
  • Símbolos.
  • Elementos del logotipo.

No metas mucho texto porque no se va a leer.

Usar siempre formato cuadrado

El favicon debe ser siempre cuadrado. Así, las proporciones de favicon más utilizadas son:

  • 1:1
  • 16x16
  • 32x32
  • 180x180

Si usas una imagen rectangular, el resultado suele verse distorsionado por lo que no te lo recomendamos.

El futuro de los favicons: web apps y manifest.json

Con la evolución de las aplicaciones web, los favicons han pasado a formar parte de algo más amplio: las Progressive Web Apps (PWA). Estas aplicaciones permiten instalar una web como si fuera una app móvil.

Para ello utilizan un archivo llamado manifest.json

Este archivo define:

  • Iconos de la aplicación.
  • Nombre del sitio.
  • Colores del tema.
  • Comportamiento de la app.

Los iconos definidos en el manifest también actúan como favicons en la mayoría de contextos. Por eso, lo más común es generar automáticamente:

  • favicon clásico.
  • apple-touch-icon.
  • iconos para PWA.

Todo dentro del mismo paquete, porque te ahorra tiempo al configurar tu icono.

Conclusión e ideas clave sobre favicon

El favicon es uno de los elementos más pequeños de una web, pero también uno de los más importantes para la identidad visual y la experiencia de usuario.

A lo largo de esta guía hemos visto:

  • Qué es un favicon.
  • Para qué sirve.
  • Qué formatos existen.
  • Cuáles son las medidas correctas.
  • Cómo crearlo desde cero.
  • Cómo añadirlo en HTML.
  • Cómo configurarlo en WordPress, Joomla y PrestaShop.
  • Cómo solucionar los problemas más comunes.

Añadir un favicon solo lleva unos minutos y mejora significativamente la percepción de tu sitio.

Jesus Magaña
Jesus Magaña

Jesús Magaña es especialista en SEO y creación de contenido. Comparte su conocimiento de forma clara y accesible desde 2006.

Artículos relacionados

Si te ha gustado este post, aquí tienes otros que pueden ser de tu interés. ¡No dejes de aprender!

Favicon: Qué es y cómo añadirlo a tu web Favicon: Qué es y cómo añadirlo a tu web Qué es un dominio web y para qué sirve realmente Qué es un dominio web y para qué sirve realmente Qué es el copywriting y cómo escribir textos que convierten Qué es el copywriting y cómo escribir textos que convierten Facebook Sharing Debugger: Cómo usarlo y solucionar problemas OG Facebook Sharing Debugger: Cómo usarlo y solucionar problemas OG
Tenemos 40 comentarios en Favicon: Qué es y cómo añadirlo a tu web
Avatar del autor del comentario

Cesar Diaz

16/07/2019 a las 17:35

Gracias infinitas!

Responder
Avatar del autor del comentario

Ángela

31/07/2019 a las 17:13

A ti por comentar :)

Responder
Avatar del autor del comentario

nayive

24/10/2019 a las 23:23

hola, seguí tus pasos, pero no me cambio el favicon en la url, sólo en la página donde la voy editando o donde coloco favoritos, es muy extraño, me gustaría saber que me falta para que me cargue en la URL, me aparece una cala de esqueleto con sombrero negro :(

Responder
Avatar del autor del comentario

Ángela

25/11/2019 a las 13:41

¡Hola Nayive!

Para ver lo que ocurre necesitaría más información ¿solucionaste el problema o todavía te puedo ayudar?
Un saludo.

Responder
Avatar del autor del comentario

Carolina F. Mondelo

03/11/2019 a las 17:07

Me ha venido genial! La página que tú usas en el ejemplo me exporta un formato raro que no es .ico, pero la siguiente que recomiendas, la de favicon generator es genial y encima te lo exporta a un montón de tamaños para según el dispositivo. Me encanta! Muchas gracias!!

Responder
Avatar del autor del comentario

Ángela

25/11/2019 a las 12:38

¡Hola Carolina!

Acabo de probar de nuevo la página y no han hecho cambios desde que escribí el artículo. Te permite descargar el favicon tanto en .png como en .ico. Quizás la interfaz no es muy clara y por eso no encontraste la opción. De todas maneras me alegra saber que una de las otras opciones te ayudó a crear el favicon para tu web. ¡Muchas gracias por comentar!

Responder
Avatar del autor del comentario

Sandra Belen Tapia Valdovinos

17/12/2019 a las 14:24

Me encanto este post, nada mas que me gustaría saber si esta misma la puedan actualizar para blogger y así mismo que el favicon que se muestra en los resultados de búsqueda móvil de Google, ya que realice el código a como dice la pagina de ayuda de Google y no veo que siga apareciendo en los resultados de mi sitio.

De antemano Ángela muchas felicidades por este buen post y muy bella por cierto.

Responder
Avatar del autor del comentario

Ángela

17/06/2020 a las 14:42
Hola Sandra,

Primero, gracias por tu comentario. Por otro lado, espero poder actualizar este artículo más adelante y añadir información como la que propones. Un saludo.
Responder
Avatar del autor del comentario

DAVID

01/07/2020 a las 17:35
Hola, si alguien me puede ayudar, quiero poder asignar un favicon distinto a cada sección de mi web.
¿Alguien sabrá cómo? Le agradezco de antemano
Responder
Avatar del autor del comentario

Blas

26/01/2021 a las 09:32
Hola David. ¿Conseguiste solucionarlo? yo también necesito poner un favicon diferente en algunas páginas.

Ya me dices.
Responder
Avatar del autor del comentario

Blas

26/01/2021 a las 09:35
Encontré este plugin "Per page add to head" pero está desactualizado. Lo voy a probar de todas formas.
Ya te digo algo si me funciona.
Responder
Avatar del autor del comentario

Pedro Garcia

17/01/2020 a las 13:12

No consigo que me salga el fav icon, me ha pedido ayuda un amigo. Lo introduzco desde wordpress pero no se visualiza al acceder desde la web. Alguna idea de que puede ser? Os puedo dejar la web si eso ayuda ????

Responder
Avatar del autor del comentario

Ángela

17/06/2020 a las 14:40
Hola Pedro,

Con las herramientas de desarrollador del navegador puedes comprobar si te está cargando correctamento o que código de error te da. Desde aquí, sin una captura o información más concreta no te puedo ayudar. Si todavía tienes problemas, puedes contactar con nuestro servicio de aplicaciones. Ellos podrán revisar tu caso.
Responder
Avatar del autor del comentario

Manu Smith

11/03/2020 a las 06:22

Hola, me pregunto por qué recomiendas 32x32 px pa el favicon? Siempre tengo esa duda especialmente porque WordPress recomienda 512 x 512 px cosa que tampoco entiendo.

Responder
Avatar del autor del comentario

Ángela

17/06/2020 a las 14:58
Hola Manu,

Desde la versión 4.3 de WordPress, se implementó una función para trabajar los favicons. Este CMS se encarga de hacer con el archivo que le pasas lo necesario y te lo pide a la mayor resolución posible. Como te imaginarás, a día de hoy tenemos tantos dispositivos diferentes que realmente no hay una "resolución única" para este tipo de icono. En el momento en el que se escribió este post, y años antes, se recomendaba 32x32 porque la mayoría de los navegadores de escritorio clásicos usaban el favicon a 16x16 y 32x32. Por lo tanto, para que se viera lo mejor posible, se solía subir a 32x32. A veces incluso a 64x64.

Si utilizas WordPress, sigue las recomendaciones que te da la aplicación, en este caso 512x512.
Responder
Avatar del autor del comentario

Daniel

10/04/2020 a las 17:25
Muy bueno y completo. Gracias
Responder
Avatar del autor del comentario

Ángela

17/06/2020 a las 13:24
Gracias Daniel :)
Responder
Avatar del autor del comentario

ainara

01/06/2020 a las 13:42
Muchas gracias por las explicaciones.
A mi web le ha desaparecido el favicon y cuando intento subirlo desde apariencia, icono del sitio, etc. selecciono mi archivo favicon.ico y al hacer crop me dice que hay un error. ¿Alguna idea de lo que puede estar pasando?

Gracias de antemano
Responder
Avatar del autor del comentario

Alvaro Fontela

04/06/2020 a las 22:30
Hola Ainara, si la imagen esta en el formato correcto, posiblemente el problema venga por las librerías de manipulación de imágenes que tenga tu hosting, ya que por lo que comentas pueden estar fallando.
Responder
Avatar del autor del comentario

Rick

01/06/2020 a las 20:36
Muy bueno y completo.
Responder
Avatar del autor del comentario

Ángela

17/06/2020 a las 13:24
Gracias Rick :)
Responder
Avatar del autor del comentario

Laura

18/06/2020 a las 18:07
Hola!
Cree mi página web en simplesite, como puedo añadir un favicon ahí? Plisss
Responder
Avatar del autor del comentario

Ángela

19/06/2020 a las 10:41
Hola Laura,

Personalmente no he trabajado con ese tipo de software. Estoy segura que tendrá un equipo de soporte en su web que te pueda ayudar. Pregunta a través del contacto de su equipo de desarrolladores.
Responder
Avatar del autor del comentario

Laura

19/06/2020 a las 14:39
Hola, disculpa la molestia
Es que no he recibido respuestas de los desarrolladores ?
Responder
Avatar del autor del comentario

Esteban

03/07/2020 a las 01:55
Muchas gracias por la info !! Estuvo súper la explicación y el paso a paso para crear un favicon!!
Responder
Avatar del autor del comentario

Alvaro Fontela

03/07/2020 a las 19:40
Gracias a ti por leernos Esteban :)
Responder
Avatar del autor del comentario

fernando

27/07/2020 a las 15:06
Gracias , me resulto util para enterder lo que hace el navegador en el momento de hacer la paticion de favicon.ico
Responder
Avatar del autor del comentario

Alvaro Fontela

28/07/2020 a las 21:02
Gracias a ti por comentar Fernando :)
Responder
Avatar del autor del comentario

Lahun Lamat

21/08/2020 a las 15:25
Buen día Angela, podrías decirme como añadir un favicon en CubeCart, te lo agradecería bastante.

Saludos
Responder
Avatar del autor del comentario

Luis González

11/10/2020 a las 19:33
Muchas gracias!!!
Responder
Avatar del autor del comentario

Alvaro Fontela

20/10/2020 a las 18:00
Gracias a ti por tu comentario Luis :)
Responder
Avatar del autor del comentario

Alan

15/10/2020 a las 17:52
Me súper sirvió tu información acerca de los Favicon! Muchas gracias!!
Responder
Avatar del autor del comentario

Andrea Barreiro

16/10/2020 a las 12:57
A ti por comentar, Alan, nos alegra que te haya servido :-)
Responder
Avatar del autor del comentario

Roberto

23/10/2020 a las 23:33
Hola, tengo una duda, si creo varios iconos favicon para los diferentes dispositivos, ¿todos tienen que ir por fuerza en el directorio raíz de mi sitio?, ¿no pueden ir en el directorio de imágenes con el resto de imágenes del sitio web?, ¿no podría estar en el directorio raíz sólo el favicon.ico junto y el resto en formato png en el directorio de imágenes?.
Responder
Avatar del autor del comentario

Ángela

15/12/2020 a las 14:28
¡Hola Roberto!

No tienen que ir por fuerza en el directorio raíz. Si te fijas en el código del apartado "Añadir o cambiar un favicon en HTML" del tutorial en la etiqueta hay un atributo que se llama "rel" que sirve para especificar la URL del recurso que quieres enlazar. En tu caso sería la URL relativa o absoluta del favicon que quieres añadir a tu web.

Por lo tanto, puedes hacer como comentas una carpeta en la que almacenes los favicons o añadirlos al directorio de imágenes.

Un saludo. :)
Responder
Avatar del autor del comentario

Víctor

12/03/2021 a las 11:19
Excelente!
Responder
Avatar del autor del comentario

Hipolito

03/05/2022 a las 10:25
Hola, hay alguna manera de que cada página creada en wordpress tenga su propio favicon?
Responder
Avatar del autor del comentario

David Suárez

22/06/2022 a las 14:09
Buenas Hipolito!

Técnicamente si es posible. Tan solo tienes que añadir el siguiente snippet al functions.php de tu tema hijo:

function cambiar_favicon ($url, $size, $blog_id) {
global $post;
if ( is_page( 'id_de_tu_pagina' ) ) $url = 'ruta_del_favicon';
return $url;
}
add_filter( 'get_site_icon_url','cambiar_favicon', 10, 3 );

En 'id_de_tu_pagina' simplemente pon el ID de la página a la que quieres modificar el favicon y en 'ruta_del_favicon' la url del mismo.

Espero haber sido de ayuda! ?
Responder
Avatar del autor del comentario

Slot

26/12/2022 a las 17:18
Pensé que era muy fácil hacer un favicon. Pero ahora entiendo que hay muchos matices en este asunto: forma, color, significado ... Tuve suerte de encontrar tu artículo. ¡Gracias!
Responder
Avatar del autor del comentario

Alvaro Fontela

29/12/2022 a las 21:41
Gracias a ti por el comentario Slot ;)
Responder