Si acabas de lanzar tu nueva publicación, probablemente estés viendo ese pequeño fantasma blanco predeterminado en la pestaña de tu navegador. Es lindo, pero grita 'acabo de instalar esto'. A diferencia de nuestra configuración en WordPress, donde podrías pelear con plugins pesados, Ghost maneja las actualizaciones básicas de íconos de forma limpia, pero oculta por completo las opciones avanzadas.
Mira cómo el blog de ingeniería de Stripe maneja sus pestañas. Utilizan SVGs nítidos y escalables que se adaptan perfectamente ya sea que el SO del usuario esté en modo claro u oscuro. El panel de administración por defecto de Ghost, sin embargo, solo pide un PNG estático. Siempre recomiendo saltarse la interfaz básica para tu ícono principal si quieres una configuración profesional en 2026.
Aquí tienes exactamente cómo arreglar tu ghost cms favicon, desde el método básico de la interfaz hasta la inyección de código de nivel pro.
Dominando tu Favicon en Ghost CMS
Método 1: La solución rápida desde la interfaz
Si solo necesitas algo en vivo hoy y no te importa el modo oscuro, usa la configuración integrada.
- Inicia sesión en tu panel de administración de Ghost.
- Navega a Settings > Design > Brand.
- Busca el campo de subida 'Publication icon'.
- Sube un PNG cuadrado (Ghost recomienda al menos 60x60px, pero realmente deberías usar 512x512px).
- Haz clic en 'Save' y actualiza tu sitio.
Método 2: Inyección de código Pro (Recomendado)
Aquí está el problema: la interfaz de administración elimina los metadatos avanzados. Si quieres un SVG que cambie de color, necesitas inyectar código directamente en el head de tu sitio.
- Primero, genera tus íconos modernos usando Mzu favicondl.
- Sube tus íconos SVG y Apple Touch a tu servidor, o alójalos en un CDN rápido. Copia las URLs.
- Ve a Settings > Code Injection en tu administrador de Ghost.
- En la caja 'Site Header', pega este stack moderno de 2026:
<link rel='icon' href='https://your-cdn.com/favicon.svg' type='image/svg+xml'>
<link rel='apple-touch-icon' href='https://your-cdn.com/apple-touch-icon.png'>Esto anula el PNG por defecto y te da gráficos vectoriales nítidos en pantallas de alta densidad.
Errores comunes específicos de Ghost
- Caché agresivo: Ghost almacena mucho en caché. Si actualizas el ícono y no lo ves, no eres tú. Necesitas forzar un borrado de caché del favicon en tu navegador.
- Límites de tamaño de archivo: No subas un logo masivo de 2MB a través de la interfaz. Ralentiza tu renderizado inicial.
Deshazte de ese ícono de fantasma por defecto hoy mismo. Tus lectores confiarán mucho más en tu publicación cuando tu marca esté consolidada desde la primera pestaña.