Una imagen. Cada pantalla.

Convertidor de PNG a ICO

Pequeños iconos. Una impresión duradera.

Convierte un PNG en un ICO de varios tamaños. Conserva la transparencia, revisa las vistas pequeñas y descarga los iconos localmente.

PNG ICO PWA

Crea tu paquete de iconos

Convierte tu imagen en favicons, iconos de aplicaciones y más.

1Subir
2Ajustar
3Descargar

Esperando una imagen

Suelta tu imagen aquí

PNG · Hasta 5 MB

Tu imagen se procesa en tu navegador y nunca sale de tu dispositivo.

16 × 16

32 × 32

48 × 48

180 × 180

192 × 192

512 × 512

Ajusta tu icono

Ajusta el aspecto para cada pantalla.

Ajuste de la imagen

Fondo

Transparente

Color sólido

#FFFFFF

Margen interior6%

Radio de las esquinas0%

Tamaños de ICO (puedes elegir varios)

256

Iconos adaptables

Ver en contexto(sube una imagen para ver tu icono)

Pestaña del navegador

https://example.com

Pantalla de inicio de iOS

Tu icono aquí

PWA / Android

Tu icono aquí

Cómo crear un favicon en 3 pasos

De una imagen a un conjunto completo de iconos.

1Sube tu imagen

Convierte un PNG en un ICO de varios tamaños. Conserva la transparencia, revisa las vistas pequeñas y descarga los iconos localmente.

2Ajustar y previsualizar

Elige el ajuste, el fondo y el margen interior. Revisa el resultado en tamaños pequeños.

3Descargar y añadir a tu sitio

Exporta el paquete de iconos, sube los archivos y añade los enlaces de los iconos a tu HTML.

Un logotipo, listo para cada pantalla

Descubre dónde se usa cada archivo generado.

Favicon del sitio web

Mi sitio×

16 × 16

32 × 32

Los iconos de 16 × 16 y 32 × 32 ayudan a reconocer tu sitio en las pestañas y los marcadores.

iPhone & iPad

Mi sitio

180 × 180

Usa un icono apple-touch de 180 × 180 cuando tu sitio se añada a la pantalla de inicio.

PWA & Android

Instalar aplicación

192 × 192

512 × 512

Las imágenes de 192 × 192 y 512 × 512 son tamaños habituales en los manifiestos de aplicaciones web.

¿Qué hay en tu paquete de iconos?

Un conjunto de iconos listo para usar en todas las plataformas.

favicon.ico16 × 16, 32 × 32, 48 × 48, 256 × 256
apple-touch-icon.png180 × 180
icon-192.png192 × 192
icon-512.png512 × 512
site.webmanifestManifiesto de aplicación web

Añadir iconos a tu sitio web

Coloca estos enlaces en el <head> de tu HTML.

<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

Descomprime el paquete en public/ de la raíz del proyecto Nuxt. Conserva los nombres y coloca site.webmanifest junto a favicon.ico, no dentro de app/.
Añade el código al bloque script setup de app/app.vue. Sustituye los enlaces a iconos antiguos, vuelve a compilar y publica tu proyecto.

useHead({
  "link": [
    {
      "rel": "icon",
      "type": "image/x-icon",
      "href": "/favicon.ico"
    },
    {
      "rel": "apple-touch-icon",
      "sizes": "180x180",
      "href": "/apple-touch-icon.png"
    },
    {
      "rel": "manifest",
      "href": "/site.webmanifest"
    }
  ]
})

Abre /favicon.ico, /apple-touch-icon.png y /site.webmanifest en tu sitio. Comprueba respuestas correctas y contenido real de imagen o JSON; una respuesta 200 con una página de error HTML también indica una ruta incorrecta. Comprueba todas las URL de iconos del manifiesto.

Si aparece el icono antiguo, busca enlaces duplicados en head, desactiva la caché en las herramientas del navegador y recarga. Revisa también las cachés de CDN y service worker si las usas. Compara las vistas reales de 16 y 32 píxeles: simplifica textos pequeños y líneas finas.

Estos archivos aportan iconos y metadatos del manifiesto. Por sí solos no crean una PWA instalable. El ejemplo supone publicar en la raíz del dominio; para un subdirectorio ajusta todos los enlaces y las rutas de iconos del manifiesto.

Nuxt 4 · public/ · Nuxt 4 · useHead