PNG a ICO – guía completa
Los favicons todavía dependen del formato ICO para compatibilidad total. Aprende a crear un ICO nítido con varios tamaños y a publicarlo correctamente.
Pruébalo ahora: abre IcoSmith, suelta tu PNG, elige 16, 32, 48, 64, 128, 256 y exporta el archivo ICO o el paquete de favicon.
Por qué ICO sigue importando
ICO es el formato más compatible para favicons. Permite empaquetar varios bitmaps (16–256) en un único archivo, por lo que Windows/legacy y distintos navegadores encuentran una variante nítida. La configuración moderna suele incluir ICO + PNG Apple Touch + SVG de máscara.
Tamaños recomendados
- Pestañas clásicas: 16×16, 32×32
- Escritorio Hi‑DPI: 48×48, 64×64
- Windows/contextos grandes: 128×128, 256×256
- Apple Touch (PNG): 180×180
- Icono de máscara (SVG): Safari pinned tab
Snippet completo del head
Pega este bloque en <head> y ajusta rutas/colores si hace falta.
<link rel="icon" href="/favicon.ico" sizes="any"> <link rel="icon" href="/favicon.svg" type="image/svg+xml"> <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> <link rel="manifest" href="/site.webmanifest"> <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#0f172a"> <meta name="theme-color" content="#0A0F1E">
Por qué seguir usando ICO
ICO puede incluir varios bitmaps en un archivo. Windows y contextos legacy buscan favicon.ico en la raíz del sitio.
Tamaños recomendados
- 16×16 y 32×32: pestañas clásicas.
- 48×48 y 64×64: escritorio Hi‑DPI.
- 128×128 y 256×256: Windows y contextos grandes.
Paso a paso
- Abre IcoSmith y sube tu PNG.
- Selecciona los tamaños anteriores. Mantén fondo transparente siempre que sea posible.
- Revisa 16–32 px; ajusta el perfil “nítido/suave” si hace falta.
- Exporta el ICO o el paquete de favicon con etiquetas y manifest.
Publicación
Coloca favicon.ico en la raíz y añade las etiquetas del paquete en el <head>. Recomendamos PNG 180×180 y SVG de máscara. Ver tamaños y checklist.
Solución de problemas
- Borrosa a 16 px: simplifica la marca, aumenta contraste o usa el perfil nítido.
- Fondo incorrecto: usa PNG transparente o define color sólido explícito.
- Icono antiguo en caché: hard refresh o agrega un cache‑buster (p. ej.
?v=2).
SEO y rendimiento
- Mantén el ICO pequeño; no incluyas tamaños innecesarios.
- Añade Apple Touch y SVG de máscara para mejor cobertura.
- Reserva espacio para UI dinámica/ads y evita CLS.