Favicon e ICO — Flujo de entrega

Favicon e ICO — Flujo de entrega: Conserva los nombres de archivo de Chatcument, pon favicon.ico en la raíz y enlaza los PNG desde el head y el manifiesto.

Crea tamaños de icono estándar sin recortar los bordes de la imagen.

o suelta una imagen en cualquier lugar de esta página

favicon.ico incluye fotogramas de 16, 32, 48, 64 y 256 px. Los PNG se guardan con el tamaño mostrado; 180 px se guarda como apple-touch-icon.png.

Elige una imagen.

Crear favicons ICO y PNG

Ejemplo de entrada y salida

Conserva los nombres de archivo de Chatcument, pon favicon.ico en la raíz y enlaza los PNG desde el head y el manifiesto.

Una estructura habitual es /favicon.ico para el archivo multitamaño, /icons/favicon-32.png para la pestaña, /apple-touch-icon.png para iOS y /icons/favicon-192.png y favicon-512.png en el manifiesto. En el head de HTML, un enlace con rel="icon" y sizes="32x32" apunta al PNG, y otro con rel="apple-touch-icon" apunta al de 180 píxeles.

Piensa en una agencia que entrega un rediseño de marca a un desarrollador. Envía una carpeta con los ocho PNG, el ICO y el arte original, más una nota breve que indique qué archivo va en cada etiqueta link. Añade versión al nombre de la carpeta, como brand-icons-v2, para que nadie mezcle conjuntos viejos y nuevos.

Un error común es subir los archivos y olvidar las etiquetas link, o dejar el archivo antiguo en la misma URL. Navegadores y CDN guardan los iconos mucho tiempo, así que al sustituir uno cambia el nombre o añade un parámetro de versión y comprueba en el panel de red que la respuesta sea 200.

Guarda en el repositorio el original cuadrado. Como la herramienta produce el mismo resultado con la misma imagen, volver a generarlo el próximo trimestre con ese archivo reproduce el mismo conjunto, lo que facilita el traspaso y las auditorías. Añade a la nota de entrega una línea que indique qué archivo de origen produjo cada conjunto.

Entrada

Square mark or logo

Salida

PNG sizes + multi-size ICO

Generar los archivos no los publica: los iconos solo aparecen cuando se suben y se referencian desde tus páginas.

Elige una tarea 6
Herramientas relacionadas 13
Cómo usar Favicon e ICO — Flujo de entrega
  1. Elige una imagen de origen para Favicon e ICO — Flujo de entrega.
  2. Revisa los tamaños de icono PNG generados en la vista previa.
  3. Descarga el tamaño PNG o el archivo ICO con varios tamaños que necesites.

Respuestas rápidas

¿Qué hace Favicon e ICO — Flujo de entrega?

Favicon e ICO — Flujo de entrega: Conserva los nombres de archivo de Chatcument, pon favicon.ico en la raíz y enlaza los PNG desde el head y el manifiesto.

¿Cómo se usa Favicon e ICO — Flujo de entrega?

Elige una imagen de origen para Favicon e ICO — Flujo de entrega. Revisa los tamaños de icono PNG generados en la vista previa. Descarga el tamaño PNG o el archivo ICO con varios tamaños que necesites.

¿Qué puedo hacer con el resultado de Favicon e ICO — Flujo de entrega?

Los tamaños PNG generados y el archivo ICO con varios tamaños quedan listos para descargar.

¿Qué debo comprobar antes de publicar una imagen editada?

Abre el archivo exportado y comprueba dimensiones, peso, texto pequeño, bordes y transparencia al tamaño de uso. Redimensionar cambia los píxeles; comprimir reduce el peso. Ampliar no garantiza recuperar detalles perdidos. Conserva el original para volver a exportarlo con otros ajustes.