in ,

Cómo crear un icono de sitio para tu sitio web de WordPress

Los expertos en branding a menudo hablan de visibilidad. En otras palabras, los elementos orientados al usuario de tu sitio prácticamente siempre deben reflejar tu marca. Sin embargo, un proyecto que puedes no haber considerado es crear un icono de sitio para tu sitio web de WordPress.

La buena noticia es que es más fácil que nunca diseñar y cargar el icono de tu sitio en WordPress. De hecho, hay varias maneras de realizar la tarea independientemente de tu experiencia, tiempo y presupuesto.

En esta publicación, veremos cómo crear un icono de sitio para tu sitio. Sin embargo, primero, describiremos por qué querrías considerar crear un ícono de sitio, junto con algunas consideraciones que deberás hacer.

Qué es un icono de sitio (y por qué necesitas uno)

Es probable que hayas visto un ícono de sitio, incluso si no estás seguro de cuáles son. De hecho, ya has mirado uno: echa un vistazo a la esquina superior izquierda de la ventana de tu navegador:

Es esencialmente un pequeño icono que se muestra junto a la pestaña de la página en tu navegador, o en las páginas de resultados de los motores de búsqueda (SERP):

Considéralo un equivalente digital a la pequeña bola que conectas a la antena de tu coche. Sin embargo, hay una diferencia entre un ícono de sitio y las otras 5.000 bolas de colores en el estacionamiento de Walmart: puedes hacer un ícono de sitio específico para tu marca.

Cuando se trata de la marca de tu sitio, las primeras impresiones son importantes. Además, los consumidores miran qué tan consistente es una marca como un marcador de confianza. Un icono de sitio puede ayudar a lograr ambas cosas.

Por supuesto, el ícono de tu sitio no va a llevar todo el peso de tu estrategia de marca. Sin embargo, la visibilidad adicional que aporta, especialmente si un cliente potencial está navegando por tu sitio, podría tener un impacto positivo en el futuro.

Cómo crear un icono de sitio para tu sitio web de WordPress (en 3 pasos)

Hay dos fases involucradas en esta tarea. Primero, tendrás que crear un ícono de sitio. Luego, deberás cargarlo en tu sitio web de WordPress. Aquí hay tres pasos que puedes seguir para crear un icono de sitio para tu sitio de WordPress:

A continuación, te mostraremos tres formas de subir tu icono:

Hay mucho que superar, ¡así que comencemos!

Paso 1: elige el tamaño correcto para el icono de tu sitio

En primer lugar, es el tamaño del icono de tu sitio. Tendrías razón al pensar que estos archivos van a ser pequeños. Sin embargo, si bien los tamaños son pequeños, comprender las diversas dimensiones puede ser complejo. Esto se debe a que las diferentes plataformas tienen diferentes requisitos para los tamaños de iconos de sitio (o ‘favicon’).

En términos generales, la mayoría de los navegadores admitirán un archivo de.ico de 32 x 32 píxeles, que ha sido el estándar durante décadas. Sin embargo, en la práctica, querrás usar un archivo de.png de 512 x 512 píxeles. La razón es que esto cubre prácticamente todas las bases, desde el tamaño predeterminado del icono del sitio de Chrome, hasta el requisito mínimo.

Por cierto, esta también es una recomendación explícita dentro del back-end de WordPress (más de lo cual más adelante). Una vez que se establece su tamaño, es hora de pensar en el diseño.

Paso 2: asegúrate de que estás utilizando prácticas óptimas para el diseño del icono de tu sitio

La tentación para el diseño de iconos de sitios es simplemente usar una versión a escala del logotipo de tu sitio y llamarlo un día. Sin embargo, dados nuestros consejos sobre la marca óptima, debes tomarte el tiempo para trabajar en un icono de sitio personalizado en lugar de decidirte por la opción fácil.

Además, la «sala» virtual que tiene significa que es posible que no puedas articular tu marca utilizando tu logotipo regular. Como tal, querrás tener en cuenta lo siguiente al hacer el icono de tu sitio:

  • Destila tu marca a uno o dos colores simples que ofrezcan consistencia y visibilidad.
  • Reduce tu logotipo a los elementos más esenciales y haz que este sea el tema del icono de tu sitio.
  • Usa el contraste para enfocar los aspectos principales del ícono de tu sitio.

Para ofrecer un ejemplo del mundo real de estos, mira de nuevo el icono del sitio SnippetsBoard. Utiliza azul y blanco, que ofrece un alto contraste, y solo contiene el logotipo del sitio.

