Generador de favicon: ICO, íconos PNG y manifest

Un favicon es el pequeño ícono que aparece en las pestañas del navegador, los marcadores, el historial y los resultados de búsqueda junto al nombre de tu sitio. En los celulares, versiones más grandes aparecen en la pantalla de inicio cuando alguien guarda tu sitio. Un ícono claro hace que tu sitio sea fácil de encontrar entre decenas de pestañas abiertas y se ve más profesional.

Cada lugar necesita tamaños y formatos distintos. Los navegadores todavía buscan favicon.ico, los dispositivos de Apple usan un PNG de 180 px, Android y las apps web instalables leen los íconos de un web manifest, y los buscadores prefieren íconos de al menos 48 px.

Los tamaños que necesitas

Los tamaños de favicon, explicados en una línea cada uno: 16 y 32 px son para las pestañas del navegador, 48 px para Windows y los resultados de búsqueda, 180 px para el ícono táctil de Apple, y 192 y 512 px para Android y el manifest de las apps web. Este generador crea todos, más versiones de 64, 96, 128, 256 y 384 px para otros usos.

Agrega un logo, idealmente cuadrado y de al menos 512 por 512 píxeles. Un PNG con fondo transparente o un SVG dan los resultados más nítidos. Elige un fondo transparente o sólido, agrega margen si el diseño toca los bordes y redondea las esquinas si quieres un ícono estilo app. Las vistas previas muestran el ícono a 16, 32, 48 y 180 px sobre fondos claros y oscuros, para que juzgues cómo se ve en pestañas reales.

Escribe el nombre de tu app y el color del tema para el manifest, y presiona Descargar paquete de favicon. También puedes descargar solo el favicon.ico o un PNG de 512 px.

Partir de un PNG

Para crear un favicon a partir de un PNG, empieza con la versión más grande que tengas. Reducir una imagen grande produce íconos pequeños nítidos, mientras que agrandar una imagen diminuta produce desenfoque. Si tu logo es ancho, considera usar solo su símbolo o su inicial, porque el texto se vuelve ilegible a 16 px.

favicon.ico

El archivo favicon.ico se crea con una conversión de PNG a ICO que guarda imágenes de 16, 32 y 48 px dentro de un solo archivo. Los navegadores modernos y Windows leen íconos comprimidos en PNG, lo que mantiene ligero el archivo y limpios los bordes.

Dispositivos de Apple

El tamaño del ícono táctil de Apple es de 180 por 180 píxeles. iOS rellena las zonas transparentes con negro, así que cuando tu fondo es transparente, el generador le pone automáticamente a este ícono un fondo sólido con el color de tu tema.

Android y apps web

Los íconos del web manifest en site.webmanifest son PNG de 192 y 512 px, incluida una versión adaptable (maskable) para Android, que recorta los íconos en círculos o cuadrados redondeados. Mantén lo importante del diseño dentro del 80 % central del ícono para que no se corte nada.

Descomprime el paquete y sube los archivos a la carpeta raíz de tu sitio web, el mismo lugar que tu página de inicio. Luego copia el fragmento HTML en la sección head de cada página, o en la plantilla de tu sitio. El fragmento enlaza el ICO, los PNG de 16 y 32 px, el ícono de Apple y el manifest.

Los creadores de sitios web y los gestores de contenido muchas veces tienen en su lugar una opción de ícono del sitio. En ese caso, sube ahí el PNG de 512 px y la plataforma creará los demás tamaños.

Solución de problemas

Si tu favicon no aparece después de subirlo, es posible que los navegadores estén usando una versión en caché. Abre directamente la URL del ícono, recarga tu página forzando la actualización o prueba en una ventana privada. Los buscadores pueden tardar días o semanas en actualizar el ícono en los resultados.

