';

Information

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut rhoncus risus mauris, et commodo lectus hendrerit ac. Nam consectetur velit et erat fermentum aliquet. In laoreet, sem sit amet faucibus pulvinar, purus tellus tincidunt ex, vel blandit nibh dui sit amet justo.

Menú

Cómo poner un favicon en tu página web de WordPress

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.

como poner un favicon en tu pagina web img1 - iborra web design

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.

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.

como poner un favicon en tu pagina web img2 - iborra web design

Poner el favicon en tu página web de 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

Comentarios
Paco (Iborra Web Design)

Artículos destacados

Hay 2 comentarios en este artículo
  1. Mauricio
    7 agosto 2019, 22:36

    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.

    • Paco (Iborra Web Design)
      8 agosto 2019, 11:39

      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.

Deja un comentario

¿Necesitas ayuda? Escríbeme por Whatsapp