Esto es todo lo que se necesita. Ofrece visibilidad, consistencia con los otros elementos de marca y garantiza que puedas detectar la pestaña en las SERP y las pantallas del navegador.

Paso 3: selecciona la herramienta adecuada para crear el icono de tu sitio

El paso final una vez que haya ordenado el tamaño y el diseño del icono de tu sitio es crearlo. Como era de esperar, hay innumerables formas de crear tu icono, y si tienes una herramienta como Canva, esto será ideal. Las alternativas como DesignBold también son perfectas para la tarea, especialmente si tu cuenta ya almacena el logotipo de tu sitio:

Favicon.io también es fantástico para crear rápidamente un icono de sitio de solo texto y descargar todos los diversos tamaños que necesitas:

Ten en cuenta que deberás guardar el icono de tu sitio como un no transparente de 8 o 24 bits .PNG, ya que este es el formato más óptimo. Favicon.io hace esto por ti, aunque tendrás que cambiar la configuración en otros editores genéricos.

3 formas de subir el icono de tu sitio a WordPress

Como es estándar con WordPress, hay una multitud de formas de cargar el icono de tu sitio. A continuación, abordaremos los casos de uso y la idoneidad, aunque puedes investigar los que potencialmente te convenga.

1. Usa la funcionalidad incorporada de WordPress

La gran noticia para la mayoría de los usuarios de WordPress es que la plataforma ofrece una funcionalidad rápida y directa para cargar un icono de sitio.

Si estás buscando un enfoque sensato para la tarea, este es el método para ti.

Paso 1. Accede a la pantalla de identidad del sitio en WordPress

Primero, inicia sesión en WordPress. Desde el panel de control, dirígete a tu panel de opciones de tema. Tu tema premium puede tener opciones dedicadas, aunque para los temas predeterminados de WordPress esto estará dentro de la pantalla Apariencia > Personalizar > identidad del sitio del Personalizador:

Una vez que estés aquí, puedes pasar al siguiente paso.

Paso 2. Selecciona el icono de tu sitio

A continuación, echa un vistazo a la sección Identidad del sitio para el cuadro de diálogo Seleccionar icono de sitio:

Aquí, haz clic y carga como lo harías normalmente con las cargas de medios de WordPress. Recuerda establecer el ‘texto alternativo’ adecuado para el icono de tu sitio, para mejorar su accesibilidad.

Paso 3. Comprueba el icono del sitio en el front-end

Finalmente, echa un vistazo al front-end de tu sitio, específicamente para ver si el icono de tu sitio se ha cargado correctamente. Notarás que WordPress ofrece una gran vista previa del ícono de tu sitio actual, dentro de una maqueta del navegador:

Sin embargo, aún debes echar un vistazo a cómo se representa el icono en un navegador, principalmente porque mostrará cómo se ve el icono para otros usuarios, un factor más importante.

2. Instala un plugin de WordPress adecuado

Para muchos usuarios, la instalación de un plugin de WordPress es la solución de «ir a». Sin embargo, dado que prácticamente todos los sitios de WordPress tienen opciones de Customizer incorporadas para hacer esto, un complemento puede ser excesivo.

Recomendamos este enfoque si tienes requisitos específicos para el icono de tu sitio o si no tienes la opción de cargar uno utilizando las opciones de tu tema.

Paso 1. Elige un complemento adecuado

El título de este paso es un nombre ligeramente inapropiado, ya que solo recomendamos un complemento: Favicon de RealFaviconGenerator:

Es esencialmente una versión en complemento del popular sitio web y potencia la funcionalidad incorporada de WordPress. Genera todos los iconos de sitio necesarios a partir de una sola imagen y los almacena en la Biblioteca multimedia.

Una vez que hayas instalado y activado el complemento, casi habrás terminado.

Paso 2. Carga el icono de tu sitio de tamaño completo

Una vez que se active el complemento, notarás una nueva apariencia > panel Favicon dentro de tu panel de WordPress. Encabezando aquí aparece un conjunto de opciones sin complicaciones:

Si bien la redacción es un poco confusa, esencialmente se carga (o selecciona una imagen de) la Biblioteca de medios. Recuerda agregar texto alternativo aquí si aún no lo has hecho.

Para comenzar el proceso de carga, simplemente haz clic en el botón azul Generar favicon y continúa con el paso final.

Paso 3. Descarga los iconos de tu sitio

Una vez que el complemento comience a generar los iconos de tu sitio, notarás que cambia a una versión de aplicación web del sitio del desarrollador. Aquí es donde encontrarás todos los diferentes iconos del sitio para varias plataformas y dimensiones:

