Favicon.ico - Guía completa y generador

Todo lo que necesitas saber sobre favicon.ico Archivos: qué son, qué tamaños usar, compatibilidad con navegadores y cómo crear uno. Usa nuestro generador gratuito a continuación para crear un paquete completo de faviconos a partir de cualquier imagen.

Favicon Generator

Suelta tu imagen aquí

o haga clic para explorar los archivos

PNG JPG GIF WEBP SVG
Las imágenes cuadradas de alta resolución funcionan mejor (256 px o más)

¿Necesitas un formato específico? Prueba nuestro PNG a ICO, JPG a Favicon, SVG a Favicon o WEBP a Favicon Convertidores

Herramientas de favicon relacionadas:
PNG a ICO ICO a PNG SVG a Favicon Comprobador de favicon Analizador de ICO Paquete de faviconos Todas las herramientas de favicon

¿Qué es un archivo Favicon.ico?

A favicon.ico Es un pequeño archivo de icono asociado a un sitio web. Su nombre proviene de "icono favorito"; fue creado originalmente por Microsoft para Internet Explorer 5 en 1999 para mostrar iconos junto a las páginas marcadas. Hoy en día, los faviconos aparecen en todas partes: en las pestañas del navegador, la barra de marcadores, el historial del navegador, los resultados de búsqueda e incluso en las pantallas de inicio de los dispositivos móviles.

El .ico Este formato es especial porque puede contener imágenes de varios tamaños en un solo archivo. Un favicon.ico típico incluye versiones de 16x16, 32x32 y 48x48 píxeles, lo que permite a los navegadores elegir el tamaño adecuado para cada contexto. Si bien los navegadores modernos también admiten faviconos PNG y SVG, .ico El formato sigue siendo la opción más compatible universalmente.

Todo sitio web debería tener un favicono: ayuda al reconocimiento de marca, mejora la experiencia del usuario cuando los visitantes tienen varias pestañas abiertas e incluso puede influir en la tasa de clics en los resultados de búsqueda. Puedes crear uno con nuestro generador (más arriba) o probar nuestras herramientas específicas para cada formato, como PNG a ICO, JPG a ICO o SVG a ICO Convertidores

Tamaños de favicon: ¿cuáles necesitas?

Cada contexto requiere un tamaño de favicon diferente. Aquí tienes un desglose de cada tamaño, dónde se usa y si realmente lo necesitas.

Tamaño donde se usa Formato Prioridad
16x16 Pestañas del navegador, barra de direcciones ICO/PNG Esencial
32x32 Pestañas del navegador Retina, accesos directos de la barra de tareas ICO/PNG Esencial
48x48 Windows accesos directos del sitio ICO Recomendado
64x64 Windows atajos de alto DPI ICO/PNG Opcional
128x128 Chrome Web Store PNG Opcional
180x180 Icono táctil de Apple (pantalla de inicio de iOS) PNG Esencial
192x192 Pantalla de inicio de Android (PWA) PNG Recomendado
256x256 Windows 10/11 fichas, atajos grandes ICO/PNG Opcional
512x512 Pantalla de presentación de PWA, adaptable a Android PNG Recomendado

Como mínimo, necesitas un favicon.ico que contenga versiones de 16x16 y 32x32, además de un ícono Apple Touch de 180x180. Nuestro Generador de paquetes de favicon Crea todos estos tamaños automáticamente. Para íconos específicos de la plataforma, prueba Generador de iconos táctiles de Apple or Generador de iconos de Android.

Formatos de favicon: ICO, PNG y SVG

Actualmente se utilizan tres formatos principales para faviconos. Cada uno tiene sus ventajas y desventajas.

Formato ICO

El formato original de favicon. Permite agrupar varios tamaños en un solo archivo. Compatible con todos los navegadores, incluidas las versiones antiguas de Internet Explorer.

Soporte universal
Varios tamaños en un solo archivo
Tamaño de archivo más grande
Sin escala vectorial

Formato PNG

Alternativa moderna compatible con transparencia. Requiere archivos separados para cada tamaño. Ideal para íconos táctiles de Apple y manifiestos de PWA.

Soporte de transparencia
Tamaño de archivo más pequeño
Un tamaño por archivo
No se permite IE 10 o inferior

Formato SVG

Formato vectorial que se adapta perfectamente a cualquier tamaño. Admite consultas de medios CSS para el modo oscuro. La compatibilidad con navegadores aún es limitada.

Escalabilidad infinita
Soporte de modo oscuro
Sin soporte para Safari (parcial)
Las imágenes complejas pierden detalles

El mejor enfoque es utilizar los tres: un .ico archivo como respaldo, archivos PNG para dispositivos Apple y Android, y un SVG para navegadores modernos. Utilice nuestro SVG a Favicon convertidor si tiene un logotipo vectorial, o convertir desde PNG, JPG o WEBP.

Cómo añadir un favicon a tu sitio web

