Cómo agregar Favicon en su sitio web de WordPress

Un “favicon” es la pequeña imagen que acompaña a un sitio web en su navegador. Cuando agrega algo a sus favoritos o marcadores, este pequeño icono es el gráfico que se utiliza. De ahí su nombre: “favorito” más “icono” es igual a “favicon”.

Si un sitio web no tiene uno, se usa una página en blanco u otra imagen predeterminada.

En muchos sentidos, el favicon es como tener un logo. Es una imagen que mucha gente conecta con una marca o sitio web. Por ejemplo, con solo mirar la imagen pequeña puedo saber qué ícono lleva a qué sitio web en mi barra de tareas en Chrome... no se necesitan palabras.

En este tutorial, le mostraré cómo agregar el favicon a su sitio web de WordPress.

Creando el Favicon

Un favicon es más que una imagen. No puede simplemente cargar cualquier archivo JPG o PNG y esperar que los navegadores noten la diferencia. Los Favicons son en realidad archivos .ICO. Debido a esto, necesita una aplicación que cree estos tipos de archivos específicos.

Usando Favicon.cc

Favicon.cc es una herramienta gratuita basada en la web que le permite crear favicons en dimensiones de 16 × 16 píxeles. Es un sistema gratuito que le brinda control de color de píxeles individuales, así como la capacidad de cargar y convertir gráficos existentes. no requiere un inicio de sesión o registro y es bastante simple de usar para un ícono rápido.

Uso de Favicon y generador de aplicaciones

Una de las cosas que distingue a Favicon & App Generator de los demás es que puede descargar más que solo el archivo ICO. De hecho, esta aplicación basada en la web le brinda todos los archivos de imagen necesarios para varios sistemas. Por ejemplo, puede descargar las versiones de aplicaciones de Android, iOS y Microsoft del gráfico en un solo archivo zip, todo a la vez.

usando photoshop

Es posible crear archivos ICO en Photoshop con el uso de un complemento. La herramienta simplemente le brinda la posibilidad de guardar archivos ICO para usarlos en el desarrollo web. Si tiene el software, puede valer la pena instalar la adición y crear la suya propia.

Agregar el Favicon a WordPress

Agregar un favicon a WordPress es un proceso rápido y fácil en la mayoría de los casos. De hecho, es posible que no necesite hacer nada más que cargar una imagen. En algunos casos, todo lo que necesita es un archivo JPG o PNG y WordPress hará el resto.

Usar un tema

Muchos temas disponibles en WordPress le brindan la posibilidad de crear favicons a partir de las imágenes de logotipo cargadas. Como usar el logotipo como una extensión de la marca, esto elimina mucho trabajo de preparación. Por ejemplo, el tema " ColorMag " tomará su logotipo y lo convertirá automáticamente en el favicon.

Deberá instalar temas de WordPress que ofrezcan esta capacidad.

Para encontrar temas que acentúen el uso de favicon, haga clic en la función Apariencia en WordPress. Su lista de temas será la pantalla predeterminada.

Haga clic en el botón "Agregar nuevo" en la parte superior.

Ingrese "favicon" en la barra de búsqueda y busque un tema que le guste. Esto le mostrará una lista de cualquier tema que incluya la palabra "favicon" en la descripción. Desafortunadamente, es posible que esto no incluya todos los temas que tienen la función favicon. Algunos desarrolladores no incluyen las descripciones más detalladas de sus temas.

Una vez que encuentre uno que le guste, instale y active el tema pasando el mouse sobre él.

La mayoría de los temas que le dan acceso a logotipos y favicons lo harán a través del Personalizador de WordPress. Para acceder a esta herramienta, haga clic en el botón "Personalizar" en su tema activado.

En el Personalizador, desea encontrar cualquier función relacionada con el logotipo o el favicon. Debido a que cada desarrollador es diferente, es posible que deba investigar un poco para encontrarlo. En el tema de ColorMag, por ejemplo, el logotipo y el icono de control están dentro de "Identidad del sitio".

Usar un complemento

