Cómo crear un favicon (guía 2026)

Aprende a crear un favicon completo para tu sitio web: qué tamaños necesitas, qué archivos generar y cómo añadirlos en el <head> con las etiquetas correctas.

Un favicon es el pequeño icono que aparece en la pestaña del navegador, en los marcadores y en los resultados de búsqueda de Google. Un favicon bien hecho hace que tu sitio se vea profesional y se reconozca de un vistazo.

Qué archivos necesitas en 2026

El set mínimo y moderno es 3 archivos + unas pocas etiquetas:

favicon.ico — compatibilidad histórica (contiene 16, 32 y 48 px).
favicon.svg — vectorial, escala a cualquier tamaño y admite modo oscuro.
apple-touch-icon.png (180×180) — para la pantalla de inicio de iOS.
icon-192.png y icon-512.png — iconos de PWA (Android/Chromium).

Cómo generarlos

Prepara una imagen cuadrada de al menos 512×512 px (mejor 1024), en PNG con fondo transparente o SVG.
Súbela a AppIconGen, ajusta el fondo y el redondeo, y marca la plataforma Web / PWA.
Descarga el ZIP: la carpeta web/ trae todos los archivos y el snippet HTML.

Cómo añadirlos a tu web

Copia los archivos a la raíz de tu sitio y pega estas etiquetas dentro de <head>:

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

Listo: tu favicon se verá en todos los navegadores y dispositivos.