Cómo Instalar un Favicon - Guía Paso a Paso (2025)

Aprende a instalar favicons en sitios HTML, WordPress y Next.js. Haz que tu favicon funcione en 5 minutos con nuestro Convertidor de Imágenes gratuito.

Ya generaste tu paquete de favicon—ahora vamos a ponerlo en tu sitio web. Esta guía te lleva paso a paso por la instalación de favicons en sitios HTML estáticos, WordPress y Next.js. Toma unos 5-10 minutos.

Empezaremos con lo básico (subir archivos y añadir código HTML) y luego cubriremos pasos específicos de cada plataforma. Si aún no has creado tu favicon, usa nuestro Convertidor de Imágenes para generar los 31 archivos que necesitas.

Lo que necesitarás

Un paquete de favicon (archivo ZIP) de nuestro Convertidor de Imágenes, Generador de Texto, herramienta Emoji o Creador de Logos
Acceso para subir archivos a tu sitio web (FTP, panel de hosting o Git)
Capacidad de editar la sección <head> de tu sitio (HTML, editor de tema o archivo de layout)

Paso 1: Genera tu paquete de favicon

Si aún no lo has hecho, ve a nuestro Convertidor de Imágenes y sube tu logo (PNG, JPG o SVG). La herramienta genera 31 archivos de favicon en diferentes tamaños—16×16 para pestañas del navegador, 180×180 para iOS, 512×512 para Android y más.

Haz clic en "Descargar ZIP" para obtener tu paquete. Dentro encontrarás una carpeta /icons/ con todos los archivos PNG, más un fragmento HTML (html-code.txt) con las etiquetas <link> que necesitas copiar.

Descomprime el paquete en tu computadora. Ten a mano la carpeta /icons/ y el archivo html-code.txt—los necesitarás en los siguientes pasos.

Paso 2: Instala en un sitio HTML estático

Para un sitio HTML simple, sube la carpeta /icons/ al directorio raíz de tu sitio web (la misma carpeta donde está index.html). Puedes usar FTP, el administrador de archivos de tu panel de hosting o Git.

Abre html-code.txt del paquete ZIP. Copia todas las etiquetas <link> y <meta>. Pégalas dentro de la sección <head> de tus archivos HTML (entre <head> y </head>).

Si pusiste la carpeta /icons/ en otro lugar (como /assets/icons/), actualiza las rutas href en el código HTML para que coincidan. Guarda tus archivos y súbelos a tu servidor.

<!-- Example: include in your <head> -->
<link rel="icon" href="/icons/favicon-32x32.png" sizes="32x32" type="image/png" />
<link rel="apple-touch-icon" href="/icons/apple-touch-icon.png" />

Paso 3: Instala en WordPress

La forma más fácil: Ve a Apariencia → Personalizar → Identidad del sitio en tu panel de WordPress. Sube tu imagen principal de favicon (cualquier tamaño funciona—WordPress la redimensionará). Esto funciona para el 90% de los temas.

Si tu tema no tiene esa opción, usa un plugin como "Insert Headers and Footers" o "Simple Custom CSS and JS". Pega el código HTML de html-code.txt en la sección de encabezado. Luego sube la carpeta /icons/ al directorio de tu tema vía FTP o el administrador de archivos.

Después de guardar, limpia tu plugin de caché (WP Super Cache, W3 Total Cache, etc.) para que los navegadores carguen el nuevo favicon. Prueba en una ventana de incógnito para asegurarte de que funciona.

Paso 4: Instala en Next.js

En un proyecto Next.js (App Router o Pages Router), pon la carpeta /icons/ dentro del directorio public/. Por ejemplo: public/icons/favicon-32x32.png.

Abre tu archivo de layout raíz (app/layout.tsx para App Router, o pages/_document.tsx para Pages Router). Añade las etiquetas <link> y <meta> de html-code.txt dentro del elemento <head>. Asegúrate de que las rutas empiecen con /icons/ (no public/icons/).

Confirma los cambios y despliega. Next.js servirá los archivos desde la carpeta public/ automáticamente. No se necesita configuración extra.

Paso 5: Prueba tu favicon

Abre tu sitio en una ventana de incógnito/privada (Ctrl+Shift+N o Cmd+Shift+N). Revisa la pestaña del navegador—deberías ver tu nuevo favicon. Si ves el antiguo, haz una recarga forzada (Ctrl+F5 o Cmd+Shift+R).

Prueba en móvil: En iOS, toca Compartir → Añadir a pantalla de inicio. En Android, toca el menú → Añadir a pantalla de inicio. Verifica que el icono se vea bien en tu pantalla de inicio.

¿Sigues viendo el icono antiguo? Limpia completamente la caché de tu navegador (Ctrl+Shift+Delete o Cmd+Shift+Delete). Algunos navegadores cachean favicons agresivamente. Si eso no funciona, consulta nuestro tutorial de Solución de problemas.

¿Qué sigue?

¡Tu favicon está instalado! Ahora puedes probarlo en diferentes navegadores y plataformas, o profundizar en temas avanzados como manifiestos PWA y favicons dinámicos.