El favicon es el pequeño icono que aparece en una pestaña del navegador, en una lista de marcadores y en las sugerencias de la barra de direcciones cuando alguien visita un sitio web. Hacerlo bien implica más que simplemente hacer una imagen pequeña. Un favicon que se vea nítido requiere las dimensiones de píxeles adecuadas, un diseño limpio y centrado y el formato correcto para el contexto en el que se utiliza. El tamaño estándar de favicon es de 16x16 píxeles para la visualización básica en la pestaña del navegador, con 32x32 utilizado para pantallas de alta densidad y 48x48 incluido en paquetes completos de favicon. Un favicon mal preparado se ve borroso o indistinto en la pestaña, lo cual es un pequeño detalle que refleja la calidad general de un sitio web.
Cómo cambiar el tamaño de una imagen para Favicon
Para el favicon base, ingrese 16 tanto en el campo de ancho como en el de alto y desactive la casilla de verificación Mantener relación de aspecto para obtener una salida cuadrada forzada. Para una versión de mayor resolución, repita el proceso con 32 en ambos campos. Para un paquete completo de favicon, procese la misma imagen en 16x16, 32x32 y 48x48 por separado.
La calidad de la imagen fuente importa más en tamaños de favicon que en casi cualquier otra dimensión. Un logotipo complejo o una ilustración detallada pierde toda forma reconocible en 16x16. Un icono simple y audaz con bordes limpios y detalles mínimos se mantiene mucho mejor. Comience con la versión más grande disponible del icono y reduzca su escala para obtener el resultado más nítido en cada tamaño. Cargue varios tamaños a la vez y descargue como ZIP cuando termine.
Tamaños estándar de Favicon
16x16 píxeles: el tamaño base que se muestra en las pestañas del navegador en pantallas de resolución estándar. 32x32 píxeles: utilizado por pantallas de alta densidad y accesos directos de escritorio de Windows. 48x48 píxeles: incluido en paquetes completos de favicon para una mayor compatibilidad. 180x180 píxeles: el tamaño de Apple Touch Icon que se utiliza cuando un sitio web se guarda en la pantalla de inicio de iOS. 192x192 píxeles: utilizado por dispositivos Android para iconos de aplicaciones web en la pantalla de inicio. Un paquete completo de favicon generalmente incluye todos estos tamaños generados a partir del mismo icono fuente.
Formato de salida para Favicons
PNG es el formato más ampliamente compatible para implementaciones modernas de favicon. La mayoría de los navegadores aceptan archivos favicon PNG directamente a través de la etiqueta link en el encabezado HTML. Los fondos transparentes son compatibles con PNG y permiten que el favicon se asiente limpiamente sobre el color de la pestaña del navegador. El formato ICO tradicional agrupa múltiples tamaños en un solo archivo y todavía se usa para el archivo favicon.ico raíz que los navegadores buscan por defecto. PNG en el tamaño correcto es el enfoque más directo para la mayoría de los proyectos web modernos.