DevToolPal
ES

Generador de favicon

Crea un favicon a partir de texto, un emoji o tu logo: favicon.ico, tamaños PNG, icono táctil de Apple, web manifest y etiquetas HTML en un ZIP.

Se ejecuta en local, nunca se sube

Opciones

Origen
Forma

Vista previa

HTML para <head>

Qué hace esta herramienta

El generador de favicon convierte una letra, un emoji o tu logo en todos los iconos que necesita un sitio web moderno. Dibuja el icono en cada tamaño, empaqueta favicon.ico, escribe un manifiesto de aplicación web y te da las etiquetas <link> para pegar en el <head> de tu página. Descárgalo todo en un ZIP.

Partir de texto es la forma más rápida de conseguir un icono limpio: escribe de uno a tres caracteres o un emoji, y elige colores, una fuente y una forma (cuadrado, redondeado o círculo). Los iconos de texto también reciben un favicon.svg escalable, que se ve nítido en cualquier tamaño y en pantallas de alta densidad.

Cómo se usa

  1. Elige Texto o Imagen como origen. Para una imagen, pulsa Elegir imagen… y escoge un PNG, SVG o JPG cuadrado.
  2. Define la Forma y activa Rellenar fondo para poner el icono sobre un recuadro de color, o desactívalo para mantenerlo transparente.
  3. Escribe el Nombre del sitio: es la etiqueta que aparece bajo el icono cuando alguien añade tu sitio a la pantalla de inicio del móvil, y se escribe en site.webmanifest (Android) y en la etiqueta apple-mobile-web-app-title (iOS). Después indica la Carpeta de iconos donde subirás los archivos, normalmente /.
  4. Revisa la vista previa: el icono de 16 px es lo que la gente ve en la pestaña del navegador.
  5. Pulsa Descargar ZIP, sube los archivos a tu sitio y pega el HTML en <head>.

Ejemplo

La configuración predeterminada produce estas etiquetas:

<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="apple-mobile-web-app-title" content="My Site">

Consejos

  • Los navegadores guardan los favicons en caché de forma muy agresiva. Después de sustituir un icono, abre la página en una ventana privada para ver el cambio.
  • iOS ignora la transparencia del icono táctil de Apple y la rellena de negro, así que deja el fondo relleno para que el icono de la pantalla de inicio se vea limpio.

Preguntas frecuentes

› ¿Qué archivos obtengo?

favicon.ico (16, 32 y 48 px), iconos PNG de 16, 32 y 48 px, un icono táctil de Apple de 180 px, iconos de Android de 192 y 512 px, site.webmanifest, las etiquetas HTML y favicon.svg cuando partes de texto.

› ¿Se sube mi logo a algún sitio?

No. La imagen se lee y se redimensiona en tu navegador con un canvas; el ZIP también se crea en tu dispositivo.

› ¿Qué imagen funciona mejor?

Un PNG o SVG cuadrado de al menos 512 × 512 px con fondo transparente. Las formas simples y gruesas siguen siendo legibles a 16 px; los detalles finos y el texto delgado, no.

› ¿Todavía necesito favicon.ico?

Sí, para los navegadores antiguos y para las herramientas que piden /favicon.ico directamente. Los navegadores modernos usan los enlaces PNG o SVG del HTML.