Añadir un favicono implica dos pasos: subir los archivos y añadir etiquetas de enlace HTML a tus páginas. Esta es la configuración recomendada para una cobertura máxima de navegadores y dispositivos.

Configuración completa del favicon HTML 
<link rel="icon" type="image/x-icon" href="/es/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/es/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/es/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/es/apple-touch-icon.png">
<link rel="icon" type="image/svg+xml" href="/es/favicon.svg">
<link rel="manifest" href="/es/site.webmanifest">

Instrucciones paso a paso

  1. Genera tus faviconos Usando la herramienta anterior, recibirás un archivo ZIP con todos los archivos necesarios.
  2. Subir todos los archivos (favicon.ico, archivos PNG, apple-touch-icon.png) al directorio raíz de su sitio web.
  3. Añadir las etiquetas HTML se muestra arriba en el interior de la <head> Sección de cada página. La mayoría de las plataformas CMS (WordPress, Shopify, Squarespace) tienen una configuración de favicon dedicada.
  4. Pon a prueba tu favicon usando nuestro Comprobador de favicon Herramienta para verificar que todo funciona correctamente.
  5. Borrar caché del navegador Si está actualizando un favicono existente, los navegadores almacenan en caché los faviconos de forma intensiva. Intente... Ctrl+Shift+R para forzar una recarga.
La mayoría de los navegadores buscan automáticamente /favicon.ico En el directorio raíz de su sitio, incluso sin etiquetas HTML. Sin embargo, añadir etiquetas de enlace explícitas garantiza una visualización uniforme en todos los navegadores y dispositivos.

Compatibilidad del navegador con formatos de favicon

Navegador
ICO
PNG
SVG
animado
Chrome
Firefox
Safari
Edge
Opera
El icono de guion (-) indica compatibilidad parcial. Safari solo admite faviconos SVG en versiones recientes (16.4+) con algunas limitaciones. Para una compatibilidad total, incluya siempre una alternativa de ICO. Utilice nuestro Comprobador de favicon para probar su sitio.

Solución de problemas de favicon

Los faviconos pueden ser sorprendentemente complicados. Aquí te explicamos los problemas más comunes y cómo solucionarlos.

