Crear PNGs en Tamaño de Favicon desde una Imagen de Origen
La creación de un archivo ICO real requiere escribir un formato contenedor binario que la API Canvas no soporta. En su lugar, esta herramienta se enfoca en lo que la API Canvas hace bien: redimensionar tu PNG a los tamaños estándar de favicon que los navegadores modernos aceptan directamente.
La distribución moderna de favicons usa archivos PNG declarados con etiquetas <link>, lo que hace que el contenedor ICO sea opcional para la mayoría de los proyectos.
Como funciona
- Suelta o selecciona una imagen PNG (idealmente cuadrada, al menos 512x512)
- Usa los controles de redimensionamiento para ajustar tus tamaños de destino
- La herramienta dibuja la imagen en un Canvas en las dimensiones especificadas
- Exporta el PNG redimensionado
- Repite para cada tamaño de favicon que necesites
Tamaños de Favicon Que Realmente Necesitas
| Tamaño | Donde aparece |
|---|---|
| 16x16 | Icono de pestaña del navegador |
| 32x32 | Pestaña del navegador en alta DPI, barra de tareas de Windows |
| 48x48 | Acceso directo de escritorio de Windows |
| 180x180 | Icono táctil de Apple (pantalla de inicio de iOS) |
| 192x192 | Chrome Android, manifiesto PWA |
| 512x512 | Pantalla de inicio PWA, resultados de busqueda de Google |
Configuración mínima que cubre la mayoría de los casos:
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">Mejores Practicas Modernas para Favicons
Comienza con un origen de alta resolución
Comienza con un PNG de 512x512 o más grande. Reducir desde un origen de alta resolución produce resultados limpios.
Favicons SVG: el enfoque moderno
Si tu icono funciona como arte vectorial, un favicon SVG es la mejor opción. Escala a cualquier tamaño y no requiere crear multiples archivos.
Respaldo favicon.ico
A pesar de las alternativas modernas, colocar un archivo favicon.ico en la raiz del sitio…