Herramientas › Diseño

Estudio de favicon e iconos de app

Convierte un logo en favicon.ico, apple-touch-icon, iconos adaptativos y maskable de Android, un juego AppIcon de iOS y site.webmanifest.

Qué incluye

favicon.ico (16, 32, 48), favicons PNG, apple-touch-icon, iconos de Android Chrome y maskable, site.webmanifest, un juego AppIcon de iOS para Xcode, mipmaps de Android con icono adaptativo y este fragmento HTML:

<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#F39A3D">

Cómo funciona

  1. Tu logo se dibuja en un canvas en cada tamaño, con zonas seguras para los iconos maskable y adaptativos.
  2. favicon.ico contiene PNG de 16, 32 y 48 px, que lee cualquier navegador actual.

Preguntas

¿Qué imagen de origen funciona mejor?

Un SVG, o un PNG cuadrado de al menos 512×512 con algo de espacio vacío alrededor del logo.