¿Cómo hago un paquete de favicon a partir de un PNG sin registrarme?

Los siete archivos que nuestro generador de iconos escribe a partir de un PNG, qué lee cada uno, dónde van en tu servidor y por qué las partes transparentes salen sólidas.

August 9, 2026

Un favicon no es un archivo. Es un conjunto de ellos, porque una pestaña del navegador, una pantalla de inicio de iOS y un aviso de instalación de Android piden cada uno una imagen diferente en un tamaño diferente. Sube un PNG a nuestro generador de iconos y siete archivos salen por el otro lado. Aquí está para qué sirve cada uno, dónde debe estar en tu servidor y cuáles puedes omitir.

Todo se ejecuta dentro de la página. No hay ruta de API ni acción del servidor en esta aplicación, así que tu logo se lee con createImageBitmap, se pinta en un OffscreenCanvas y se codifica a PNG por tu propio navegador. Sin cuenta y sin promesa de eliminar tu obra en una hora.

¿Cuáles son los siete archivos y qué hace cada uno?

Siete archivos, una imagen fuente. Los tamaños a continuación provienen de una ejecución real con alpha.png, un PNG transparente de 900 por 606 de 942.4 KB. Tus conteos de bytes diferirán porque dependen de cuántos detalles sobreviven en cada tamaño, pero los nombres de archivo y las dimensiones en píxeles están fijos por la herramienta.

No necesitas los siete. Si solo te importan las pestañas de escritorio, favicon.ico solo hace el trabajo. El archivo de Apple comienza a ser importante en el momento en que alguien guarda tu sitio en una pantalla de inicio, y los dos PNG de Android solo tienen su lugar si realmente envías el manifiesto.

¿Dónde van los archivos y qué va en el head?

Los siete pertenecen a la raíz web, por lo que se resuelven como /favicon.ico, /apple-touch-icon.png y así sucesivamente. En Next.js eso es la carpeta pública. Luego, cuatro etiquetas van en tu head: un enlace apple-touch-icon a 180x180, dos enlaces rel=icon para el 32 y el 16, y un enlace al manifiesto. La herramienta imprime ese fragmento junto a los resultados con un botón de copiar.

site.webmanifest son 371 bytes de JSON que contiene name, short_name, los dos iconos de Android, theme_color, background_color y display configurado como standalone. Las rutas de icono dentro están escritas de forma absoluta, como /android-chrome-192x192.png, por lo que estacionar el paquete en /assets/icons/ lo rompe silenciosamente y necesitarás editar ambos valores src. Una trampa más: deja ambos cuadros de nombre vacíos en el panel y el manifiesto se envía con el nombre literal "My App", que es lo que un teléfono imprimirá debajo de tu icono.

¿Por qué no está favicon.ico en ese fragmento?

Porque los navegadores lo piden sin que se les diga. No se necesita etiqueta. La sección rel=icon de la especificación HTML describe la convención de /favicon.ico: cuando un documento no declara ningún enlace de icono, el navegador intenta esa ruta raíz por sí mismo. Por eso el .ico funciona sin ningún marcado, y también es por eso que el archivo debe estar en la raíz. Una copia en /images/ nunca es solicitada. Si realmente lo necesitas en otro lugar, añade un enlace de icono explícito apuntando a tu ruta y la conjetura se detiene.

¿Qué hay realmente dentro de favicon.ico?

Un .ico es un contenedor. El nuestro contiene tres PNG, renderizados a 16, 32 y 48 píxeles, detrás de un encabezado de 6 bytes más una entrada de directorio de 16 bytes por imagen, que son 54 bytes de estructura envueltos alrededor de los datos de la imagen. Así es como un solo archivo de 4.6 KB cubre tres tamaños: el navegador lee el directorio, luego extrae la entrada que coincide con lo que está dibujando. El diseño de bytes de ese directorio, y por qué nada más grande que 256 cabe en él, es una pieza por sí misma. Windows ha entendido los payloads PNG dentro de .ico desde Vista y los navegadores actuales los manejan sin quejas.

