¿Basta con un único archivo favicon.ico?

Normalmente sí para los navegadores de escritorio, siempre que contenga los tamaños de 16, 32 y 48 px. Pero la pantalla de inicio del iPhone y el lanzador de Android necesitan archivos PNG aparte, así que conviene prepararlos también.

¿Por qué no aparece mi nuevo favicon?

Casi siempre es la caché. Abre la página en una ventana privada, borra los datos del navegador, o cambia el nombre del archivo o añade un parámetro ?v=2. Los buscadores pueden tardar varios días o más en actualizar su copia del icono.

¿Puede un favicon ser un JPG?

Algunos navegadores lo aceptarán, pero JPG no tiene transparencia y no es la opción normal. Usa PNG, ICO o SVG.

Cómo crear un favicon: tamaños, formatos y código HTML

Un favicon es el pequeño icono del sitio que aparece en las pestañas del navegador, en los marcadores y en los resultados de búsqueda. Parece un detalle, pero una web sin él da sensación de estar sin terminar, y un tamaño o formato incorrecto puede dejar el icono borroso. Esta guía explica qué tamaños necesitas, qué formato elegir y qué código poner en tu página.

Qué es un favicon y dónde aparece

Un favicon (de «favorite icon», icono favorito) es una pequeña imagen cuadrada que los navegadores muestran junto al título de la página en una pestaña, en la lista de marcadores y en el historial. En el móvil, los resultados de búsqueda de Google también muestran un icono del sitio junto a la dirección, así que un favicon claro ayuda a que la gente reconozca tu web.

Si no declaras ningún icono, los navegadores suelen intentar obtener /favicon.ico de la raíz del sitio. Cuando no existe, muestran un símbolo genérico de globo terráqueo o de página en blanco.

Qué tamaños necesitas

No existe un único tamaño universal, porque cada lugar usa archivos distintos. En la práctica basta con un pequeño conjunto, y puedes prepararlo todo a partir de un único PNG cuadrado de al menos 512 px por lado.

Tamaño	Se usa para
16x16 px	Pestaña del navegador (pantallas de densidad estándar)
32x32 px	Pestaña en pantallas de alta densidad, barra de tareas
48x48 px	Algunos navegadores y buscadores, accesos directos de Windows
180x180 px	apple-touch-icon, cuando se añade un sitio a la pantalla de inicio de un iPhone o iPad
192x192 px	Manifiesto web, pantalla de inicio de Android
512x512 px	Manifiesto web, pantallas de bienvenida e iconos de aplicación más grandes

ICO, PNG o SVG

ICO es un formato contenedor antiguo que puede guardar varios tamaños (por ejemplo 16, 32 y 48 px) en un solo archivo. Todos los navegadores lo admiten, por lo que /favicon.ico sigue siendo útil como respaldo.

PNG es sencillo y fiable: sirve para las versiones de 32, 180, 192 y 512 px y admite transparencia. SVG es un formato vectorial compatible con los navegadores modernos: un solo archivo se mantiene nítido a cualquier tamaño e incluso puede adaptarse al modo oscuro. Sin embargo, Safari y algunas herramientas antiguas gestionan los favicons SVG solo en parte, así que lo más seguro es combinarlos: ICO como respaldo, PNG para los iconos de Apple y del manifiesto, y SVG como extra opcional.

Cómo crear un favicon a partir de un PNG

Empieza con una imagen cuadrada, idealmente de 512x512 px o más, con un diseño claro y sencillo. Si solo tienes un JPG, puedes convertirlo primero a PNG para poder añadir después un fondo transparente en un editor de imágenes.

Prepara un PNG cuadrado con un logotipo sencillo o una sola letra.
Conviértelo a ICO con una herramienta de PNG a ICO y guárdalo como favicon.ico.
Guarda por separado copias en PNG de 180x180 (apple-touch-icon.png), 192x192 y 512x512 para el manifiesto web.
Sube los archivos a la raíz del sitio y añade las etiquetas HTML al <head>.

Las etiquetas HTML que debes añadir

Coloca estas líneas dentro del <head> de tu página (ajusta las rutas a la ubicación real de tus archivos):

En site.webmanifest, dentro de icons, indica los archivos PNG de 192x192 y 512x512. Si no tienes un SVG, simplemente omite esa línea.

Errores habituales

Imagen no cuadrada: el navegador la comprime o la recorta y el icono se ve deformado. Parte siempre de una imagen cuadrada.
Demasiado detalle: a 16x16 px el texto pequeño y las sombras se convierten en una mancha. Usa una forma sencilla, colores intensos y un contraste fuerte.
Origen demasiado pequeño: ampliar una imagen pequeña la deja borrosa. Reducir una grande es mucho más seguro.
Fondo transparente en una pestaña oscura: un logotipo oscuro puede desaparecer. Compruébalo con los temas claro y oscuro o añade un color de fondo.
Caché: los navegadores guardan los favicons con tozudez, así que el icono antiguo puede seguir apareciendo tras cambiarlo. Prueba en una ventana privada, fuerza la recarga (Ctrl+F5) o añade una versión, como /favicon.ico?v=2.

Un ejemplo completo de principio a fin

Supongamos que tienes un logotipo en PNG de 1024x1024 px y quieres un conjunto completo de iconos para tu sitio. Primero mira el logotipo reducido a 16x16 px: ¿sigues reconociendo la forma? Si no, crea una versión simplificada, por ejemplo solo la primera letra sobre un fondo liso. Solo entonces exporta los tamaños.

Después prepara los archivos: favicon.ico (16, 32 y 48 px en un solo archivo), apple-touch-icon.png (180x180), icon-192.png e icon-512.png. Son cuatro archivos, suficientes para casi cualquier situación. Súbelos a la raíz del sitio, añade las etiquetas al <head> y abre la página en una ventana privada para comprobar el resultado.

Cómo comprobar que todo funciona

Abre https://tu-sitio/favicon.ico directamente en el navegador: deberías ver el icono, no un error 404.
En las herramientas para desarrolladores (F12, pestaña Red) recarga la página y confirma que las solicitudes del icono devuelven el estado 200.
Mira la pestaña con los temas claro y oscuro del navegador: el logotipo debe seguir siendo legible en ambos.
En el móvil, añade el sitio a la pantalla de inicio y comprueba que se muestra el icono de 180 px y no una captura de la página.
Asegúrate de que site.webmanifest es un JSON válido y de que las rutas que contiene coinciden con archivos reales.