Si alguna vez has pasado un fin de semana alineando perfectamente el CSS Grid de tu nuevo blog técnico, solo para darte cuenta de que la pestaña del navegador sigue mostrando un globo gris genérico, tu configuración está incompleta. Un favicon personalizado para tu blog personal es la forma más sencilla de demostrar que te importan los detalles. Mira los blogs de desarrolladores populares como el de Midudev o Cassidy Williams. No usan logotipos corporativos complejos. Usan un simple avatar de su cara o una inicial limpia.
Tengo una opinión muy clara al respecto: los blogs personales deben sentirse personales. Deja de intentar diseñar un logo de empresa del Fortune 500 para tus pensamientos de fin de semana.
Requisitos previos para tu icono
Solo necesitas una imagen cuadrada de alto contraste. Una foto de tu cara sin fondo o una letra en negrita sobre un color sólido funcionan mejor.
Paso 1: Elige la imagen adecuada
Te recomiendo encarecidamente que uses tu cara si escribes con tu nombre real. Genera confianza y reconocimiento inmediato en una barra de marcadores abarrotada. Si prefieres el anonimato, usa un SVG con una sola letra en negrita. Evita palabras completas o formas geométricas complejas; se convierten en manchas ilegibles a 16x16 píxeles. (Si intentas adaptar una marca existente, lee nuestra guía sobre cómo hacer un favicon a partir de un logo).
Paso 2: Genera el stack minimalista
Los blogs personales no necesitan una configuración empresarial de 30 archivos. En 2026 necesitas exactamente tres cosas: un SVG (para navegadores modernos), un PNG de 180x180 (para dispositivos Apple) y un ICO de respaldo. Arrastra tu imagen a Mzu favicondl y te devolveremos exactamente estos archivos optimizados. No pierdas el tiempo redimensionando imágenes manualmente en Photoshop.
Paso 3: Inyecta el HTML
Abre la etiqueta <head> de tu blog. Ya sea que uses Astro, Next.js o un generador de sitios estáticos, pega exactamente este fragmento:
<link rel='icon' href='/favicon.svg' type='image/svg+xml'>
<link rel='apple-touch-icon' href='/apple-touch-icon.png'>
<link rel='icon' href='/favicon.ico' sizes='32x32'>Errores comunes que debes evitar
- La trampa del modo oscuro: Si tu inicial es negra sobre un fondo transparente, desaparecerá por completo para los usuarios que usen pestañas del navegador en modo oscuro. Usa siempre un color de fondo sólido o un trazo blanco grueso.
- Pesadillas de caché: Los navegadores se aferran a los favicons antiguos de forma agresiva. Si actualizas el icono de tu blog y no lo ves, no entres en pánico. Simplemente añade una cadena de consulta como
?v=2a las rutas de tus archivos para forzar la actualización.
Tu blog es tu sala de estar digital. No dejes que la puerta principal parezca una plantilla genérica. Coge una buena foto, pásala por el generador y reclama tu pestaña del navegador. (Para saber más sobre marca personal, echa un vistazo a nuestra guía de favicons para portafolios).