Cultura

Cómo crear y publicar su favicon de WordPress

Si visita la mayoría de los sitios web en Internet y observa la imagen pequeña en el lado izquierdo de la pestaña del navegador, esa imagen se conoce como el favicon del sitio.

La mayoría de los sitios web profesionales presentan una de estas imágenes en la pestaña del navegador donde se muestra el sitio. Si no es así, solo verá un icono de documento sin formato. Esta es una señal de un sitio web poco profesional o uno creado por alguien que sabe muy poco sobre el diseño de sitios web.

Si desea retratar una imagen profesional con su sitio web de WordPress, entonces realmente necesita crear y publicar un favicon de WordPress. Te mostraremos cómo.

¿Qué es un favicon de WordPress?

Eche un vistazo a la pestaña del navegador que tiene abierta actualmente. Debería ver el favicon de Groovypost en la esquina superior izquierda de la pestaña.

favicon de groovypost

No es particularmente complicado instalar un favicon, pero diseñar uno puede requerir un poco de reflexión.

Las siguientes son algunas cosas que debe tener en cuenta al decidir qué imagen usar como imagen de favicon de su sitio.

  • Apunta a crear una imagen con dimensiones de 512 × 512 píxeles
  • Haga que la imagen sea lo suficientemente simple como para que se muestre bien incluso a 16 × 16 píxeles
  • Tu favicon debe representar tu marca de una manera sencilla
  • Evite copiar favicons reconocidos como Gmail o Google Drive, ya que esto confundiría a los usuarios.
  • Una imagen de favicon debe guardarse en formato de icono de Windows (ICO)
  • Las imágenes transparentes funcionarán pero no son necesarias

¿Por qué guardar la imagen en 512 × 512 píxeles? Dependiendo del dispositivo con el que el usuario esté navegando por la web, la imagen podría mostrarse en dimensiones tan pequeñas como 16 × 16 píxeles y tan grandes como 310 × 310 píxeles. Guardar como 512 × 512 píxeles cubre todas las resoluciones, independientemente de cómo el navegador del usuario escale la imagen.

Cómo crear su favicon de WordPress

La parte más difícil de configurar su favicon de WordPress será crearlo. Si tiene talento para crear gráficos digitales, entonces ejecute Adobe Photoshop o Gimp y cree el icono de su sitio desde cero. Sin embargo, si no eres muy bueno diseñando tus propios gráficos, hay muchas otras opciones.

Puede utilizar cualquier sitio web generador de favicon en línea gratuito para crear rápidamente un favicon que funcionará bien para su sitio.

generador de favicon

  • Favicon.io: crea iconos de favicon comenzando con texto, tu propia imagen o elige un emoji. Si comienza con el texto, puede personalizar el estilo y el color de la fuente y el color de fondo.
  • Favicon.cc: Dibuje un icono rápido con solo usar el mouse en un área de dibujo. Si tiene una pantalla táctil, puede dibujar el icono con el dedo o con un lápiz.
  • Ionos.ca: Comience con iniciales, cargue una imagen o dibuje su ícono de favicon. Este sitio incluye una vista previa antes de descargarlo.
  • Website Planet: comience con una imagen o elija de una galería de favicons prediseñados que puede personalizar.

Muchos de estos sitios también tomarán una imagen que haya creado en formato PNG, JPEG o GIF y la convertirán en formato ICO por usted.

Una vez que haya creado su imagen ICO y la haya guardado en su computadora en algún lugar, estará listo para instalarla en su sitio web de WordPress.

Instalación de su favicon de WordPress

Tiene su favicon almacenado en su computadora en formato ICO. Entonces, ¿cómo se instala en su sitio de WordPress? Tienes pocas opciones.

1. Utilice la función de personalización de WordPress

Si está utilizando una versión de WordPress que es más nueva que WordPress 4.3 (como debería ser), WordPress proporciona una opción incorporada para cargar su favicon como un “icono de sitio”.

LEER  EMPRENDEDOR RENTA DISNEY POR UN DÍA | MASTER MUÑOZ

Para hacer esto, inicie sesión en su panel de administración de WordPress y seleccione Apariencia en el menú de la izquierda. A continuación, seleccione Personalizar.

