Abre una nueva pestaña en Chrome ahora mismo. Mira la cuadrícula de tus sitios más visitados. Probablemente verás el logotipo nítido de Platzi o el icono vibrante de MercadoLibre. Ahora mira más de cerca: ¿hay algún sitio que muestre un desastre borroso y pixelado, o simplemente un círculo gris genérico con una letra? Eso sucede cuando tu favicon for chrome new tab no está configurado correctamente.
La página de nueva pestaña (NTP) de Chrome es un espacio muy valioso. Cuando los usuarios frecuentan tu aplicación web, Chrome la añade automáticamente a esta cuadrícula. Pero esta sección requiere iconos más grandes y de mayor calidad que los diminutos 16x16 píxeles que se usan en la pestaña estándar del navegador.
Cómo obtiene Chrome los iconos para la nueva pestaña
Chrome no descarga un icono nuevo cada vez que un usuario abre una nueva pestaña. En su lugar, lee de una base de datos SQLite local y oculta en la máquina del usuario.
Durante una visita, Chrome escanea tu HTML y guarda en caché el mejor icono disponible. Si solo proporcionas un archivo heredado de baja resolución, Chrome se ve obligado a estirarlo para que encaje en la cuadrícula de accesos directos de la NTP. El resultado es un aspecto borroso y poco profesional. (Si estás depurando esto, te interesará leer nuestra guía sobre cómo solucionar problemas de caché en Chrome).
La configuración ideal para 2026
Para asegurarte de que tu sitio se vea nítido en la NTP de Chrome, debes dejar de depender de un único archivo antiguo. Recomendamos un enfoque de formato dual usando SVG con un PNG de alta resolución como respaldo.
Aquí tienes el código exacto que debes colocar en el head de tu documento:
<link rel='icon' type='image/svg+xml' href='/icon.svg'>
<link rel='icon' type='image/png' sizes='32x32' href='/icon-32x32.png'>
<link rel='apple-touch-icon' href='/apple-touch-icon.png'>Mejores prácticas para los accesos directos de la NTP
Tener el código correcto es solo la mitad del trabajo. Tu diseño debe sobrevivir a las peculiaridades de la interfaz de Chrome.
- Mantenlo simple: Los iconos de la cuadrícula NTP son pequeños. Elimina el texto y usa el símbolo central de tu marca.
- Planifica para el modo oscuro: La NTP de Chrome cambia los colores de fondo según el tema del sistema operativo del usuario. Un logo negro sin fondo desaparecerá por completo en modo oscuro.
- Proporciona un mínimo de 32x32: Mientras que 16x16 funciona para la barra superior, la NTP necesita más píxeles. Consulta nuestra guía de tamaños 2026 para las dimensiones exactas.
Si todavía estás redimensionando imágenes manualmente en Photoshop para arreglar tus accesos directos de Chrome, estás perdiendo el tiempo. Usa Mzu favicondl para generar exactamente los archivos SVG y PNG que Chrome exige, junto con las etiquetas HTML correctas.