Los expertos en branding hablarán mucho sobre la visibilidad. En otras palabras, los elementos de tu sitio web que están dirigidos a los usuarios prácticamente siempre deben reflejar tu marca. Sin embargo, un proyecto que quizás no haya considerado es crear un ícono de sitio para su sitio de WordPress.
La buena noticia es que diseñar y cargar el ícono de su sitio en WordPress es más fácil que nunca. De hecho, hay muchas formas de hacer el trabajo, independientemente del conocimiento, el tiempo o el presupuesto.
En esta publicación, veremos cómo crear un ícono de sitio para su sitio. Pero primero, explicaremos por qué debería considerar crear un ícono de sitio web, junto con algunas consideraciones a considerar.
¿Qué es un ícono de sitio (y por qué necesita uno)?
Probablemente haya visto un ícono de sitio, incluso si no está seguro de qué es. De hecho, ya ha visto uno: consulte la esquina superior izquierda de la ventana de su navegador:
Básicamente, es un pequeño ícono que aparece junto a la pestaña de una página en un navegador o en las páginas de resultados del motor de búsqueda (SERP):
Piense en ello como el equivalente digital de una pequeña bola que conecta a la antena de un automóvil. Sin embargo, existe una diferencia entre el ícono del sitio y otras 5000 bolas de colores en el estacionamiento de Walmart: puede crear un ícono de sitio específico para su marca.
Cuando se trata de la marca de su sitio web, las primeras impresiones son importantes. Además, los consumidores lo quieren qué tan consistente es la marca como marcador de confianza. Un ícono de sitio puede ayudarlo a lograr ambos objetivos.
Es cierto que el ícono de su sitio web no tendrá todo el peso de su estrategia de marca. Sin embargo, la visibilidad adicional que brinda, especialmente si un cliente potencial está navegando por su sitio, puede tener un impacto positivo en su seguimiento.
Cómo crear un icono de sitio para su sitio de WordPress (en 3 pasos)
Esta tarea consta de dos pasos. Primero, cree un ícono de sitio. Luego, debe cargarlo en su sitio de WordPress. Estos son los tres pasos que puede seguir para crear un icono de sitio para su sitio de WordPress:
A continuación, le mostraremos tres formas de cargar su icono:
¡Hay mucho por lo que pasar, así que comencemos!
Paso 1: elija el tamaño de icono adecuado para su sitio web
Primero, es el tamaño del icono del sitio. Tendría razón si pensara que estos archivos serían pequeños. Sin embargo, aunque los tamaños son pequeños, hay una comprensión de las diferentes dimensiones. se puede plegar. Esto se debe a que las diferentes plataformas tienen diferentes requisitos para los tamaños de los íconos de sitios web (o «favicon»).
En general, la mayoría de los navegadores admiten 32 x 32 píxeles .y qué un archivo que ha sido el estándar durante décadas. Sin embargo, en la práctica, querrá usar 512 x 512 píxeles .png expediente. La razón es que cubre prácticamente todos los aspectos básicos, desde el tamaño predeterminado del icono del sitio web de Chromehasta el requisito mínimo.
Por cierto, esta también es una recomendación clara en el backend de WordPress (más sobre eso más adelante). Ahora que ha averiguado su talla, es hora de pensar en su diseño.
Paso 2: asegúrese de utilizar prácticas óptimas al diseñar el ícono de su sitio web
La tentación de diseñar íconos de sitios web es simplemente usar una versión reducida del logotipo de su sitio web y nombrarlo ese día. Sin embargo, dados nuestros consejos para una marca óptima, debe dedicar algún tiempo a trabajar en un ícono de sitio personalizado en lugar de optar por la opción fácil.
Además, la «sala» virtual que tiene significa que es posible que no pueda expresar su marca con un logotipo simple. Por lo tanto, al crear el ícono de su sitio, considere lo siguiente:
- Reduce tu marca a uno o dos colores simples que garantizan la coherencia y la visibilidad.
- Reduzca su logotipo a lo esencial y conviértalo en el tema del ícono de su sitio web.
- Utilice el contraste para centrarse en los aspectos principales del icono de su sitio web.
Para ofrecer un ejemplo real de ellos, eche un vistazo al ícono del sitio Recursos WP nuevamente. Utiliza azul y blanco para un alto contraste y solo incluye el logotipo del sitio web.
Eso es todo lo que necesitas. Brinda visibilidad, coherencia con otros elementos de la marca y garantiza que el marcador se note en las SERP y en las pantallas del navegador.
Paso 3: elige la herramienta adecuada para crear el ícono de tu sitio web
El último paso después de ordenar el tamaño y el diseño del ícono del sitio es crearlo. Como era de esperar, hay muchas formas de crear su ícono y si tiene la herramienta como canvaserá perfecto.
Favicon.io también es fantástico para crear rápidamente un ícono de sitio web de solo texto y descargar todos los tamaños que necesita:
Recuerde que debe guardar el ícono de su sitio web como opaco de 8 o 24 bits .PNG archivo 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 generales.
3 formas de enviar el ícono de su sitio web a WordPress
Al igual que con WordPress, hay muchas formas de enviar el ícono de su sitio web. Cubriremos los casos de uso y la idoneidad a continuación, aunque puede investigar cualquiera que se adapte a sus necesidades.
1. Use la funcionalidad incorporada de WordPress
La buena noticia para la mayoría de los usuarios de WordPress es que la plataforma ofrece una función de carga de íconos del sitio rápida y simple.
Si está buscando un enfoque sin sentido para una tarea, este es el método para usted.
Paso 1. Accede a la pantalla de identidad del sitio en WordPress
Primero, inicie sesión en WordPress. Desde el tablero, querrás ir al panel de opciones del tema. Su tema premium puede tener opciones dedicadas, aunque para los temas predeterminados de WordPress estará en Apariencia> Personalizar> Identidad del sitio pantalla del configurador:
Una vez que esté aquí, puede continuar con el siguiente paso.
Paso 2. Seleccione el ícono de su sitio web
Entonces echa un vistazo a identidad del sitio sección para Seleccione el icono del sitio Ventana de diálogo:
Aquí, haga clic y cargue como de costumbre para las cargas de medios de WordPress. Asegúrese de establecer un «texto alternativo» adecuado para el icono de su sitio para mejorar la accesibilidad.
Paso 3. Verifique el ícono de su sitio web en la interfaz
Finalmente, eche un vistazo a la interfaz de su sitio web para ver si el icono del sitio web se ha cargado correctamente. Notarás que WordPress ofrece una gran vista previa del ícono del sitio actual en la maqueta del navegador:
Sin embargo, aún debe echar un vistazo a cómo se representa el ícono en el navegador, principalmente porque mostrará cómo se ve el ícono para otros usuarios, un factor más importante.
2. Instale el complemento de WordPress apropiado
Para muchos usuarios, instalar un plugin de WordPress es la solución a seguir. Sin embargo, teniendo en cuenta que prácticamente todos los sitios de WordPress tienen opciones de personalización integradas para esto, un complemento puede ser excesivo.
Recomendamos este enfoque si tiene requisitos específicos para el ícono de un sitio o si no puede enviarlo usando las opciones de tema.
Paso 1. Seleccione el enchufe apropiado
El título de este paso es un poco engañoso ya que solo recomendamos un complemento: Favicon de RealFaviconGenerator:
Esta es básicamente la versión plug-in del programa. sitio web populary recarga la funcionalidad incorporada de WordPress. Genera todos los íconos de sitio requeridos a partir de una imagen y los almacena en la Biblioteca de medios.
Una vez … instalado y activado enchufe, casi hecho.
Paso 2. Cargue el ícono de su sitio en tamaño completo
Cuando el plugin esté activado, notarás el nuevo Apariencia> Favicon panel en el tablero de WordPress. El encabezado aquí muestra un conjunto sencillo de opciones:
Si bien la redacción es un poco confusa, básicamente está cargando (o seleccionando una imagen) Mediateca. Asegúrese de agregar texto alternativo aquí si aún no lo ha hecho.
Para iniciar el proceso de carga, simplemente haga clic en azul Generar un favicon y ve al último paso.
Paso 3. Descarga íconos para tu sitio web
Una vez que el complemento comience a generar íconos para su sitio web, notará que cambia a la versión de la aplicación web del sitio web del desarrollador. Aquí encontrará todos los iconos de sitios diferentes para diferentes plataformas y dimensiones:
Tenga en cuenta que aquí puede seleccionar opciones adicionales específicas de la plataforma relacionadas con el diseño y la presentación del ícono de su sitio web:
Sin embargo, cuando esté listo, haga clic en Genera tus favicons y código HTMLmomento en el que el enchufe comenzará a funcionar mágicamente.
Finalmente, volverá a su panel de control de WordPress, donde verá una vista previa de los íconos de su sitio web en diferentes maquetas:
El ícono de su sitio ahora debería estar listo para usar, nuevamente, para asegurarse de que desea verificar la interfaz.
3. Trabajar con código para mostrar el ícono del sitio
El enfoque final que consideraremos probablemente esté desactualizado para los usuarios promedio al considerar alternativas. Sin embargo, por código La visualización del ícono del sitio web es perfecta para requisitos muy específicos o incluso si está creando un tema personalizado.
Paso 1. Acceda al servidor del sitio utilizando el Protocolo de transferencia de archivos (FTP)
Necesitarás este enfoque acceso al servidor vía FTP. Además, necesitará un cliente adecuado como pato cibernético o Filezillay habilidades lo suficientemente agudas. Como trabajaremos con archivos principales de WordPress, también se recomienda utilizar un tema secundario.
Una vez hecho esto, inicie sesión en su servidor utilizando las credenciales que se encuentran en su panel de control de alojamiento. Si no está seguro de dónde encontrarlos, comuníquese con los canales de soporte de su anfitrión. También se pueden encontrar en el correo electrónico que recibió con su compra de alojamiento original.
Paso 2. Cargue los archivos de iconos de su sitio en WordPress
Después de acceder al servidor, el cliente FTP debe enumerar los directorios del sitio:
Aquí, tome el archivo del icono del sitio y cárguelo en la carpeta raíz del tema (ubicada en wp-content> temas) y el directorio raíz del sitio.
Ya casi has terminado en este punto. El último paso es codificar el ícono del sitio en WordPress.
Paso 3. Agrega el código al encabezado de tu sitio web
El último paso será volver a WordPress, concretamente a Apariencia> Editor de temas lado:
La primera vez que ingrese al sitio web, aparecerá un cuadro de diálogo de advertencia. Los principiantes en esta pantalla querrán leer la información antes de hacer clic ya veo.
La pantalla real mostrará el código que conforma todo su sitio de WordPress aquí, y todo es editable, así que proceda con cuidado.
Primero, verifique que esté trabajando con el tema correcto en Seleccione un tema para editar Menú desplegable:
Luego desplácese hacia abajo Archivos de temas escribe hasta que lo encuentres Encabezado del tema (header.php) opción. Selecciónalo aquí y se mostrará el tuyo encabezado.php archivo en el editor.
Deberá buscar la línea de código que comienza con <link rel="shortcut icon" y termina con /favicon.ico" />. Si lo encuentra, reemplácelo con la siguiente línea de código:
<link rel="shortcut icon" href="<?php echo get_stylesheet_directory_uri(); ?>/favicon.ico" />
Si la línea no existe en absoluto, puede agregar una línea entre la suya
Finalmente, haga clic en azul Actualizar el archivo y luego verifique el icono del sitio en la interfaz de usuario.
En resumen
En resumen, el ícono de su sitio web puede ayudar a los usuarios a reconocer su marca y mejorar su visibilidad. Considere todas las oportunidades para atrapar a los clientes potenciales; teniendo en cuenta el tiempo y los recursos necesarios para crear un icono de sitio web, es una decisión fácil.
En esta publicación, analizamos cómo crear un ícono de sitio para su sitio de WordPress utilizando tres métodos. Resumamos rápidamente:
- Use la función incorporada de WordPress para cargar su icono.
- Instale un enchufe como Favicon de RealFaviconGenerator.
- Muestre el icono de su sitio web con código.
¿El ícono del sitio web será parte de la estrategia general de marca de su sitio web? ¡Comparta sus pensamientos en la sección de comentarios a continuación!