Ten en cuenta que puedes elegir algunas opciones adicionales específicas de la plataforma aquí, relacionadas con el diseño y la presentación del icono de tu sitio:

Sin embargo, una vez que estés listo, haz clic en Generar tus Favicons y código HTML, momento en el que el complemento hará su magia.

Finalmente, volverás a tu panel de WordPress, donde verás vistas previas de los iconos de tu sitio en varias maquetas:

El icono de tu sitio ahora debería estar listo para rodar; nuevamente, querrás verificar el front-end para estar seguro.

3. Trabaja con código para mostrar el icono de tu sitio

El enfoque final que incluiremos es posiblemente anticuado para los usuarios promedio, dadas las alternativas. Sin embargo, usar código para mostrar el icono de tu sitio es ideal para requisitos muy exactos, o incluso si estás creando un tema personalizado.

Paso 1. Accede al servidor de tu sitio mediante el Protocolo de transferencia de archivos (FTP)

Para este enfoque, necesitarás acceso al servidor a través de FTP. Además, necesitarás un cliente adecuado como Cyberduck o Filezilla, y habilidades lo suficientemente nítidas. Debido a que trabajaremos con los archivos principales de WordPress, también se recomienda usar un tema secundario.

Una vez que los tenga en su lugar, inicia sesión en tu servidor utilizando las credenciales que se encuentran en tu panel de control de alojamiento. Si no estás seguro de dónde encontrarlos, debes ponerte en contacto con los canales de soporte de tu host. También se pueden encontrar en un correo electrónico que recibiste cuando compraste originalmente el alojamiento.

Paso 2. Sube los archivos del icono de tu sitio a WordPress

Una vez que hayas accedido al servidor, tu cliente FTP debería mostrarte una lista de directorios de tu sitio:

Aquí, toma el archivo de icono de tu sitio y cárgalo tanto en la carpeta de tu tema principal (que se encuentra dentro de wp-content > themes) como en el directorio raíz de tu sitio.

En este punto, casi has terminado. El paso final es codificar el icono de tu sitio en WordPress.

Paso 3. Agrega el código al encabezado de tu sitio web

Para el paso final, tendrás que volver a WordPress, específicamente a la página Editor de temas de apariencia >:

Cuando accedas por primera vez a la página, aparecerá un cuadro de diálogo de advertencia. Los principiantes en esta pantalla tendrán que leer el aviso, antes de hacer clic en Entiendo.

La pantalla adecuada mostrará el código que compone todo tu sitio de WordPress aquí, y todo es editable, así que procede con precaución.

Primero tendrás que verificar que estás trabajando con el tema correcto en el menú desplegable Seleccionar tema para editar:

A continuación, desplázate hacia abajo en la lista Archivos de tema hasta que encuentres la opción Encabezado de tema (encabezado.php). Tendrás que seleccionar esto aquí, que mostrará tu archivo de encabezado.php en el editor.

Busca una línea de código que comience <link rel="shortcut icon" y termine con /favicon.ico" />. Si lo encuentras, reemplázalo con la siguiente línea de código:<link rel="shortcut icon"/favicon.ico" />

<link rel="shortcut icon" href="<?php echo get_stylesheet_directory_uri(); ?>/favicon.ico" />

Si la línea no existe en absoluto, puedes agregar la línea entre tus <head>tags:

Finalmente, haz clic en el botón azul Actualizar archivo y, a continuación, comprueba el icono de tu sitio en el front-end.

En resumen

En pocas palabras, el icono de tu sitio puede ayudar a los usuarios a reconocer tu marca y mejorar tu visibilidad. Se debe considerar cualquier oportunidad para atrapar clientes potenciales; dado el tiempo y los recursos que necesitas para crear un icono de sitio, la decisión de hacerlo es fácil.

En esta publicación, hemos visto cómo crear un icono de sitio para tu sitio web de WordPress utilizando tres métodos. Recapitulemos rápidamente:

  1. Utiliza la funcionalidad incorporada de WordPress para cargar tu icono.
  2. Instala un plugin como Favicon de RealFaviconGenerator.
  3. Muestra el icono de tu sitio usando código.

¿Un ícono de sitio va a ser parte de la estrategia general de marca de tu sitio? ¡Comparte tus opiniones en la sección de comentarios a continuación!

¿Qué opinas?

Escrito por Wombat

Deja una respuesta

Tu dirección de correo electrónico no será publicada.

Cómo agregar cursos a WordPress con LearnPress

¿Qué es un WordPress Slug? Una guía detallada para configurar y editar una de WordPress