Una de las razones por las que WordPress es tan popular es por su versatilidad. Usando complementos, puede crear casi cualquier tipo de sitio web que desee. En este caso, estoy viendo el complemento " Favicon by RealFaviconGenerator" .

Esta herramienta ofrece una amplia gama de opciones para crear imágenes icónicas. También tiene en cuenta los diferentes tipos de hardware móvil en múltiples tipos de navegadores y aplicaciones. Es una herramienta flexible que optimiza lo que el favicon puede hacer por su sitio web.

Vaya al área de complementos de WordPress y haga clic en "Agregar nuevo".

Busque "Favicon de RealFaviconGenerator". Haga clic para instalar y luego active el complemento.

Ve al área de Apariencia y haz clic en "Favicon".

En esta pantalla, puede usar cualquier imagen que tenga al menos 70 × 70 píxeles para crear favicons para todos los hardware y navegadores más populares. Es posible que desee utilizar la recomendación de 260 × 260, ya que tiene más posibilidades de conservar los detalles cuando se reduce a varios tamaños.

Aquí es donde le gustaría cargar su logotipo si tiene una o cualquier otra imagen que represente su sitio o negocio.

Este complemento es solo uno de muchos. Puede ser mucho más fácil usar esta técnica en lugar de buscar un tema perfecto que tenga la opción de logotipo/icono. Complementos como este funcionan con cualquier tema disponible.

Agregar el icono manualmente

Agregar el favicon manualmente es un poco más complicado que usar temas o complementos. Requiere subir la imagen directamente a su sitio web y editar un poco de código.

Para hacer esto, inicie sesión en el directorio raíz de su sitio web desde el Administrador de archivos en cPanel .

Haga clic en el botón "Cargar" y agregue su archivo favicon.ico al directorio.

Ahora, deberá insertar esta línea de código en el encabezado de su sitio web:

[ht_message mstyle=”info” title=”” show_icon=”” id=”” class=”” style=”” ]<link rel =”icono” tipo =”imagen/x-icono” href=”/favicon.ico”>[/ht_message]

Puede hacerlo desde el Editor en WordPress o editando sus archivos de temas dentro del Administrador de archivos. Para este tutorial, lo mantendré simple y solo usaré WordPress para agregar el código.

En este ejemplo, estoy usando el complemento " Insertar encabezados y pies de página ". Esto le da acceso para agregar elementos a las áreas de encabezado y pie de página de su sitio web sin buscar en directorios o archivos de temas. Es un complemento fácil de usar que puede instalar de forma gratuita.

¿Por qué es importante el favicon?

Como cualquier marca, una imagen identificativa puede contribuir en gran medida al reconocimiento del cliente. Incluso los logotipos más simples conectan a las personas con ciertas expectativas de productos y servicios. El favicon es una extensión de esa conexión, especialmente en un mundo impulsado por Internet como este.

Muchas personas, como yo, usamos íconos en lugar de texto para organizar la barra de marcadores en Google Chrome. De hecho, también hago esto en Firefox. Esencialmente, elimino el texto que viene con el favicon y sigo únicamente la imagen cuando necesito algo. Esto me permite almacenar más en la barra de favoritos que son inmediatamente visibles.

Sin el favicon, hace que sea más difícil para los usuarios reconocer o confiar en una marca. Sería como tener un negocio sin logo. Como los estudios muestran que las personas responden mejor a los estímulos visuales, solo tiene sentido agregar un favicon para atraer a las masas.

Crear una apariencia única para el sitio web

El favicon es solo otra forma de crear un sitio web único de WordPress. Este pequeño gráfico es más vital para el marketing y la marca de lo que creen algunos propietarios de sitios. Haga que su dominio sea realmente identificable y ofrezca una apariencia que diferencie su contenido de la competencia. Incluso la imagen más pequeña puede marcar una gran diferencia en el reconocimiento y la marca.

¿Qué ha agregado a WordPress para que su sitio web se destaque? ¿Tiene un tema favorito que facilita la adición de favicons y logotipos?