Recortar Imagen en Círculo — Fotos Redondas con Esquinas Transparentes, Gratis

Las fotos de perfil son redondas en casi todas partes: WhatsApp, Telegram, Discord, X, LinkedIn, cada sección de comentarios de internet. Sube una foto cuadrada y cada app la recorta a su manera, normalmente por mitad de una frente. Esta herramienta gratuita te deja hacer a ti el recorte redondo: sube cualquier imagen, arrástrala dentro del círculo, haz zoom hasta que el encuadre sea el correcto y descarga un PNG con las esquinas transparentes de 256, 512 o 1024 píxeles.

El recorte se calcula por completo en tu navegador. Tu foto no se sube a ningún servidor, no hay marca de agua y ninguna cuenta se interpone entre tú y la descarga.

Por qué la versión redonda necesita su propia herramienta

Un círculo no es un cuadrado con las esquinas escondidas. Cuando una app muestra tu foto cuadrada dentro de una máscara redonda, todo lo que hay cerca de las esquinas desaparece —alrededor del 22 % del área del cuadrado— y la app elige el centro sin saber dónde están las caras. Hacer el círculo tú mismo le da la vuelta: ves la forma final exacta mientras encuadras, y el PNG exportado tiene las esquinas transparentes de verdad, de modo que la imagen redonda se asienta bien sobre cualquier fondo: la página de equipo de un sitio web, una diapositiva, un rótulo de vídeo, un documento. Los sitios que aceptan el PNG muestran tu círculo; los que vuelven a enmascararlo reciben un círculo dentro de su círculo, idéntico en ambos casos.

Cómo encuadrar bien un recorte circular

Tres hábitos separan un buen avatar redondo de un accidente de recorte. Deja aire arriba: mantén la parte alta de la cabeza (o del logotipo) con un margen claro dentro del anillo, porque muchas apps muestran el círculo algo más cerrado en las listas que en la página de perfil. Centra los ojos, no la cabeza: los rostros se leen mejor cuando la línea de los ojos queda un poco por encima del centro del círculo. Zoom con moderación: llenar el anillo borde a borde parece audaz a 1024 píxeles y claustrofóbico en el avatar de 32 píxeles de un comentario. Usa el arrastre para recolocar y el zoom para respirar, y exporta a 512: bastante grande para cualquier página de perfil y ligero para subir a cualquier sitio. Con una foto de grupo, recorta antes a una persona en cuadrado con el recortador de imágenes y redondéala aquí.

Logotipos, productos e insignias redondas

La herramienta no es solo para caras. Insignias redondas con logotipo para pies de página y directorios de apps, miniaturas circulares de producto para cuadrículas de tienda, avatares con marco estilo «verificado» para instructores, fotos de ponentes para páginas de conferencias: todo es el mismo trabajo —un sujeto centrado, un anillo limpio, un entorno transparente—. Las ilustraciones y los iconos funcionan de maravilla: haz zoom hasta que la marca ocupe alrededor del 70 % del diámetro y la insignia se leerá hasta en tamaños casi de favicon. Si el origen es un logotipo sobre fondo de color y no transparente, el círculo conserva ese fondo dentro del anillo, que suele ser justo el aspecto de insignia que buscabas.

Tamaños y formatos de exportación

Las exportaciones son siempre PNG, porque es el único formato universal que conserva las esquinas transparentes que un círculo necesita. 256×256 sirve para avatares de comentarios y listas de chat. 512×512 —el valor por defecto— es el estándar de las fotos de perfil y coincide con el tamaño al que apunta nuestro redimensionador 512×512 para iconos. 1024×1024 es para usos casi de imprenta: diapositivas, carteles y páginas de equipo que se muestran en grande. Elige el tamaño mayor que tu destino vaya a mostrar; reducir después es gratis, inventar píxeles no.

Herramientas relacionadas

Redimensionar a 512×512 · English version: Circle Crop Image · Unir Imágenes en un Solo PDF Gratis · Herramientas Gratis en Español.

