4 excelentes formas de agregar un favicon a su sitio web de WordPress

Los pequeños detalles pueden marcar una gran diferencia en la forma en que se percibe su sitio, y agregar un favicon a su sitio de WordPress es uno de esos pequeños detalles. Si este término te hace dibujar un objetivo, Favicon significa tu ícono favorito. Es la pequeña imagen que representa su sitio en el menú, las pestañas favoritas de un navegador y donde sea que esté representada visualmente. Tener un favicon es bueno para el reconocimiento de marca, brindarle a su sitio una identidad visual y generar confianza con su audiencia. Por esta razón, en este artículo, le mostraremos cómo incluir uno en su sitio. Primero hablaremos sobre por qué debe usar un Favicon, cómo crear uno y luego cómo agregar uno al sitio usted.
Tenemos muchas tierras que cubrir, así que nos vamos. ¿Por qué agregar un favicon a su sitio? Como se menciona en la introducción, un favicon es parte de la identidad de su sitio web. Sin embargo, también es bueno para el uso y la experiencia del usuario. ¿Cómo es eso? Hablemos de eso. Comience primero en los navegadores web, un Favicon permite que su sitio sea más reconocido en los navegadores web. No es ningún secreto para nadie que la mayoría de los usuarios de hoy tendrán más de un sitio web abierto en sus navegadores. Con un Favicon, les permite identificar su sitio entre muchas otras pestañas abiertas.

¿Cuál de las pestañas de la imagen de arriba es torque? Solo puede identificarlo después del logotipo. Además, probablemente pueda descubrir algunos de los otros sitios en sus favicones. Sin ellos, debe confiar solo en el comienzo del sitio o el título del artículo. Debe hacer clic en cada pestaña definitivamente no es efectivo. Parece profesional además de ayudar a los usuarios a encontrar la pestaña que están buscando ¿Cuál de esos sitios preferiría hacer una compra? Incluso si es su propio sitio, debe admitir que los demás simplemente se ven más profesionales y confiables. Exactamente estos son los pequeños detalles que los usuarios basan sus decisiones de compra.

La experiencia móvil mejorada hoy en día, proporcionar una buena experiencia móvil es esencial. Además de tener un sitio web receptivo, que también puede significar que los usuarios agregarán su sitio directamente a la pantalla de inicio de su dispositivo. De hecho, es bastante fácil hacer esto. En iOS, acceda a un sitio web a través del navegador de su teléfono y luego haga clic en el botón de distribución en la parte inferior.
Desde aquí, elija Agregar a la pantalla de inicio.

Después de eso, puedes cambiar el nombre.

Cuando haga clic en Agregar, luego aterrizará en su pantalla de inicio.

(Si usted es un usuario de Android, consulte esta guía). Lo importante es que cuando las personas hacen esto, los dispositivos móviles también usarán el Favicon para representar su sitio en la pantalla del teléfono. Esto aumenta aún más su marca y reconocimiento. ¿Son esas razones suficientemente buenas? Así es como creemos. Entonces, ¿cómo se crea un favicon? Hablemos de ello ahora. Crear un favicon para su sitio web de WordPress Jon Hughes ya ha escrito un excelente artículo sobre cómo crear favoritos para los sitios de WordPress. Por esta razón, llegaré al sujeto solo brevemente en un formato de archivo cuando comenzaron, los favicones generalmente se hicieron como archivos ICO. Sus ventajas: soporte universal, la capacidad de almacenar varias versiones de una imagen y soporte para la transparencia. Sin embargo, todos los navegadores de hoy también aceptan archivos modernos, como PNG, JPG, GIF (incluso animado) y SVG (no se pierda nuestro artículo sobre los archivos SVG para WordPress). Como resultado, muchos usan imágenes PNG para Favicon, porque ofrecen un buen soporte, son fáciles de crear y también hacen posible la transparencia. Como ambos formatos tienen ventajas y desventajas, la mejor opción es tener ambos para el máximo soporte. Mientras esté en esto, es posible que incluso desee agregar iconos de gráficos Apple Touch y Windows 8 Tile.

