La pestaña de tu navegador es tu apretón de manos digital
Por fin has desplegado tu sitio personal. Le envías la URL a un reclutador de una startup tecnológica. Abren tu enlace junto a otras 15 pestañas de candidatos. Tu pestaña muestra el átomo por defecto de React o el triángulo de Vercel. Acabas de suspender la prueba de atención al detalle antes incluso de que vean tu código.
Un buen favicon para portfolio web no es solo decoración; demuestra que terminas lo que empiezas. Fíjate en cómo maneja GitHub los avatares por defecto: usan patrones geométricos limpios y de alto contraste. Evitan imágenes complejas porque los píxeles pequeños exigen simplicidad absoluta. Aquí tienes exactamente cómo configurar una presencia profesional en la pestaña en 2026.
Paso 1: Olvídate de la foto de perfil
Constantemente veo a desarrolladores intentando usar su foto profesional como icono del sitio. No lo hagas. A 16x16 píxeles, una cara humana parece un pulgar borroso. En su lugar, elige uno de estos formatos fiables:
- Un monograma en negrita de una sola letra (tu inicial).
- Un emoji SVG limpio (como un portátil, una taza de café o un terminal).
- Una forma geométrica minimalista que encaje con tu marca.
Paso 2: Genera el stack moderno
No necesitas una carpeta enorme llena de iconos heredados. Solo necesitas unos pocos archivos optimizados. Coge tu PNG o SVG en alta resolución y súbelo a Mzu favicondl. Te devolverá exactamente el stack moderno que necesitas. Si tienes curiosidad sobre por qué ya ignoramos ciertos formatos antiguos, lee nuestra guía completa de iconos web.
Paso 3: Implementa el HTML
Abre tu archivo de layout principal y pega esta configuración mínima dentro de tu etiqueta head:
<link rel='icon' type='image/svg+xml' href='/favicon.svg'>
<link rel='icon' type='image/png' href='/favicon-96x96.png' sizes='96x96'>
<link rel='apple-touch-icon' sizes='180x180' href='/apple-touch-icon.png'>Paso 4: Maneja las pestañas en modo oscuro
Si tu monograma es negro, desaparecerá por completo cuando un reclutador use el tema oscuro de Chrome. Necesitas un favicon SVG que se adapte al tema del sistema. Añade este CSS directamente dentro de tu archivo SVG:
<style>
@media (prefers-color-scheme: dark) {
.monogram { fill: #ffffff; }
}
</style>Error común: La trampa de la caché
Subes el nuevo icono, refrescas Chrome, y el viejo logo de React sigue ahí burlándose de ti. Los navegadores cachean los favicons de forma muy agresiva para ahorrar ancho de banda. Antes de tirarte de los pelos, lee cómo forzar el borrado de la caché del favicon. Normalmente, añadir una simple cadena de consulta de versión (como ?v=2) a las rutas de tus enlaces HTML soluciona el problema.
Tu portfolio representa tus estándares de ingeniería. Arregla la pestaña de tu navegador hoy y demuestra a los reclutadores que te importa ese 1% final de pulido.