Simplifica. A 16 por 16 píxeles, las líneas finas y el texto pequeño desaparecen. Usa un símbolo grueso, una sola letra o una versión simplificada de tu logo, con buen contraste. Revisa las vistas previas clara y oscura: un logo oscuro sobre fondo transparente puede desaparecer en un tema de navegador oscuro, una buena razón para agregar un fondo sólido o un contorno claro.

La coherencia también importa. Usa los mismos colores de tu marca, que puedes tomar con nuestro selector de color, y mantén el ícono reconocible en todos los tamaños.

Las imágenes se procesan en tu navegador y nunca se suben. A los archivos SVG se les quitan los scripts y las referencias externas antes de renderizarlos. Admite PNG, JPG, WebP, GIF y SVG. La herramienta es gratis e ilimitada y no usa créditos de EnhancerPro.

Siguientes pasos

Si tu logo solo existe como imagen de píxeles, nuestro conversor de imagen a SVG puede crear una versión vectorial, y nuestra herramienta de SVG a PNG exporta logotipos vectoriales a cualquier tamaño.

Pestañas del navegador

Los navegadores de escritorio suelen mostrar el ícono de 16 o 32 px en las pestañas, y la versión de 32 px en pantallas de alta resolución. Chrome y Edge también usan los íconos PNG más grandes para los accesos directos y la página de nueva pestaña. Como estos tamaños son diminutos, revisa con cuidado la vista previa de 16 px; si el ícono se ve confuso, simplifica el diseño o aumenta un poco el margen.

Resultados de búsqueda

Los buscadores muestran un favicon junto a tu sitio en los resultados, en celular y en escritorio. Prefieren un ícono cuadrado, de un múltiplo de 48 px, al que sus rastreadores puedan acceder. Enlazar los íconos en el head de tu página de inicio, como en el fragmento generado, es la forma estándar de que los encuentren fácilmente.

Pantallas de inicio

Cuando alguien agrega tu sitio a la pantalla de inicio de su celular, el iPhone usa el ícono táctil de Apple y Android usa los íconos del manifest. Los dos se ven mejor con fondo sólido y un poco de margen, para que el símbolo no toque las esquinas redondeadas que agrega el sistema.

Modo oscuro

Mucha gente usa temas oscuros en el navegador. Un logo negro sobre fondo transparente desaparece ahí. La vista previa oscura de la herramienta lo muestra de inmediato. Un color de fondo sólido, un contorno claro o una versión del logo en dos colores mantienen el ícono visible en todas partes.

Cómo actualizar un ícono existente

Cuando reemplaces un favicon, conserva los mismos nombres de archivo para que los enlaces existentes sigan funcionando. Los navegadores guardan los íconos en caché con insistencia, así que el nuevo puede tardar en aparecer para los visitantes que regresan. Agregar una versión a los enlaces de tu HTML, como favicon.ico?v=2, obliga a los navegadores a descargar los archivos nuevos.

Lista antes de publicar

Antes de publicar, revisa cuatro cosas. El archivo favicon.ico se abre en el navegador en tu-dominio/favicon.ico. El fragmento HTML está en el head de tu página de inicio. El ícono de Apple tiene fondo sólido y se ve bien al agregar el sitio a la pantalla de inicio de un iPhone. El nombre y el color del tema del manifest coinciden con tu marca. Con eso listo, tu ícono aparecerá de forma uniforme en pestañas, marcadores, resultados de búsqueda y pantallas de inicio, y los visitantes reconocerán tu sitio de un vistazo.

Conserva los archivos de origen

Guarda juntos en tu proyecto el logo original y el ZIP. Cuando más adelante cambies los colores o rediseñes el logo, podrás regenerar el juego completo en un minuto con los mismos ajustes, y todos los tamaños seguirán siendo coherentes. Guarda también el color del tema que usaste, para que el manifest y los íconos vuelvan a coincidir con tu marca. Una carpeta ordenada con el logo, los ajustes y los archivos generados le ahorra tiempo a quien mantenga el sitio después de ti, incluido tu yo del futuro.