añadir-favicon-en-wordpress

Añadir Favicon en WordPress con y sin Plugins

Favicon es ese pequeño icono que aparece a la izquierda de cada pestaña del navegador junto con el título de la página. Si os fijáis, casi todas las paginas tienen uno ya que facilita la búsqueda entre las diferentes pestañas que tenemos abiertas y como recuerdo para los usuarios que visiten nuestra web. Hay varias formas de añadir favicon en WordPress pero antes tenemos que crear uno.

Crear un Favicon

Nota: A partir de la versión 4.3 de WordPress puedes añadir el favicon desde “Apariencia” -> “Presonalizar” -> “Entidad del sitio”. Debe tener un tamaño de 512 x 512 px.

Un favicon tiene unas dimensiones de 16 x 16 pixeles, bastante pequeño. Así que lo más probable es que tendremos que modificar o simplificar nuestro logo. Lo mejor es utilizar el formato .ico, así evitaremos algunos problemas de compatibilidad con navegadores.

Según como sea nuestro logo es mejor guardarlo en formato .png para mantener las transparencias o guardarlo en formato .jpg. Una vez que tenemos listo nuestro logo tenemos que ir a la web favicon-generator.org y convertir nuestro logo a .ico. 

añadir favicon en wordpress

Después de subir nuestro logo podemos generar y descargar el favicon.

Añadir Favicon en WordPress sin plugins

Para tener nuestra web en wordpress optimizada no hay que abusar de los plugin. Lo ideal es usar sólo los justos y necesarios. Podemos añadir nuestro favicon modificando un poco el código de la plantilla sin necesidad de instalar ningún plugin.

Paso 1. Subir la imagen a la biblioteca y copiar la url. Vamos a “Medios”, buscamos la imagen, en detalle de la imagen a la derecha esta el campo de url.

Paso 2. Insertar el código. Para ello vamos Apariencia -> Editor -> Cabecera (header.php). Entre las etiquetas <head> </head> tenemos que insertar el código justo antes de la etiqueta </head>.

<link rel=”shortcut icon” type=”image/x-icon” href=”url del favicon“/>

Sustituimos “x-icon por el formato de nuestra imagen.

ñadir favicon wordpress sin plugin

Listo! ya tenemos nuestro favicon en wordpress.

Ten en cuenta que si actualizas la plantilla probablemente tengas que insertar este código otra vez. Para evitar esto necesitas utilizar un plugin o hacer esto mediante Child Theme.

Añadir Favicon en WordPress con Jetpack

Primero tenemos que instalar este gran plugin. Luego nos vamos a Jetpack -> Configuración, ahora tenemos que activar la opción de “Icono del sitio“. Una vez activado le damos a “Configurar“.

añadir favicon con jetpack

Nos permite subir una imagen de 512 x 512 pixeles que se convertirá en favicon para nuestra web. En el próximo paso podrás recortar la imagen para que quede mejor como favicon en WordPress.

Para finalizar le damos al botón de ajustar imagen y guardamos. Ahora nuestra página web tendrá un icono personalizado en la barra de cualquier navegador.

Espero que te haya servido esta guía de como añadir Favicon en WordPress.

[Total:0    Promedio:0/5]
Kit de herramientas para crear un blog

Lo que uso para crear webs

Mi Kit de Herramientas con el que podrás empezar a crear tu web.

Sergio Kolomiychuk

Autodidacta, apasionado del WordPress, marketing y las nuevas tecnologías. Me encantan las webs limpias con buena usabilidad y es lo que ofrezco a mis clientes. Comparto lo aprendido en el blog para ayudar a otras personas a crear una web profesional.

  • Karen Mossetto

    GRacias, me sirvió.

  • Luis

    Hola !!!

    Me ha parecido muy interesante. He tenido algunos problemas con el servicio técnico de avada sin poder llegar a solucionar el problema. Con tus indicaciones parece que todo esta correctamente, puedo ver el favicon tanto en el front-end como en el back-end.
    Lo único que he hecho ha sido subir la imagen en formato png y con 500pxX500px en apariencia>personalizar>identidad del sitio. No he tocado nada en el apartado theme options de avada (donde se supone que tienes que subir las imagenes a diferentes tamaños para los diferentes dispositivos que hay en el mercado (movil, oredenador, retina….) y con formato .ico.
    Me queda la duda si realmente lo he hecho correctamente, y si es avada o wordpress el que redimensiona automaticamente la imagen que he subido (500×500) a otros tamaños (16×16, 57×57, 72×72,….) segun dispositivos. Pongo el dominio de mi web por si quereis mirar como ha quedado….
    Muchas gracias por la info…. 😉

    • Hola Luis, con lo que has hecho es suficiente. No es obligatorio colocar el favicon con todas esas resoluciones. Yo lo tengo puesto en las opciones de WordPress y se ve perfectamente en todos los dispositivos. En cualquier caso, siempre puedes añadir esas resoluciones por si las moscas.

      • Luis

        Muchas gracias sergio por resolverme esta pequeña duda, y sobre todo por el articulo….
        😉

Cállate y coge mi dinero!!!

{{alt_text}}
fry-coge-mi-dinero
{{alt_text}}
convert-pro
logo-thrive-leads

¿Convert Pro o Thrive Leads?

La decisión es tuya

Convert Pro o

Thrive Leads

{{alt_text}}

Pin It on Pinterest

Share This