Saltar al contenido
Browser Tools Salud

Generador de favicon

Crea todos los iconos que necesita tu web, desde el favicon.ico hasta los iconos de iPhone y Android, a partir de una letra, un emoji o tu logo. Descarga un solo zip con el HTML listo para pegar.

  • Gratis, sin registro
  • Funciona en tu navegador
  • Actualizado

Choose an image to see your icon

Paste this into your site's <head>

<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">

The zip has favicon.ico (16, 32 and 48 px), PNGs for browsers, iPhone and Android, and site.webmanifest.

Por ahora, los botones y etiquetas de la herramienta están en inglés.

Lee la guía completa (en inglés): How to Create a Favicon for Your Website (ICO, PNG, Apple)

Cómo crear un favicon

Respuesta rápida: Para crear un favicon, elige texto o una imagen, escoge colores y forma, descarga el paquete y añádelo a tu web.

  1. Elige texto o una imagen. Escribe de 1 a 3 letras o un emoji, o sube tu logo (funciona mejor un PNG o SVG cuadrado).
  2. Escoge colores y forma. Mira las vistas previas pequeñas: muestran cómo se ve el icono en una pestaña del navegador.
  3. Descarga el paquete. El zip incluye favicon.ico, iconos PNG y un site.webmanifest.
  4. Añádelo a tu web. Copia los archivos a la carpeta raíz de tu sitio y pega el código HTML dentro del <head>.

¿Qué tamaños de favicon necesito?

favicon.ico (16, 32 y 48 px) para las pestañas del navegador y Windows, un apple-touch-icon de 180 × 180 para iPhone, e iconos de 192 y 512 px para Android y apps web instaladas. El zip los incluye todos.

Consejos para un favicon claro

A 16 píxeles, los detalles desaparecen. Usa una o dos letras gruesas o un símbolo sencillo, con mucho contraste entre el icono y el fondo.

Preguntas frecuentes

¿Cómo añado un favicon en WordPress?

En WordPress ve a Apariencia → Personalizar → Identidad del sitio → Icono del sitio y sube android-chrome-512x512.png del zip.

¿Puedo usar un emoji como favicon?

Sí. Escríbelo en el cuadro de texto. Se dibuja con la fuente de emojis de tu dispositivo.

¿Por qué no aparece mi nuevo favicon?

Los navegadores guardan los favicons en caché durante mucho tiempo. Abre tu web en una ventana privada o borra la caché para verlo.