Cómo crear un Favicon para su sitio web: Guía de archivos ICO

Un favicon (abreviatura de "ícono favorito") es el pequeño ícono asociado con su sitio web. Los navegadores lo muestran en la barra de pestañas junto al título de su página, en la lista de marcadores y en el historial del navegador. Los dispositivos móviles lo utilizan cuando los usuarios agregan su sitio a su pantalla de inicio. Los motores de búsqueda pueden mostrarlo en los resultados. Es uno de los elementos visuales más pequeños de su sitio, pero uno de los que se ven con más frecuencia.

Diferentes contextos muestran tu favicon en diferentes tamaños. Para cubrir todos los casos de uso, necesita varias versiones:

16x16 píxeles — Pestañas del navegador. Este es el tamaño de favicon clásico y la versión más pequeña que necesitas. 32x32 píxeles — Accesos directos a la barra de tareas, pestañas del navegador más nuevas en pantallas de alto DPI. 48x48 píxeles — Accesos directos del escritorio de Windows e íconos de sitios.

180x180 píxeles — Icono táctil de Apple. Esto es lo que usa iOS cuando alguien agrega su sitio a su pantalla de inicio. Es el tamaño de móvil más importante. 192x192 píxeles — Icono de la pantalla de inicio de Android Chrome e icono de PWA (aplicación web progresiva). 512x512 píxeles — Pantallas de presentación de PWA y el cuadro de diálogo de instalación de Android.

Formato ICO: El formato de favicon original y el único que funciona en todas partes, incluidos navegadores muy antiguos e Internet Explorer. Un archivo ICO puede agrupar varios tamaños en un solo archivo (normalmente 16x16, 32x32 y 48x48). Para una máxima compatibilidad, cada sitio web debe tener un archivo favicon.ico en el directorio raíz. el Convertidor de PNG a ICO en iformat.io hace que crear uno sea simple.

Formato PNG: La alternativa moderna. Los favicons PNG son más sencillos de crear (una imagen por archivo) y admiten transparencia total. Todos los navegadores modernos admiten favicons PNG. La desventaja es que necesita archivos separados para cada tamaño y es posible que los navegadores muy antiguos no los admitan.

Formato SVG: La opción más nueva. Como SVG es un formato vectorial, un único archivo se adapta perfectamente a cualquier tamaño: sin pixelación ni varios archivos. Los favicons SVG son compatibles con Chrome, Firefox y Edge, pero no con Safari (a partir de principios de 2026). Los favicons SVG también admiten la adaptación al modo oscuro a través de consultas de medios CSS, lo que PNG e ICO no pueden hacer.

La regla más importante del diseño de favicon: mantenlo simple. Su ícono se mostrará tan pequeño como 16x16 píxeles, es decir, una cuadrícula de solo 256 cuadrados. Los detalles finos, las líneas finas y el texto pequeño serán ilegibles en ese tamaño. Los mejores favicons son formas atrevidas y reconocibles con alto contraste.

Utilice su logotipo si funciona en tamaños pequeños. Muchas empresas utilizan solo la primera letra de su nombre o una versión simplificada de su logotipo. Evite las fotografías: se convierten en manchas irreconocibles en 16x16. Los colores sólidos y las formas geométricas simples funcionan mejor. Pruebe su diseño visualizándolo a 16x16 píxeles antes de comprometerse.

Comience con una imagen PNG cuadrada de al menos 512x512 píxeles. Una fuente más grande proporciona resultados más limpios cuando se reduce. Utilice el Convertidor de PNG a ICO para generar su archivo ICO. El convertidor crea una ICO de varios tamaños que contiene versiones de 16x16, 32x32 y 48x48, todo a partir de una única imagen de origen.

Si su imagen de origen es un JPG (como un logotipo exportado desde una herramienta de diseño), utilice el Convertidor de JPG a ICO en cambio. Para logotipos vectoriales en formato SVG, el Convertidor de SVG a ICO produce los resultados más nítidos porque representa el vector en cada tamaño de destino.

Coloque su archivo favicon.ico en el directorio raíz de su sitio web. La mayoría de los navegadores lo encontrarán automáticamente en /favicon.ico incluso sin una etiqueta HTML. Pero para un control explícito y para admitir todos los formatos, agregue estas etiquetas dentro de su HTML <head> sección:

<link rel="icon" type="image/x-icon" href="/favicon.ico"> — Favicon clásico de ICO. <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> — Favicon PNG para navegadores modernos. <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> — Icono de la pantalla de inicio de los dispositivos Apple.

El ícono Apple Touch (180x180 PNG) se muestra cuando los usuarios de iOS agregan su sitio a su pantalla de inicio. Cree una versión PNG de 180x180 píxeles de su ícono con algo de relleno alrededor de los bordes: iOS aplicará sus propias esquinas redondeadas. Nómbrelo apple-touch-icon.png y haga referencia a él en su HTML.

Para Android y aplicaciones web progresivas, necesita íconos PNG de 192x192 y 512x512. Por lo general, se hace referencia a estos en un archivo de manifiesto de la aplicación web (manifest.json o site.webmanifest). El archivo de manifiesto también le permite configurar el nombre de su aplicación, el color del tema y el modo de visualización para cuando los usuarios instalen su sitio como una aplicación.

Usar demasiados detalles: Un logotipo complejo con líneas finas y texto pequeño se ve muy bien a 200 px, pero se convierte en una mancha ilegible a 16 px. Simplifica sin piedad. Olvidar el modo oscuro: Si su favicon usa un color oscuro sobre un fondo transparente, será invisible en los navegadores con barras de pestañas oscuras. Considere agregar un borde claro o usar favicons SVG con CSS en modo oscuro.

No realizar pruebas en tamaño real: Siempre obtenga una vista previa de su favicon en 16x16 en una pestaña del navegador real. Lo que se ve bien en su herramienta de diseño con un zoom del 400% puede no funcionar en tamaño real. Saltando el archivo ICO: Si bien los favicons PNG funcionan en los navegadores modernos, tener un favicon.ico en su directorio raíz garantiza la compatibilidad con todos los navegadores y rastreadores, incluidos los sistemas heredados.

Después de cargar sus archivos de favicon y agregar el HTML, pruebe en varios navegadores: Chrome, Firefox, Safari y Edge como mínimo. Verifique que el ícono aparezca correctamente en la pestaña, en marcadores (marque una página y verifique) y en el dispositivo móvil (agregue a la pantalla de inicio tanto en iOS como en Android). Los cachés del navegador pueden ser agresivos con los favicons: si no ve su nuevo ícono, intente borrar el caché o abrir una ventana de incógnito.

Si necesita ir en la otra dirección (extraer iconos de un archivo ICO existente), el Convertidor de ICO a PNG extrae las imágenes incrustadas. Esto es útil cuando necesita actualizar un favicon pero solo tiene el archivo ICO y no la obra de arte original.

Se tarda cinco minutos en crear un favicon adecuado, pero le da a su sitio web una apariencia pulida y profesional. Comience con un diseño simple y atrevido, genere su archivo ICO con un convertidor en línea, agregue las etiquetas HTML y pruebe en todos los navegadores. Su sitio se verá completo y sus usuarios podrán encontrar su pestaña entre las docenas que tienen abiertas.