En cuanto al formato, los favicones suelen ser cuadrados, por lo que le recomendamos que respete esto. Al crear uno, el tamaño recomendado es de 512 × 512 píxeles. La mayoría de las personas también usan un fondo transparente, pero esto no es obligatorio. Elija un instrumento. Tenemos más opciones para crear favicons. Los primeros son programas de edición de imágenes como Photoshop y GIMP (este último es gratuito). Sin embargo, hay servicios en línea como Favicon Generator. Este último es especialmente cómodo si ya tiene un logotipo del sitio (que se usa más comúnmente para crear un Favicon) en otro formato de archivo. En este caso, solo tiene que cargarlo en el sitio y recibirá automáticamente favicones en todos los archivos y formatos necesarios. Después de eso, todo lo que tiene que hacer es agregarlos a su sitio (que trataremos a continuación). Para un tutorial con GIMP, consulte el artículo de John. Cómo agregar un favicon a WordPress Hay varias formas de hacer que su sitio de WordPress muestre un favicon. Los pasaremos uno por uno. Método 1: Use el personalizador más conveniente para agregar un favicon a WordPress existe de WordPress 4.3. Desde entonces, si se activa en su tema, simplemente puede agregar favicones por apariencia> Personalización en Backend WordPress. Aquí, haga clic en Identidad del sitio para llegar a esta pantalla.
En esta sección, puede cambiar el título del sitio, la descripción y otras cosas relacionadas con la identidad de su sitio. Esto incluye Favicon. Para cambiarlo, simplemente use el archivo Seleccione el archivo para cargar el archivo Favicon. Si es demasiado grande, WordPress le permitirá cortarlo al tamaño correcto. De lo contrario, simplemente puede guardarlo. Después de eso, debería poder obtener una vista previa del favicon en acción. ¡No olvides guardar y publicar! (Nota: La ubicación exacta de la opción Favicon en el personalizador de WordPress puede ser diferente dependiendo de su tema) Método 2: Use las opciones de temas si la opción de cambio de Favicon no está presente en la configuración personalizada en la configuración del tema. Los temas de estos días vienen con una variedad de opciones y no están estandarizados. Por lo tanto, la única forma de saber si su opción para agregar un Favicon es verificar. Podría ser más fácil que usar uno de los métodos a continuación.
Método 3: Agregue un Favicon a través del complemento Si su tema no tiene una opción integrada, puede usar un complemento. Hay varias opciones:

Favicon de Realfavicongnerator

Generador heroico de favicon
Gerente de Favicon muy simple
Favicon todo en uno
Debido a que John ya ha explicado cómo agregar un favicon a WordPress con Realfavicongnerator, aquí describiremos cómo hacer esto con todo en un Favicon. Esta es también la solución más popular del grupo. Después de instalar el complemento, busque su configuración en Configuración> Todo en un Favicon.
El complemento proporciona soporte para los iconos ICO, GIF, PNG y Apple Touch.También le permite definir diferentes formas para los iconos utilizados en el front-end y la parte trasera.
Todo lo que tiene que hacer es pegar en los caminos del favicon ya presente en la biblioteca de medios de WordPress. Como alternativa, use los botones para cargar los archivos y el complemento insertará automáticamente sus rutas. De todos modos, ¡no olvides guardar tus cambios! A continuación, también tiene la opción de eliminar el brillo reflectante de los iconos de Apple Touch y eliminar un enlace para el desarrollador de complementos en el cuadro Meta WordPress. Listo, fácil. Método 4: Agregue un Favicon por código para versiones más antiguas de WordPress (aunque sabe que debe mantener su sitio web de WordPress actualizado por seguridad), es posible que deba agregar manualmente un Favicon. Si lo hace, le recomiendo que se pruebe primero en un sitio de desarrollo local, para no romper accidentalmente el sitio en vivo. Para hacer esto, primero debe cargar los archivos Favicon en la carpeta de temas. Puede usar un subdosar como activos, sin embargo, debe considerar la ruta del archivo para más adelante. Algunas personas también recomiendan agregar archivos Favicon a la carpeta raíz del sitio. Sin embargo, prefiero mantenerlo limpio. Asegúrese de que no hay otros archivos Favicon presentes allí. Después de cargar, puede agregar el Favicon a WordPress, ya sea agregando código al archivo de encabezado (generalmente Header.php) o Functions.php. Debido a que no todos los temas tienen un archivo Header.php, el siguiente código es para usar en funciones.php. Para usarlo en el archivo de encabezado, simplemente elimine el bit que lo convierte en una función (todo dentro de ). Function add_favicon () {
echo ‘<link rel = "accesivo icon" type = "image/png" href = "'. get_template_directory_uri (). '/sassets/favicon.png"/';}
add_action ('wp_head', 'add_favicon'); Aquí está la versión cuando se usa un archivo ICO: la función add_favicon () {

echo ”;
}
add_action (‘wp_head’, ‘add_favicon’); Reemplace el lado después de href = con la ubicación de los archivos Favicon, ¡debe trabajar para su sitio, no olvide probar! Agregar un favicon a WordPress en favicones cortos es uno de esos pequeños detalles de diseño que marcan una gran diferencia en la percepción de un sitio web. Hago que su sitio se vea más profesionalmente, lo ayuda a destacarse entre las grandes pestañas del navegador, mejora la experiencia del usuario y mejora el reconocimiento de la marca. Arriba, ha aprendido no solo por qué agregar un favicón es beneficioso, sino también cómo crear favoritos, así como cuatro formas diferentes de agregarlos a su sitio de WordPress. Afortunadamente, este proceso se ha vuelto bastante fácil con las versiones más nuevas de la plataforma WordPress. Sin embargo, incluso si su sitio no acepta la opción personalizada, puede continuar usando un complemento, las opciones de tema o puede hacerlo manualmente, como en los viejos tiempos. Independientemente de la forma en que elija, el Favicon tendrá un gran efecto en la percepción de su sitio y eso es al final. ¿Tiene consejos adicionales para crear y agregar favicons a WordPress? ¡Si es así, distribuya en la sección de comentarios a continuación!