Inserta esta herramienta en tu web — gratis

Copia el código de abajo para añadir esta herramienta funcional a tu propia página. Solo pedimos que mantengas el pequeño enlace de crédito que la acompaña.

<iframe srcdoc="&lt;!DOCTYPE html&gt; &lt;html lang=&quot;es&quot;&gt; &lt;head&gt; &lt;meta charset=&quot;UTF-8&quot;&gt; &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt; &lt;title&gt;Recortar Imagen en Círculo&lt;/title&gt; &lt;style&gt; body{font-family:Arial,sans-serif;background-color:#f4f4f9;padding:16px;margin:0} .container{background:#fff;padding:20px;border-radius:8px;box-shadow:0 0 10px rgba(0,0,0,.1);max-width:680px;margin:0 auto} h2{margin:0 0 6px;color:#0f3d3e;font-size:22px} p.sub{margin:0 0 14px;color:#555;font-size:14px} label{font-weight:600;font-size:14px;display:block;margin:10px 0 4px} input[type=text],input[type=number],select{width:100%;box-sizing:border-box;padding:11px;font-size:16px;border:1px solid #cbd5e1;border-radius:6px;background:#fff} .row{display:flex;gap:10px;flex-wrap:wrap} .row&gt;*{flex:1;min-width:140px} button{background:#0f766e;color:#fff;border:0;padding:11px 22px;font-size:16px;border-radius:6px;cursor:pointer;margin-top:12px} button:hover{background:#115e59} button:disabled{background:#94a3b8;cursor:wait} #status{font-size:13px;color:#666;margin-top:10px;min-height:16px} .err{color:#b91c1c} .card{border:1px solid #e2e8f0;border-radius:8px;padding:12px 14px;margin-top:12px;background:#f8fafc} .big{font-size:26px;font-weight:700;color:#0f3d3e} table{width:100%;border-collapse:collapse;margin-top:10px;font-size:14px} th,td{text-align:left;padding:7px 8px;border-bottom:1px solid #e2e8f0} th{color:#0f3d3e} .bar{height:10px;background:#e2e8f0;border-radius:5px;overflow:hidden} .bar&gt;i{display:block;height:100%;background:#0f766e} img.cover{max-width:120px;border-radius:6px} &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div class=&quot;container&quot;&gt; &lt;h2&gt;Recortar Imagen en Círculo&lt;/h2&gt; &lt;p class=&quot;sub&quot;&gt;Sube una foto, arrástrala y haz zoom hasta que el círculo la encuadre perfecta, y descarga un PNG redondo con esquinas transparentes.&lt;/p&gt; &lt;label&gt;1. Elige tu imagen&lt;/label&gt; &lt;input type=&quot;file&quot; id=&quot;file&quot; accept=&quot;image/*&quot;&gt; &lt;p style=&quot;text-align:center;margin:14px 0 4px&quot;&gt;&lt;canvas id=&quot;pv&quot; width=&quot;320&quot; height=&quot;320&quot; style=&quot;max-width:100%;border-radius:50%;background:#f1f5f9;touch-action:none;cursor:grab&quot;&gt;&lt;/canvas&gt;&lt;/p&gt; &lt;p class=&quot;sub&quot; style=&quot;text-align:center&quot;&gt;Arrastra la imagen dentro del círculo para recolocarla.&lt;/p&gt; &lt;label&gt;2. Zoom&lt;/label&gt; &lt;input type=&quot;range&quot; id=&quot;z&quot; min=&quot;100&quot; max=&quot;300&quot; value=&quot;100&quot; style=&quot;width:100%&quot;&gt; &lt;label&gt;3. Tamaño de exportación&lt;/label&gt; &lt;select id=&quot;size&quot;&gt; &lt;option value=&quot;256&quot;&gt;256 × 256&lt;/option&gt; &lt;option value=&quot;512&quot; selected&gt;512 × 512&lt;/option&gt; &lt;option value=&quot;1024&quot;&gt;1024 × 1024&lt;/option&gt; &lt;/select&gt; &lt;button id=&quot;go&quot; disabled&gt;Recortar en círculo y previsualizar&lt;/button&gt; &lt;div id=&quot;out&quot; style=&quot;margin-top:12px&quot;&gt;&lt;/div&gt; &lt;/div&gt; &lt;script&gt; function sendH(){ try { parent.postMessage({wpcId: 6443, wpcH: document.body.scrollHeight + 16}, &#x27;*&#x27;); } catch (e) {} } window.addEventListener(&#x27;load&#x27;, sendH); window.addEventListener(&#x27;resize&#x27;, sendH); var T = {&quot;upload&quot;: &quot;1. Elige tu imagen&quot;, &quot;zoom&quot;: &quot;2. Zoom&quot;, &quot;size&quot;: &quot;3. Tamaño de exportación&quot;, &quot;go&quot;: &quot;Recortar en círculo y previsualizar&quot;, &quot;dl&quot;: &quot;Descargar&quot;, &quot;done&quot;: &quot;Tu imagen redonda está lista: PNG de {s} × {s} px con esquinas transparentes.&quot;, &quot;hint&quot;: &quot;Arrastra la imagen dentro del círculo para recolocarla.&quot;}; //__CORE_START__ var SIZES = [256, 512, 1024]; function coverScale(size, iw, ih){ return Math.max(size / iw, size / ih); } function circleLayout(size, iw, ih, zoom, ox, oy){ var s = coverScale(size, iw, ih) * (zoom || 1); var dw = iw * s, dh = ih * s; return { scale: s, dw: Math.round(dw), dh: Math.round(dh), dx: Math.round(size / 2 + (ox || 0) - dw / 2), dy: Math.round(size / 2 + (oy || 0) - dh / 2) }; } function clampPan(size, iw, ih, zoom, ox, oy){ var s = coverScale(size, iw, ih) * (zoom || 1); var mx = Math.max(0, (iw * s - size) / 2), my = Math.max(0, (ih * s - size) / 2); return { ox: Math.min(mx, Math.max(-mx, ox || 0)), oy: Math.min(my, Math.max(-my, oy || 0)) }; } //__CORE_END__ var img = new Image(), loaded = false, fname = &#x27;image&#x27;; var PV = 320, zoom = 1, ox = 0, oy = 0, dragging = false, lx = 0, ly = 0; function $(i){ return document.getElementById(i); } var pv = $(&#x27;pv&#x27;), pctx = pv.getContext(&#x27;2d&#x27;); function draw(target, size, oxv, oyv){ var ctx = target.getContext(&#x27;2d&#x27;); ctx.clearRect(0, 0, size, size); if (!loaded) return; var l = circleLayout(size, img.naturalWidth, img.naturalHeight, zoom, oxv, oyv); ctx.save(); ctx.beginPath(); ctx.arc(size / 2, size / 2, size / 2, 0, Math.PI * 2); ctx.clip(); ctx.drawImage(img, l.dx, l.dy, l.dw, l.dh); ctx.restore(); ctx.beginPath(); ctx.arc(size / 2, size / 2, size / 2 - 1, 0, Math.PI * 2); ctx.strokeStyle = &#x27;rgba(15,118,110,.65)&#x27;; ctx.lineWidth = 2; ctx.stroke(); } function redraw(){ draw(pv, PV, ox, oy); } $(&#x27;file&#x27;).addEventListener(&#x27;change&#x27;, function(){ var f = this.files[0]; if (!f) return; fname = (f.name || &#x27;image&#x27;).replace(/\.[^.]+$/, &#x27;&#x27;) || &#x27;image&#x27;; img.onload = function(){ loaded = true; zoom = 1; ox = 0; oy = 0; $(&#x27;z&#x27;).value = 100; $(&#x27;go&#x27;).disabled = false; redraw(); sendH(); }; img.src = URL.createObjectURL(f); }); $(&#x27;z&#x27;).addEventListener(&#x27;input&#x27;, function(){ zoom = (Number(this.value) || 100) / 100; var c = clampPan(PV, img.naturalWidth || 1, img.naturalHeight || 1, zoom, ox, oy); ox = c.ox; oy = c.oy; redraw(); }); function pd(e){ var r = pv.getBoundingClientRect(); var p = e.touches ? e.touches[0] : e; return { x: (p.clientX - r.left) * PV / r.width, y: (p.clientY - r.top) * PV / r.height }; } pv.addEventListener(&#x27;mousedown&#x27;, function(e){ if (!loaded) return; dragging = true; var p = pd(e); lx = p.x; ly = p.y; }); window.addEventListener(&#x27;mousemove&#x27;, function(e){ if (!dragging) return; var p = pd(e); var c = clampPan(PV, img.naturalWidth, img.naturalHeight, zoom, ox + (p.x - lx), oy + (p.y - ly)); ox = c.ox; oy = c.oy; lx = p.x; ly = p.y; redraw(); }); window.addEventListener(&#x27;mouseup&#x27;, function(){ dragging = false; }); pv.addEventListener(&#x27;touchstart&#x27;, function(e){ if (!loaded) return; dragging = true; var p = pd(e); lx = p.x; ly = p.y; }, { passive: true }); pv.addEventListener(&#x27;touchmove&#x27;, function(e){ if (!dragging) return; var p = pd(e); var c = clampPan(PV, img.naturalWidth, img.naturalHeight, zoom, ox + (p.x - lx), oy + (p.y - ly)); ox = c.ox; oy = c.oy; lx = p.x; ly = p.y; redraw(); }, { passive: true }); pv.addEventListener(&#x27;touchend&#x27;, function(){ dragging = false; }); $(&#x27;go&#x27;).addEventListener(&#x27;click&#x27;, function(){ if (!loaded) return; var size = Number($(&#x27;size&#x27;).value) || 512; var k = size / PV; var off = document.createElement(&#x27;canvas&#x27;); off.width = size; off.height = size; draw(off, size, ox * k, oy * k); off.toBlob(function(blob){ if (!blob) return; var u = URL.createObjectURL(blob); var name = fname + &#x27;-circle-&#x27; + size + &#x27;x&#x27; + size + &#x27;.png&#x27;; $(&#x27;out&#x27;).innerHTML = &#x27;&#x27;; var p = document.createElement(&#x27;p&#x27;); p.textContent = T.done.replace(&#x27;{s}&#x27;, size); var a = document.createElement(&#x27;a&#x27;); a.href = u; a.download = name; a.textContent = T.dl + &#x27; &#x27; + name; a.style.cssText = &#x27;display:inline-block;background:#0f766e;color:#fff;padding:11px 22px;border-radius:6px;text-decoration:none;font-size:16px&#x27;; $(&#x27;out&#x27;).appendChild(p); $(&#x27;out&#x27;).appendChild(a); sendH(); }, &#x27;image/png&#x27;); }); (function(){ pctx.fillStyle = &#x27;#e2e8f0&#x27;; pctx.beginPath(); pctx.arc(PV/2, PV/2, PV/2 - 2, 0, Math.PI * 2); pctx.fill(); })(); &lt;/script&gt; &lt;/body&gt; &lt;/html&gt; " id="wpc-frame-6443" class="wpc-embed-frame" style="width:100%;border:0;display:block;overflow:hidden;" scrolling="no"></iframe> <p><a href="https://ilmhunt.com/recortar-imagen-en-circulo/" target="_blank" rel="noopener">Recortar Imagen en Círculo — Fotos Redondas con Esquinas Transparentes, Gratis</a> by <a href="https://ilmhunt.com/" target="_blank" rel="noopener">IlmHunt</a> — herramientas gratis en línea</p>