Un favicon, también conocido como icono de página, es una pequeña imagen asociada con una página o sitio web en particular. Los navegadores muestran el favicon de la página visitada en el encabezado de la pestaña correspondiente.
También se utilizan para identificar más fácilmente las páginas, presentándolos junto a sus respectivos títulos, en las listas de marcadores o favoritos y en los historiales de páginas visitadas y de navegación reciente. Un ejemplo de cómo se ven los favicones en las pestañas correspondientes.
El tamaño ideal de un favicon es de 16×16 píxeles, con extensión .ico y se recomienda que el icono sea el logotipo que identifique tu proyecto para que la gente se familiarice con él y se posicione.
Índice del artículo
Herramienta para generar un favicon
Para realizar un favicon utilizaremos el logo de nuestro sitio web, a un tamaño no muy grande, que sea un cuadrado con fondo transparente o del color que queráis, y guardado con una extensión .png o bien .jpg. Una vez lo tengamos, nos vamos a la página de Dynamic Drive para convertir nuestra imagen a un icono con extensión .ico.
Lo primero será seleccionar el archivo y luego elegir un tamaño de 32×32 o 48×48, si no se selecciona ninguno el tamaño será de 16×16. Yo suelo utilizar el de mayor medida. Luego le damos al botón Create Icon. Una vez creado el favicon hacemos clic en Download Favicon.
Cómo añadir el favicon en WordPress
Hay varias formas de hacerlo si nuestra página web la hemos creado a través de WordPress y son las siguientes.
- Si hemos comprado un tema para realizar la web, seguramente desde el apartado Theme Options tenemos la opción de poder subir el favicon creado. Previamente hay que subir la imagen a Medios.
- Otra opción es ir al archivo header.php de nuestro Child Theme y pegar el siguiente código dentro de la etiqueta <head>. Cambiar donde dice url_favicon por la ruta donde tengáis ubicado el archivo.
<link rel="icon" href="url_favicon" type="image/x-icon"> <link rel="shortcut icon" href="url_favicon" type="image/x-icon" />
- En caso de no tener la opción de ubicarlo desde las opciones del tema o simplemente porque estáis utilizando un tema HTML en blanco, la mejor opción para poner el favicon es poner el siguiente código dentro del archivo functions.php de nuestro Child Theme. Yo utilizo siempre esta forma de hacerlo.
//Poner favicon
function mi_favicon() { ?>
<link rel="shortcut icon" href="url_favicon" />
<link rel="icon" href="url_favicon" type="image/gif"/>
<?php }
add_action('wp_head', 'mi_favicon');
- Otra opción sería a través de un plugin pero no merece la pena consumir recursos innecesarios con lo fácil que es ponerlo por código. Si aún así queréis utilizar algún plugin, os recomiendo Favicon by RealFaviconGenerator.
Es importante tener un favicon, así el usuario con un simple icono puedo reconocer la página.
!Si te gustó este artículo, no dejes de visitar el blog o suscribirte a la newsletter! | Iborra Web Design
Hola he seguido el artículo y sin embargo el único icono que me aparece es en la parte superior de la pestaña y no en la barra de direcciones, que es lo que necesito, me puedes ayudar?, gracias saludos.
Hola Mauricio,
Si el favicon te aparece en la pestaña significa que lo has hecho bien. Ese es el sitio del favicon, no en la barra de direcciones. Fíjate en el artículo en la primera imagen que pongo, ese es el lugar correcto. El icono que ves en la barra de direcciones cada navegador lo interpreta de una forma, ese espacio está reservado a un Certificado SSL para informar al usuario de que la web es segura.
Espero haberte podido ayudar con la respuesta. Gracias por comentar.
Un saludo.