CodeKitHub¿Qué es esta herramienta?
Un favicon.ico no es solo una imagen pequeña: es un formato contenedor que puede guardar varios tamaños del mismo icono en un único archivo, para que el navegador, la barra de tareas o los marcadores elijan la resolución que se vea más nítida según dónde lo muestren. Renombrar un PNG a favicon.ico no logra eso: sigue siendo una sola imagen con la extensión equivocada, y aunque algunos navegadores lo toleran, muchas herramientas, rastreadores y navegadores más antiguos que leen los bytes tal cual esperan la estructura real del contenedor ICO y fallarán o mostrarán un icono en blanco.
Esta herramienta construye un contenedor ICO auténtico: renderiza tu SVG a 16×16, 32×32 y 48×48, codifica cada uno internamente como PNG y empaqueta los tres en un favicon.ico válido usando el mismo formato «PNG dentro de ICO» que todo navegador y sistema operativo admite desde Windows Vista. Junto a él obtienes archivos PNG independientes de 180×180 (el tamaño que usa iOS cuando alguien añade tu sitio a la pantalla de inicio) y de 192×192 / 512×512 (los tamaños que Android y los avisos de instalación de PWA toman de tu manifiesto de app web).
¿Por qué utilizarlo?
- Genera un favicon.ico multi-resolución realmente válido, no un PNG renombrado.
- Cubre en una sola pasada todos los tamaños que necesita un despliegue real: 16, 32, 180, 192, 512px.
- HTML listo para pegar en el <head> — sin adivinar los atributos rel/sizes/type.
- Los SVG que no son cuadrados se centran sobre un cuadrado transparente en lugar de estirarse.
- Todo se renderiza localmente en tu navegador; el SVG nunca se sube.
Cómo utilizarlo
- Haz clic en el recuadro o suelta tu archivo de logo SVG sobre él.
- La herramienta lo renderiza automáticamente en todos los tamaños de favicon — no hay que configurar nada.
- Descarga favicon.ico para la raíz de tu sitio, además de los iconos PNG individuales.
- Copia el fragmento de HTML y pégalo en el <head> de tu página.
Ejemplo
Entrada
logo.svg — el logotipo de una empresa, un vector de 3 KBResultado
favicon.ico (16/32/48px combinados), más favicon-16.png, favicon-32.png, apple-touch-icon.png (180px), icon-192.png, icon-512.pngUn SVG como entrada, todos los archivos de icono que necesita un despliegue real como salida.
Qué tamaño de icono se usa dónde
| Archivo | Tamaño | Se usa para |
|---|---|---|
| favicon.ico | 16/32/48px (combinado) | Pestaña del navegador, barra de marcadores, barra de tareas |
| favicon-16.png / favicon-32.png | 16×16 / 32×32 | Alternativa para navegadores que prefieren favicons PNG |
| apple-touch-icon.png | 180×180 | Icono de pantalla de inicio de iOS al añadir el sitio |
| icon-192.png | 192×192 | Icono de pantalla de inicio de Android, manifiesto de app web |
| icon-512.png | 512×512 | Aviso de instalación de PWA, icono de pantalla de bienvenida de Android |
Por qué importa que la fuente sea un SVG
Como SVG almacena las formas como matemáticas y no como píxeles, renderizarlo de nuevo a 16px y a 512px parte ambas veces de exactamente los mismos datos de trayectoria — no hay artefactos de ampliación en el extremo grande ni conjeturas forzadas de alineación de píxeles en el extremo pequeño. Si solo tienes un logo en PNG, esta herramienta no puede ayudarte; primero convierte o rehaz el logo como SVG, porque ampliar un PNG pequeño hasta 512px solo produciría un resultado borroso.
Preguntas frecuentes
¿Por qué no simplemente renombrar un PNG a favicon.ico?
Un archivo .ico tiene su propio formato de contenedor binario (una cabecera ICONDIR que indica cuántas imágenes contiene, seguida de una entrada de directorio por imagen) — un PNG renombrado a .ico sigue siendo solo un PNG con la extensión equivocada por dentro. La mayoría de los navegadores modernos son tolerantes y lo mostrarán de todos modos, pero esta herramienta construye un contenedor ICO real que aloja tres resoluciones distintas, que es para lo que se diseñó el formato y lo que esperan los lectores más estrictos.
¿Para qué necesito iconos PNG si ya tengo favicon.ico?
favicon.ico solo cubre el uso clásico de pestaña de navegador / marcador. El PNG de 180×180 es el que usa iOS cuando alguien añade tu sitio a la pantalla de inicio (apple-touch-icon), y los PNG de 192×192 / 512×512 son los que Android y los avisos de instalación de PWA toman de tu manifiesto de app web. Sin ellos, el icono en la pantalla de inicio de un móvil se reduce a una captura genérica o a un cuadrado en blanco.
Mi logo no es cuadrado, ¿qué pasa con él?
Se centra sobre un cuadrado transparente en cada tamaño de destino en lugar de estirarse, así que un logo ancho o alto conserva sus proporciones correctas en vez de quedar aplastado en un cuadrado.
¿Dónde coloco los archivos descargados?
Coloca favicon.ico, apple-touch-icon.png, icon-192.png e icon-512.png en la carpeta raíz de tu sitio (junto a index.html), y luego pega las etiquetas <link> generadas en el <head> de tu página.
¿Se sube mi SVG a algún sitio?
No. El SVG se renderiza sobre elementos <canvas> locales y los archivos ICO/PNG se ensamblan en tu navegador. No se envía nada a ningún servidor.