Utilia
Categorías ▾
Idioma: es ▾

Generador de favicon

Crea favicon.ico, iconos PNG, el apple-touch-icon y el site.webmanifest a partir de una imagen o un emoji, con las etiquetas HTML listas. ZIP y sin subir nada.

Origen

Ajuste
site.webmanifest

Cómo crear un favicon

  1. En Origen, elige Imagen o Texto o emoji. - Imagen: suelta un PNG, JPG, WebP o SVG. Lo ideal es un logotipo cuadrado de al menos 512 × 512 px. Elige Imagen completa para encajarlo dentro del icono o Rellenar y recortar para cubrir todo el cuadrado. - Texto o emoji: escribe una letra, unas iniciales o un emoji y elige la Fuente, Negrita y el Color del texto.
  2. Define el Color de fondo o marca Fondo transparente. Elige una Forma (Cuadrado, Redondeado o Círculo) y un Margen interior (%) para dejar espacio alrededor del contenido.
  3. Si quieres, abre site.webmanifest para indicar el Nombre de la app (web manifest), el Nombre corto, el Color del tema y la URL de la carpeta de los iconos (deja / si los archivos van en la raíz de tu sitio).
  4. Haz clic en Generar favicons. Los iconos aparecen a tamaño real, junto a una pestaña de navegador simulada. A partir de ahí, cada cambio los actualiza al instante.
  5. Haz clic en Descargar ZIP, sube los archivos a tu sitio, pulsa Copiar etiquetas y pégalas dentro del <head> de tus páginas.

Qué contiene el ZIP

Archivo Tamaño Lo usa
favicon.ico 16, 32 y 48 px Pestañas del navegador, marcadores, navegadores antiguos, Windows
favicon-16x16.png 16 × 16 Pestañas del navegador
favicon-32x32.png 32 × 32 Pestañas en pantallas de alta densidad, accesos directos de la barra de tareas
apple-touch-icon.png 180 × 180 Pantalla de inicio del iPhone y el iPad
android-chrome-192x192.png 192 × 192 Pantalla de inicio de Android (web manifest)
android-chrome-512x512.png 512 × 512 Pantallas de bienvenida al instalar (web manifest)
site.webmanifest — Nombre, colores e iconos de un sitio instalable
favicon-tags.html — Las etiquetas HTML, como referencia

El archivo ICO contiene tres imágenes PNG, un formato que leen Windows (desde Vista) y todos los navegadores actuales. El apple-touch-icon siempre se guarda con un fondo sólido, porque iOS muestra los píxeles transparentes en negro; si eliges fondo transparente, se usa el blanco.

Las etiquetas HTML

Las etiquetas generadas tienen este aspecto (con la URL de tu carpeta):

<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" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#ffffff">

Los navegadores también piden automáticamente /favicon.ico en la raíz de tu dominio, así que conviene dejarlo ahí aunque haya páginas sin las etiquetas.

Consejos de diseño

  • Hazlo sencillo. A 16 × 16 px, los detalles desaparecen. Una sola letra, un símbolo contundente o la versión más simple de tu logotipo es lo que mejor se lee.
  • Revisa la vista previa a tamaño real. El icono de 16 px de la pestaña simulada es lo que ven de verdad tus visitantes.
  • Piensa en el modo oscuro. Un logotipo oscuro sobre fondo transparente puede desaparecer en los temas oscuros del navegador; un fondo de color o un pequeño margen interior ayudan.
  • Los emojis se ven distintos en cada sistema, porque cada plataforma los dibuja con su propio estilo. Los archivos PNG conservan el aspecto de tu dispositivo.

Preguntas frecuentes

¿Qué tamaños necesita un favicon?

En la práctica: un favicon.ico con 16, 32 y 48 px, un apple-touch-icon de 180 px y PNG de 192 y 512 px para el web manifest. Esta herramienta los crea todos a partir de un único origen.

¿Puedo usar un logotipo en SVG?

Sí. Los archivos SVG se dibujan a alta resolución antes de crear los iconos. El SVG se muestra como una imagen normal, así que sus scripts nunca se ejecutan.

¿Cómo hago un favicon con un emoji?

Elige Texto o emoji, escribe o pega el emoji, elige un fondo o déjalo transparente y genera. El resultado es un PNG y un ICO reales, así que funciona en todos los navegadores.

¿Por qué no aparece mi nuevo favicon?

Los navegadores guardan los favicons en caché de forma muy persistente. Recarga vaciando la caché, abre el sitio en una ventana privada o añade una versión a la URL, como /favicon.ico?v=2.

¿Se sube mi imagen?

No. Los iconos, el ZIP y el manifest se crean en tu navegador; nada sale de tu dispositivo.

Herramientas relacionadas