Añadir Favicon en WordPress con y sin Plugins

El 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.

Casi todas las paginas tienen uno (o al menos deberían) ya que permite al usuario identificar fácilmente nuestra pagina web entre las diferentes pestañas del navegador.

Antes para añadir un favicon a WordPress había que liarla parda pero a partir de la versión 4.3 de WordPress ya no es necesario usar ningún plugin o código para añadir un favicon. Ahora esa función está integrada en WordPress por defecto.

Pasos para añadir un favicon en WordPress

Aadir_Favicon_WordPress

Para añadir el favicon tienes que ir a “Apariencia” -> “Presonalizar” -> “Entidad del sitio“.

añadir favicon wordpress

El tamaño recomendado del favicon es de al menos 512 x 512 px, aunque también sirven imágenes más pequeñas, lo he comprobado. 

Puedes usar imágenes jpg o png.

Mi recomendación es que uses una imagen PNG con transparencia sobre todo si vas usar tu logo como favicon. Pero de todos modos eso depende de la imagen que vayas a poner.

No tiene mucho más, es subir la imagen y darle a publicar para guardar los cambios.

Te dejo también un vídeo por si le quieres echar un vistazo.

El resto del artículo te lo puedes saltar olímpicamente, ya que no es necesario hacer nada de eso ya.

Crear un Favicon

Un favicon tiene unas dimensiones de 16 x 16 pixeles, bastante pequeño. Así que, lo más probable es que tengas que modificar o simplificar tu logo o la imagen que vayas a usar como favicon.

Según como sea tu logo es mejor guardarlo en formato .png para mantener las transparencias o guardarlo en formato .jpg.

Una vez que tengas listo el logo entra en favicon-generator.org y convertir nuestro logo a .ico. 

añadir favicon en wordpress

Después de subir el logo ya puedes generar y descargar el favicon.

Añadir Favicon en WordPress sin plugins

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

Paso 1. Sube el favicon a la librería de medios de WordPress y copia la url de esa imagen/favicon.

Paso 2. Insertar el código.

Ve a Apariencia -> Editor -> Cabecera (header.php). Si eres un usuario al más avanzado también lo puedes hacer por FTP.

Entre las etiquetas <head> </head> tienes que insertar el código justo antes de la etiqueta </head>.

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

Sustituye “x-icon por el formato de tu 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 usar un child theme.

Añadir Favicon en WordPress con Jetpack

Esta función ya no existe.

Primero tienes que instalar el plugin Jetpack.

Entra en Jetpack -> Configuración y activa la opción de “Icono del sitio“.

Una vez activada haz clic en “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 terminar simplemente guarda los cambios y listo.


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

[Total:5    Promedio:4.2/5]

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.

¡Suscríbete al blog!

No regalo eBooks, pero te ayudo a crear tu web.

Responsable: Serhiy Kolomiychuk (Sergio para los amigos). Finalidad: Gestionar y enviar información de boletines y promociones a través de correo electrónico. Legitimación: Tu consentimiento. Destinatarios: Tus datos se guardan en MailChimp. Derechos: Tienes, entre otros, derecho a acceder, rectificar y suprimir tus datos cuando quieras.

Responsable:  Serhiy Kolomiychuk ( Sergio para no complicarnos).
Finalidad: gestionar los comentarios que realizas en este blog.
Legitimación: tu consentimiento.
Destinatarios: los datos se guardarán en mi proveedor de hosting FastComet.
Derechos: acceso, rectificación, limitación y suprimir los datos recogidos.
Para más información sobre la política de privacidad haz clic aquí.

13 comentarios en “Añadir Favicon en WordPress con y sin Plugins”

  1. 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…. 😉

  2. Hola, conozco muy poco de WordPress pero quiero iniciarme en esta plataorma, con lo que explicas puedo colocarle favicon a mi blog a un sin tener dominio propio??, por tu respuesta gracias

    • Hola, por lo que me comentas me imagino que estas usando WordPress.com? Si es ási en opciones de personalización deberías de tener la opción de cambiar el favicon.

      Este tutorial va enfocado a usuarios que usen WordPress.org, o sea usuarios que tenga WordPress instalado en su propio alojamiento web.

  3. Hola, tengo el favicon publicaado sin problemas, pero al navegar por la web casi nunca carga la imagen a la primera y aparece el favicon de wp, hay que darle 1 o 2 veces a refrescar la pagina para que se pueda ver mi favicon. ¿Porque puede ser eso?

Deja un comentario