¿Por qué mi PNG transparente salió con un fondo sólido?

Porque cada lienzo de icono se llena antes de que tu logo aterrice en él. El control de fondo es un input type=color, que no lleva canal alfa, así que el relleno es siempre opaco y el valor predeterminado es #ffffff. Cualquier transparencia que tuviera tu fuente se aplana contra ese color. No hay opción transparente aquí. Elige el color que coincida con la superficie sobre la que se sentará la marca antes de presionar generar.

La forma también importa. alpha.png es 900 por 606 y los iconos son cuadrados, así que la obra se ajusta dentro del cuadrado con su eje largo a todo ancho, y el color de fondo llena las bandas arriba y abajo. Si esas bandas te molestan, cuadrar la imagen primero en el recortador, que acepta un archivo de hasta 10 MB y ofrece un preset 1:1 entre sus ocho relaciones de aspecto. El control deslizante de margen en el panel de iconos va de 0 a 30% e inserta la obra de manera uniforme en los cuatro lados.

¿Es 196 KB demasiado grande para un archivo de icono?

196 KB para android-chrome-512x512.png parece alarmante al lado de un archivo de 521 bytes de 16px. Dos cosas alivian la presión. Ese icono no se obtiene en una vista de página ordinaria, ya que la pestaña solo quiere el pequeño, y el PNG salido directamente de un codificador de lienzo no está optimizado: convertToBlob escribe un archivo válido sin ninguno de los trabajos de filtro y paleta que hace un optimizador dedicado. Es el mismo codificador de navegador que da forma a los tamaños de archivo en nuestras mediciones de JPG a PDF.

Puedes reducirlo volviendo a ejecutar el PNG a través del compresor. En ese mismo alpha.png de 942.4 KB, el modo sin pérdida (oxipng nivel 3) resultó en 383.9 KB, una reducción del 59% sin que un solo píxel cambiara. El modo de archivo más pequeño (imagequant) alcanzó 98.3 KB, una reducción del 90%, al reducir la imagen a una paleta. Un logo plano con un puñado de colores es exactamente donde una paleta no te cuesta nada visible. Mantenlo sin pérdida si tu icono es fotográfico.

¿Necesito registrarme y se sube mi logo?

Sin registro y nada que subir. No hay rutas de API ni acciones del servidor en esta base de código, y las únicas solicitudes que hace la página son fetches de mismo origen para sus propios activos. Abre tu panel de red mientras generas y observa que se mantenga en silencio. Nuestra página de privacidad lo expresa en menos palabras que este párrafo.

Los límites son un archivo a la vez y 10 MB, y la zona de arrastre acepta PNG, JPEG, WebP, AVIF, GIF y SVG. Un SVG se rasteriza primero en la mayor de sus propias dimensiones o 512 píxeles, así que incluso una fuente de 64px aún produce un icono limpio de 512. Esa representación carga el archivo en un elemento <img>, la misma ruta restringida que elimina fuentes externas y bitmaps vinculados de un SVG. Todo se descarga como un solo favicon-package.zip que contiene los siete archivos. Si tu logo llegó como una exportación sobredimensionada, redimensiónalo primero para que no estés alimentando un banner de 20 megapíxeles en un cuadrado de 16 píxeles.

Haz esto a continuación: abre el generador de iconos, sube tu logo, establece el color de fondo para que coincida con el lugar donde se sentará el icono, genera, descomprime en tu raíz web, pega las cuatro etiquetas en tu head y añade "start_url": "/" a site.webmanifest. Luego, recarga el sitio y mira la pestaña. Si la versión de 16px se ve como una mancha, vuelve y simplifica la marca antes de cambiar cualquier otra cosa. Las notas de Configuración de Aplicaciones Web de Apple valen la pena leer si la pantalla de inicio de iOS es tu prioridad.