Asegúrese favicon.ico está en el directorio raíz de su sitio web (por ejemplo, https://example.com/favicon.ico). Compruebe que el archivo sea accesible; intente abrirlo directamente en su navegador. Verifique que las etiquetas de enlace HTML estén dentro. <head>no, <body>.

Los navegadores almacenan en caché los faviconos de forma muy intensiva. Prueba a borrar la caché de tu navegador con Ctrl+Shift+Delete, o hacer una actualización completa con Ctrl+Shift+RTambién puedes agregar una cadena de consulta que elimine el caché: /favicon.ico?v=2En Chrome, prueba chrome://favicon/ para ver faviconos almacenados en caché.

Comienza con una imagen de origen de alta resolución (al menos 256x256, idealmente 512x512). Asegúrate de que tu favicon.ico incluya versiones de 16x16 y 32x32 para pantallas retina. Usa nuestro Cambiar tamaño de icono o el generador de arriba para obtener la mejor calidad.

Verifique los permisos de los archivos en su servidor: los archivos de favicono deben ser de lectura pública (permisos 644). Verifique también que su servidor devuelva el tipo MIME correcto (image/x-icon para archivos .ico). Algunos proveedores de alojamiento bloquean ciertos tipos de archivos por defecto.

Google tiene requisitos estrictos para mostrar faviconos en los resultados de búsqueda: deben ser múltiplos de 48 píxeles, estar correctamente enlazados y estar en una página indexada. Escribimos un... Guía completa para solucionar los faviconos que no se muestran en Google que cubre cada escenario paso a paso.

Comience con un archivo PNG con fondo transparente. Los archivos JPG no admiten transparencia. Al convertir, seleccione "Transparente" como opción de fondo. Puede comprobar la transparencia de su archivo de origen con nuestro Analizador de ICO.

¿Sigues teniendo problemas? Por favor. Contactar con nosotros ¡Y estaremos encantados de ayudarte!

¿Dónde aparecen los faviconos?

Pestañas del navegador

Su favicon aparece junto al título de su sitio web en las pestañas del navegador, lo que ayuda a los usuarios a identificar su sitio entre varias pestañas abiertas.

Puntos de libro

Cuando los usuarios marcan su sitio como favorito, el favicono hace que sea más fácil encontrar y reconocer su sitio web en su lista de favoritos.

Historia del navegador

Los faviconos aparecen en el historial del navegador, lo que facilita que los visitantes encuentren y regresen a su sitio web.

Los accesos directos de escritorio

Cuando los usuarios crean un acceso directo en el escritorio a su sitio web, el favicon se convierte en el ícono de acceso directo en su escritorio.

Resultados de la búsqueda

Google y otros motores de búsqueda muestran faviconos junto a tu sitio en los resultados de búsqueda, lo que mejora la visibilidad de la marca y las tasas de clics. Si el tuyo no aparece, consulta nuestra guía de solución completa.

Pantalla de inicio móvil

Cuando los usuarios agregan tu sitio a la pantalla de inicio de su teléfono, el ícono de Apple Touch o el ícono de PWA de Android actúa como un favicon similar al de tu aplicación. Créalos con nuestro Apple y Android generadores de iconos.

Preguntas frecuentes sobre Favicon.ico

Un archivo favicon.ico suele tener menos de 100 KB. El archivo ICO ideal para varios tamaños de imágenes (16x16, 32x32 y 48x48) suele tener entre 5 y 15 KB. Si tu favicon es mucho más grande, considera optimizar la imagen original o reducir el número de tamaños incrustados. Nuestro generador crea automáticamente archivos favicon.ico de tamaño óptimo.

PNG con fondo transparente funciona mejor con la mayoría de los faviconos, ya que conserva bordes limpios y admite transparencia. SVG es ideal si tiene un logotipo vectorial: se escala perfectamente y produce los resultados más nítidos en cualquier tamaño. JPG también funciona, pero no admite transparencia. Puede convertir desde cualquier formato con nuestro PNG a ICO, JPG a Favicon, SVG a Favicon o WEBP a Favicon tools.

Sí, aún deberías incluir un archivo favicon.ico. Algunos navegadores y herramientas aún buscan específicamente... /favicon.ico en el directorio raíz. Sin él, podrías ver errores 404 en los registros de tu servidor. El formato ICO también ofrece la mayor compatibilidad con navegadores y clientes de correo electrónico antiguos. Nuestro generador crea ambos formatos automáticamente.

Comienza con una imagen PNG con fondo transparente (no JPG, ya que JPG no admite transparencia). Súbela al generador de arriba y selecciona "Transparente" como opción de fondo. El favicon.ico generado conservará la transparencia. Si la imagen original tiene un fondo sólido que deseas eliminar, usa un editor de imágenes como Photoshop, GIMP o un... online Primero, use la herramienta de eliminación de fondo.

Google tiene requisitos específicos para mostrar faviconos en los resultados de búsqueda. El icono debe ser múltiplo de 48 píxeles (48x48, 96x96, etc.), tener un diseño visualmente distintivo (sin contenido ofensivo) y la página debe estar indexada por Google. Google puede tardar días o semanas en detectar un favicon nuevo o actualizado. Asegúrate de que tu favicon esté correctamente enlazado en el encabezado HTML y pruébalo con nuestro... Comprobador de faviconPara obtener una guía detallada, lea nuestro Guía completa para solucionar el problema de los faviconos que no se muestran en Google.

Los faviconos animados (con GIF o APNG) solo son compatibles con Firefox. Chrome, Safari y Edge mostrarán un marco estático. Debido a su compatibilidad limitada, no se recomiendan los faviconos animados para la mayoría de los sitios web. Si quieres probarlos, puedes usar nuestro GIF a ICO convertidor, pero tenga en cuenta que la mayoría de los visitantes verán una versión estática.

La mayoría de las plataformas CMS modernas tienen configuraciones de favicon integradas. En WordPress, vaya a Apariencia > Personalizar > Identidad del sitio > Icono del sitio. En Shopify, vaya a Configuración > Marca > Faviconos. En SquarespaceVe a Diseño > Icono del navegador. Sube un PNG de 512x512 y la plataforma se encarga del resto. Para control manual, también puedes subir favicon.ico a la raíz de tu sitio y agregar las etiquetas HTML al encabezado de tu tema.

Un favicono es un pequeño icono que aparece en las pestañas y marcadores del navegador, generalmente de 16x16 o 32x32 píxeles. Un icono Apple Touch es un icono más grande (180x180 píxeles) que se usa cuando alguien agrega tu sitio web a la pantalla de inicio de su iPhone o iPad. Ambos tienen la misma función: promocionar tu sitio web, pero con diferentes tamaños y contextos. Puedes crear iconos Apple Touch con nuestro... Generador de iconos táctiles de Apple.

Sí, puedes configurar diferentes faviconos para diferentes páginas usando diferentes <link rel="icon"> etiquetas en cada página <head>Esto a veces lo utilizan las aplicaciones web para mostrar notificaciones o sitios web multimarca. Sin embargo, para la mayoría de los sitios web, se recomienda un favicon único y consistente en todas las páginas para un mejor reconocimiento de marca.

Un favicon no es un factor de posicionamiento directo, pero afecta indirectamente al SEO. Google muestra faviconos en los resultados de búsqueda, y un icono reconocible puede mejorar la tasa de clics. Un favicon ausente también genera errores 404 en los registros del servidor, lo que desperdicia el presupuesto de rastreo. Tener un favicon adecuado transmite profesionalidad y confianza tanto a los usuarios como a los motores de búsqueda.