¿Qué es el favicon y por qué debes añadirlo a tu blog?
El favicon (de "favorito" e "icon") es el pequeño icono que aparece en las pestañas del navegador, a la izquierda del título de la página. Las medidas de la imagen son 16x16 píxeles.
El favicon es útil para resaltar tu imagen de marca dentro de la barra de favoritos o en las pestañas del navegador, te identifica corporativamente y te diferencia del resto.
A nivel técnico, para que el navegador pueda mostrar la imagen correspondiente al favicon, dentro de las pestañas, hay que hacer dos cosas:
- Subir el archivo .ico a la raíz de tu espacio de hosting, donde está alojado tu blog.
- Codificar una instrucción en la sección de cabecera (head) del HTML de todas las páginas. Más adelante veremos cómo se hace esto.
¿Tiene impacto en el SEO?
Directamente no es un factor determinante. Sin embargo, al estar ligado a la usabilidad del sitio Web, sí podría llegar a afectar indirectamente.
Pasos a seguir para configurar el favicon
Vamos a ver qué pasos son necesarios con el fin de configurar el favicon en un blog de «WordPress.org«.
1. Crear y subir el archivo a tu servidor
En primer lugar, crea un archivo llamado "favicon.ico" con la imagen y ubícalo en la raiz del sitio donde tienes alojado el blog.
Las dimensiones de la imagen, como se indicó al principio, son 16x16. Se puede convertir cualquier imagen a formato .ico mediante cualquiera de las herramientas online existentes. Busca "crear favicon" en Google.
Añadir la instrucción correspondiente a tu plantilla de WordPress
Vamos a contemplar varias posibilidades:
- Que no uses Genesis Framework y tu plantilla no incluya la opción para configurar el favicon.
- Que no uses Genesis Framework y tu plantilla incluya la configuración del favicon en la opción de «Personalización».
- Que uses Genesis Framework.
No usas Genesis y tu plantilla no incluye la opción
Si no usas Genesis, examina si tu plantilla posee la opción para configurar el favicon. En caso contrario, tendrás que modificar el archivo "header.php" e incluir justo antes de la etiqueta </head> la instrucción "<link rel="shortcut icon" href="http://www.midominio.com/favicon.ico" />". Más información:
Creating a Favicon.
No usas Genesis y tu plantilla incluye la opción
En este caso, acude a la sección de personalización de la plantilla, dentro del escritorio de WordPress. Por ejemplo, en la imagen superior se muestra dónde se configura el favicon para el theme «Layers», uno de los themes más sencillos que puedes instalar.
Simplemente, usa el botón para «Seleccionar imagen» y súbela al servidor. La configuración automática del theme Layers hará el resto.
TIP PRO:
Si no configuras el archivo favicon, mediante el procedimiento que acabamos de indicar o, simplemente, subiéndolo manualmente al servidor, posiblemente obtengas un error en los test de rendimiento.
Por ejemplo, en Web Page Test puedes obtener lo siguiente:
Y haciendo clic en el apartado «Cache Static Content» veremos a qué elemento se refiere tan mala puntuación:
Para saber un poco más acerca de lo que significa «especificar caché de navegador (Leverage Browser Caching)», te invito a leer el post de Blogpocket:
Cómo acelerar WordPress en 10 pasos y hacer que tu blog cargue más rápido en móviles.
O en GTMetrix, ser penalizado como muestra la figura que viene a continuación. La puntuación es muy buena en este ejemplo; sin embargo, se puede mejorar sencillamente subiendo un archivo favicon a la ráiz de la instalación de WordPress.
Esto significa que configurar el favicon no solo es bueno a nivel de identificación de marca y usabilidad, sino también en cuanto al rendimiento. Por lo menos para no empeorar los resultados de los tests que indican si un sitio Web está optimizado.
Usas Genesis
Si usas Genesis ve a "Genesis > Simple Hooks" y en el apartado "WordPress Hooks", asegúrate de que la casilla "Unhook genesis_load_favicon() function from this hook?", que encontrarás dentro del espacio dedicado a "wp_head Hook", se encuentre activada. Guarda los cambios haciendo clic en el botón "Save changes".
Ahora, acude a "Genesis > Opciones del tema" e incluye la sentencia "<link rel="shortcut icon" href="http://www.midominio.com/favicon.ico" />" dentro del espacio donde dice "Introduzca algún script o código que desee que salga en wp_head():", en el apartado "Scripts de Encabezado y Pie de Página". Para terminar, haz clic en "Guardar Opciones".
Debes sustituir www.midominio.com por el dominio de tu blog, claro está.
Para aprender más sobre el framework Genesis:
Cómo configurar un theme de Framework Genesis para WordPress.
¿Y si mi blog no es de WordPress?
Si la plataforma de blogging es autoalojada, únicamente hay que definir la sentencia «<link rel="shortcut icon" href="http://www.midominio.com/favicon.ico" />» delante de la etiqueta </head>, en todas las páginas. Y alojar el archivo favicon.ico en la raíz del espacio de almacenamiento del hosting. Dependerá de la plataforma.
En el caso de sistemas de publicación de blogs, listas para usar, del estilo de Blogger, Ghost o Medium, no hay que preocuparse porque se hace automáticamente.
Más información:
Recomendaciones de W3C para añadir el favicon a tu Web.