Personaliza la apariencia

Esto abrirá la nueva herramienta de personalización visual de WordPress. Seleccione Identidad del sitio en el menú de la izquierda.

identidad del sitio

Esto abrirá un área desplegable donde puede personalizar el logotipo, el título y otras características de su sitio. Hacia la mitad inferior, verá el Icono del sitio sección.

Para cargar su archivo de favicon, elija el Seleccione el icono del sitio.

seleccione el icono del sitio

Esto abrirá el Seleccionar imagen herramienta en WordPress. Si ya ha subido su archivo de favicon a su biblioteca de imágenes de WordPress, puede seleccionarlo de la Mediateca pestaña.

Si aún no lo ha subido, seleccione el Subir archivos , busque y seleccione su archivo de favicon en su computadora, y luego cárguelo. Selecciónelo una vez que esté cargado.

Mediateca

Una vez que haya seleccionado su archivo de favicon, verá una pequeña vista previa en la sección Icono del sitio. Esta área también le muestra una pequeña vista previa de cómo se verá la pestaña del navegador con esa imagen.

Si le gusta lo que ve, seleccione el Publicar en la parte superior de la página.

publicar cambios

Su imagen de favicon ahora está activa y comenzará a aparecer en cualquier pestaña del navegador cuando las personas visiten su sitio.

2. Cargue el favicon manualmente

Si no está usando la última versión de WordPress, o incluso si está usando algún otro CMS, una solución fácil y generalizada es cargar el archivo de favicon de ICO en el directorio raíz de su sitio web.

En las instalaciones de WordPress en la mayoría de los servidores web, este suele ser el public_html directorio dentro de la carpeta web de su sitio web. Asegúrate de nombrar el archivo favicon.ico y use su cliente FTP favorito o cualquier administrador de archivos que su proveedor de alojamiento web le haya proporcionado para cargar el archivo en esa carpeta.

subir favicon

Cierre su navegador o haga una actualización del navegador Ctrl-F5 para volver a cargar su sitio web. Una vez que lo haga, debería ver que la pestaña del navegador con su sitio ahora muestra su nueva imagen de favicon.

Esto funciona la mayor parte del tiempo porque si su tema o sitio no especifica un enlace de favicon, WordPress se predetermina a la carpeta raíz. Otros sistemas CMS distintos de WordPress suelen tener la misma ubicación de favicon por defecto.

Si esto no funciona, puede haber varias razones.

  • Su tema especifica un enlace de favicon en otra ubicación.
  • Ha guardado el archivo con la extensión o el nombre incorrectos.
  • Es posible que no haya esperado lo suficiente para que WordPress recoja la nueva imagen de favicon.

Si su tema especifica un enlace de favicon, también debe proporcionar una página de configuración (similar al ejemplo de WordPress anterior) donde puede cargar su favicon. Si no es así, hay una manera de que usted mismo pueda codificar este enlace dentro de su tema actual.

3. Inserta un vínculo de favicon

Primero, cargue el archivo de favicon en el directorio raíz de su sitio web usando el procedimiento en la última sección.

Inicie sesión en su panel de administración de WordPress y seleccione Apariencia en el menú de la izquierda. A continuación, seleccione Editor de temas.

editor de temas

Selecciona el header.php archivo del panel de navegación derecho donde se enumeran las páginas. Inserte las siguientes dos líneas en el archivo en el encabezamiento sección.


Reemplace “su sitio” con el nombre de su propio sitio web.

archivo de cabecera

Seleccione Actualizar archivo para guardar los cambios. Ahora, una vez que recargues tu página, deberías ver que tu tema recogió el favicon que has subido, y la pestaña del navegador muestra tu imagen de icono.

Author

Moisés Cabrera

Encantado de emprender, el Internet es como pez en el rio para mi y quiero aportar valor a este mundo digital. Si crees que es de interés estos artículos no dudes en comentar.

¿Te gusta nuestro contenido?Recibe noticias y estrategias digitales a tu correo.

No pierda la oportunidad de recibir también descuentos de nuestros servicios.