• Saltar a la navegación principal
  • Saltar al contenido principal
  • Saltar a la barra lateral principal

DecodeCMS

Tu WordPress a otro Nivel ...

  • Acerca de
  • Contacto
  • Inicio
  • Tutoriales
    • Themes
    • Plugins
    • Core
    • Recursos
  • Cursos
  • Acceder
    • Mis cursos
    • Mi Cuenta
    • Acceder
Inicio / Tutoriales / Themes / Cómo añadir un Favicon en WordPress

Cómo añadir un Favicon en WordPress

Cómo añadir un Favicon en WordPress

[ 15 mayo 2018 ] [ Autor: Jhon Marreros Guzmán ][ Themes - Básico] [ ]

mejoras

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

La imagen que aparece en la parte superior del navegador cuando visitas algún sitio web la llamamos favicon, existen diferentes maneras de añadir un favicon en WordPress, desde las más simple hasta las más compleja, veremos algunas de ellas a continuación.

 

Generalidades

Antes de empezar, ten en cuenta que no siempre es adecuado que la imagen de tu logo sea un favicon, ya que al ser una imagen pequeña ( desde 16×16 pixeles), puede ser que no se vea correctamente, lo usual es tomar una parte del logo o poner alguna imagen representativa de tu web como favicon.

En la siguiente imagen se ve que el favicon es una parte representativa del logo.

construcción de favicon en base a un logo

 

Favicon significa icono favorito, es una palabra formada por “favorite” + “icon” (en inglés).

 

1- Reemplazando directamente el Favicon

Si tu theme ya tiene un archivo favicon.ico en alguna ubicación, usualmente directamente en la carpeta del theme o en la carpeta de images, puedes simplemente reemplazar el archivo y con esto tendrás tu favicon cambiado.

Por ejemplo en el caso de los themes que usan el framework Genesis, puedes reemplazar el favicon.ico en la carpeta images del child-theme, tal como se ve en la siguiente imagen.

Reemplazar archivo favicon.ico

En el caso de un child-theme con Genesis, podrías incluso borrar el archivo favicon.ico y usar un archivo llamado favicon.png, favicon.gif o favicon.jpg

Puedes usar un servicio como favicon-generator para generar tu archivo .ico

 

2- Usando la funcionalidad de WordPress

Esta es otra forma muy cómoda de cambiar el favicon de tu sitio, haciéndolo directamente desde WordPress.

  • Lo primero es preparar una imagen cuadrada al menos de 512×512 pixeles.
  • Luego ve a: Apariencia > Personalizar > Identidad del sitio , sección Icono del sitio

Pantala de cambio de favicon WordPress

 
Cuando usas esta opción te generará iconos de los siguientes tamaños:

  • 32×32
  • 192×192
  • 180×180
  • 270×270

 
Lo puedes comprobar fácilmente revisando tu código HTML generado

La generación de diferentes tamaños es para cubrir las necesidades de distintos dispositivos cuando se cree un acceso directo del sitio.

 

3- Agregando los favicons manualmente

Si quieras cubrir muchos más casos de favicons de los que WordPress te da por defecto, puedes evaluar crear tus favicons manualmente, existen diferentes servicios para lograr esto, por ejemplo: Realfavicongenerator

Servicio externo para generar favicons

Ten en cuenta que en este caso tendrás que hacer modificaciones a los archivos de tu theme para agregar el código HTML generado.

 

Conclusión

En la mayoría de los casos usarás o un reemplazo del archivo favicon.ico directamente o usararás la funcionalidad de cambio de favicon que tiene WordPress, rara vez terminarás insertando varios tamaños de favicons de manera manual, salvo sea un requerimiento específico de tu cliente.

 

¿Aún con dudas?, en el siguiente video se explica los puntos tratados anteriormente.

 

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

Artículos Relacionados

  • CRUD en WordPress sin pluginsCRUD en WordPress sin plugins
  • Cómo eliminar todos los productos de WooCommerceCómo eliminar todos los productos de WooCommerce
  • Agrupar los resultados de búsqueda en WordPressAgrupar los resultados de búsqueda en WordPress
  • tipos de complementos de WordPress5 tipos de complementos de WordPress
Valora este artículo : 1 barra2 barras3 barras4 barras5 barras (2 votos, promedio: 5,00 de 5)
Cargando...

Interacciones con los lectores

Comentarios

  1. Jack

    24 febrero, 2019

    Hola, tengo una duda ¿se podría seleccionar un favicon diferente para cada sección de la web? tengo una web donde cada apartado va dedicado a un tema diferente y me gustaría que el favicon fuese relacionado con su tema correspondiente. Me imagino que no se puede, pero tengo la curiosidad. Gracias.

    • Jhon Marreros Guzmán

      25 febrero, 2019

      Hola teóricamente si sería posible, aunque tendrías que hacerlo por código, comprobando cada página, etc ,
      Revisa este plugin que podría ayudarte: https://wordpress.org/plugins/per-page-add-to/
      Sin embargo ten en cuenta que el navegador almacena el icono en cache, los cambios que hagas podrían no verse inmediatamente.

Para escribir código envolver con: <pre class="language-xxx"><code> </code></pre> ,reemplaza las xxx (php, css, html)

*

* Gravatar habilitado

Barra lateral principal

Presentación

Curso Decodifica WordPress

Únete a DecodeCMS

Recibirás como regalo:

Guia práctica con video:
¿Quieres agregar código a WordPress? Revisa las diferentes opciones que tienes.Ver más

Jooble
Alojamiento Wordpress

Niveles

Básico Intermedio Avanzado

Etiquetas

accesibilidad css dashboard editor error funcionalidad herramientas imagen js librería mejoras optimización seguridad social woocommerce

Populares

Cómo optimizar las revisiones en WordPress

Mostrar widget lateral al inicio en móviles

Copiar al portapapeles en WordPress sin plugins

Tablas Responsive en WordPress sin plugins

© logo decode pie
Política de Privacidad | Política de devoluciones
Copyrigth 2023 Todos los derechos reservados