Favicon.ico - Guía completa y generador

Todo lo que necesitas saber sobre los archivos favicon.ico : 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 favicon 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 nuestros convertidores de PNG a ICO , JPG a Favicon , SVG a Favicon o WEBP a Favicon.

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?

Un favicon.ico es un pequeño archivo de icono asociado a un sitio web. Su nombre proviene de "icono favorito" (favorite icon), ya que fue creado originalmente por Microsoft para Internet Explorer 5 en 1999 para mostrar iconos junto a las páginas marcadas como favoritas. Hoy en día, los favicons aparecen por todas partes: en las pestañas del navegador, las barras de marcadores, el historial de navegación, 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 favicon: 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 o probar nuestras herramientas específicas para cada formato, como los convertidores de PNG a ICO , JPG a ICO o SVG a ICO.

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 archivo favicon.ico con versiones de 16x16 y 32x32 píxeles, además de un icono táctil de Apple de 180x180 píxeles. Nuestro generador de paquetes de favicon crea todos estos tamaños automáticamente. Para iconos específicos de cada plataforma, prueba el generador de iconos táctiles de Apple o el 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 redimensionador de iconos 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 los favicons en los resultados de búsqueda: deben tener un tamaño múltiplo de 48 píxeles, estar correctamente enlazados y aparecer en una página indexada. Hemos escrito una guía completa sobre cómo solucionar el problema de los favicons 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 verificar la transparencia de su archivo de origen con nuestro Analizador 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 buscadores muestran iconos de página (favicons) junto a tu sitio web en los resultados de búsqueda, lo que mejora la visibilidad de la marca y la tasa de clics. Si el tuyo no aparece, consulta nuestra guía completa para solucionarlo.

Pantalla de inicio móvil

Cuando los usuarios añaden tu sitio a la pantalla de inicio de su teléfono, el icono táctil de Apple o el icono de PWA de Android funcionan como el favicon de tu aplicación. Crea estos iconos con nuestros generadores de iconos para Apple y Android.

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.

El formato PNG con fondo transparente es ideal para la mayoría de los favicons, ya que conserva los bordes nítidos y admite transparencia. El formato SVG es perfecto si tienes un logotipo vectorial: se escala a la perfección y produce resultados nítidos en cualquier tamaño. El formato JPG también funciona, pero no admite transparencia. Puedes convertir cualquier formato utilizando nuestras herramientas PNG a ICO , JPG a Favicon , SVG a Favicon o WEBP a Favicon.

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 los favicons en los resultados de búsqueda. El icono debe ser un 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 reconocer un favicon nuevo o actualizado. Asegúrate de que tu favicon esté correctamente enlazado en la cabecera HTML y pruébalo con nuestro Comprobador de Favicons . Para obtener instrucciones detalladas, consulta nuestra guía completa para solucionar problemas de favicons que no se muestran en Google.

Los favicons animados (en formato GIF o APNG) solo son compatibles con Firefox. Chrome, Safari y Edge mostrarán una imagen estática. Debido a esta compatibilidad limitada, no se recomienda el uso de favicons animados en la mayoría de los sitios web. Si desea probarlos, puede usar nuestro conversor de GIF a ICO , 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 incluyen ajustes de favicon. En WordPress , ve a Apariencia > Personalizar > Identidad del sitio > Icono del sitio. En Shopify , ve a Ajustes > Marca > Favicons. En Squarespace , ve a Diseño > Icono del navegador. Sube una imagen PNG de 512x512 píxeles y la plataforma se encargará del resto. Para un control manual, también puedes subir el archivo favicon.ico a la raíz de tu sitio y añadir las etiquetas HTML al encabezado de tu tema.

Un favicon es el pequeño icono que aparece en las pestañas y marcadores del navegador, generalmente de 16x16 o 32x32 píxeles. Un icono táctil de Apple 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 cumplen la misma función de promocionar tu sitio, pero con diferentes tamaños y en distintos contextos. Puedes crear iconos táctiles de Apple 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.