Cómo crear un favicon a partir de una imagen (ICO + PNG, todos los tamaños)
2026-07-27
Respuesta corta: Para crear un favicon a partir de una imagen, abre el Generador de Favicon de ToolKoala, suelta una imagen cuadrada y descarga. Obtienes un favicon.ico (que contiene 16, 32 y 48px) más PNGs sueltos en 16, 32, 48, 180, 192 y 512px, y un bloque de etiquetas HTML <link> listo para pegar. Es gratis, y todo corre en tu navegador — la imagen nunca se sube. Construí esto la semana en que me cansé de los sitios de favicons que te obligan a iniciar sesión para descargar un ícono de 16 píxeles.
Por qué necesitas más de un tamaño de favicon
Antes, un favicon era un solo .ico de 16×16 y ya estaba. Ya no. Distintos lugares muestran tu ícono en distintos tamaños:
- 16 / 32 / 48px — el clásico ícono de pestaña del navegador y de marcadores. Estos viven dentro de
favicon.ico. - 180px — el Apple Touch Icon, que se usa cuando alguien agrega tu sitio a la pantalla de inicio de su iPhone.
- 192 / 512px — íconos de Android y PWA, usados para la instalación en pantalla de inicio y el selector de apps.
Si solo publicas un ícono de 16px, tu sitio se ve nítido en una pestaña pero borroso en el momento en que alguien lo guarda en su teléfono. Esta herramienta genera todo el set a partir de una sola imagen fuente para que no tengas que pensarlo.
Cómo crear tu favicon
- Abre el Generador de Favicon de ToolKoala y suelta tu imagen.
- Renderiza al instante vistas previas en cada tamaño — de 16 hasta 512 — para que veas cómo se sostiene tu ícono cuando es diminuto.
- Descarga lo que necesites:
favicon.ico— el ícono multi-resolución (16 + 32 + 48) para la pestaña del navegador.- Todos los PNG — un clic obtiene cada tamaño como PNG separado.
- O haz clic en cualquier vista previa individual para descargar solo ese tamaño.
- Copia el fragmento HTML que te da y pégalo en el
<head>de tu página.
El fragmento ya viene completo con los atributos correctos de rel, type y sizes:
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/favicon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="/favicon-192x192.png">
Coloca los archivos en la raíz de tu sitio (o donde sea que apunte el href), pega las etiquetas y listo.
Consejos para un ícono que se lea a 16 píxeles
- Empieza cuadrado y simple. A 16×16 hay espacio para una forma audaz o una sola letra — no tu logo completo con eslogan. Si tu logo es detallado, crea una versión "solo el símbolo" simplificada para esto.
- Aliméntala con una fuente grande. Sube al menos 512px para que los íconos grandes de PWA se mantengan nítidos; la herramienta reduce, no puede inventar detalle.
- El alto contraste gana. El ícono se coloca sobre la interfaz del navegador y fondos de pantalla de teléfono que no controlas. Un contraste fuerte lo mantiene visible en cualquier lado.
- Revisa las vistas previas diminutas. La herramienta muestra las versiones de 16 y 32px con precisión de píxel — si se ve borroso a ese tamaño, simplifica el arte antes de publicarlo.
Límites honestos
La herramienta dibuja tu imagen en lienzos cuadrados, así que una fuente no cuadrada se deforma — recórtala a un cuadrado primero (prueba Recortar) para un resultado limpio. Tampoco agrega esquinas redondeadas ni relleno por ti; lo que subes es lo que se escala. Y genera el set moderno estándar — si necesitas cada mosaico legacy de Microsoft y el SVG de pestaña fija de Safari, un generador más pesado cubre esos casos extremos. Para el 99% de los sitios, el set ICO + PNG de aquí es exactamente lo que los navegadores realmente piden.
Preguntas frecuentes
¿Cómo hago un favicon a partir de una imagen?
Abre un generador de favicon basado en navegador como el de ToolKoala, suelta una imagen cuadrada y descarga el favicon.ico más los PNG en cada tamaño. Luego pega las etiquetas HTML que te da en el <head> de tu página.
¿Qué tamaños y formatos obtengo?
Un favicon.ico que contiene 16, 32 y 48px, más PNGs sueltos en 16, 32, 48, 180 (Apple Touch), 192 y 512px (Android/PWA).
¿Todavía necesito un archivo .ico, o solo PNGs?
Ambos. favicon.ico es el más compatible en general para las pestañas del navegador, mientras que los PNG más grandes cubren Apple Touch y los íconos de pantalla de inicio de Android/PWA. Esta herramienta te da ambos para que quedes cubierto en todos lados.
¿Mi imagen se sube a algún servidor? No. El favicon se genera en tu navegador usando canvas — tu imagen nunca sale de tu dispositivo.
Mi imagen fuente no es cuadrada. ¿Se verá bien? Una imagen no cuadrada se estira hasta formar un cuadrado. Recórtala a una proporción 1:1 primero para un ícono limpio.
— Milo 🐨