En este art\u00edculo, discutiremos los beneficios de usar un favicon en un sitio de WordPress. Luego explicaremos c\u00f3mo crear uno, y te guiaremos a trav\u00e9s de tres opciones f\u00e1ciles para a\u00f1adirlo a tu sitio.<\/p>\n
Finalmente, terminaremos con algunos consejos de favicon de WordPress y las mejores pr\u00e1cticas. \u00a1Empecemos!<\/p>\n
Los beneficios de usar un Favicon de WordPress<\/h2>\n
Si alguna vez has tenido demasiadas pesta\u00f1as abiertas a la vez (\u00a1culpable!), es probable que puedas apreciar la utilidad de un favicon. Un favicon facilita a los usuarios la identificaci\u00f3n r\u00e1pida de su sitio web cuando tienen varias pesta\u00f1as abiertas en su navegador:<\/p>\n Dependiendo del n\u00famero de pesta\u00f1as abiertas, el t\u00edtulo de tu sitio puede no estar siempre visible. Por lo tanto, a\u00f1adir un favicon puede ayudar a mejorar el UX para tus visitantes<\/a>.<\/p>\n Adem\u00e1s de aumentar el reconocimiento de la marca, el uso de un favicon de WordPress tambi\u00e9n puede hacer que su sitio tenga un aspecto m\u00e1s profesional y cre\u00edble. A su vez, esto puede ayudar a aumentar la confianza de los clientes.<\/p>\n Adem\u00e1s, si alguien guarda su sitio web en la pantalla de inicio de su dispositivo m\u00f3vil, su favicon aparecer\u00e1 como el icono. El uso del logo de su marca o de im\u00e1genes similares puede ayudar a que su sitio sea m\u00e1s f\u00e1cil de reconocer, y en general ayuda a crear una est\u00e9tica cohesiva.<\/p>\n\n Si ya tienes un favicon que est\u00e1s listo para usar (la mayor\u00eda de las empresas utilizan su logo o una variante del mismo), no dudes en pasar a la siguiente secci\u00f3n. De lo contrario, veamos c\u00f3mo crear tu imagen de favicon.<\/p>\n En el pasado, ten\u00edas que usar un archivo espec\u00edfico de la ICO para tu favicon. Sin embargo, hoy en d\u00eda, todos los navegadores modernos soportan el uso de archivos ICO, PNG y GIF para tu favicon. JPEG tambi\u00e9n es ampliamente soportado (l\u00e9ase: JPG vs JPEG<\/a>), pero no en todas las versiones de Internet Explorer, lo que lo hace menos ideal para el uso de favicon.<\/p>\n Si est\u00e1s familiarizado con Photoshop, puedes usarlo para crear manualmente un favicon. Sin embargo, a menudo es m\u00e1s f\u00e1cil utilizar una herramienta b\u00e1sica basada en la nube para crear tu conjunto de favicones a partir de una imagen existente.<\/p>\n El RealFaviconGenerator<\/a> (la versi\u00f3n en la nube del plugin que discutiremos m\u00e1s adelante) es una gran opci\u00f3n porque:<\/p>\n Otros generadores de favicon \u00fatiles son:<\/p>\n Para usar el RealFaviconGenerator, comienza subiendo la imagen que quieres usar haciendo clic en Selecciona tu imagen Favicon<\/strong>:<\/p>\n En la siguiente pantalla, puedes configurar detalles espec\u00edficos sobre tu conjunto de favicon (si lo deseas). Cuando hayas terminado, despl\u00e1zate hasta la parte inferior y haz clic en Generar tus faviconos y c\u00f3digo HTML<\/strong>:<\/p>\n En la siguiente p\u00e1gina, haz clic en el paquete Favicon<\/strong> para descargar tus im\u00e1genes favoritas:<\/p>\n Aseg\u00farate de dejar esta p\u00e1gina abierta si planeas a\u00f1adir manualmente el favicon a tu sitio.<\/p>\n Hay algunos consejos de dise\u00f1o y formato que vale la pena mencionar y revisar antes de crear tu favicon. Lo m\u00e1s importante es que el tama\u00f1o recomendado para los faviconos es de 512\u00d7512 p\u00edxeles.<\/p>\n Aunque tu favicon de WordPress ser\u00e1 un cuadrado perfecto, tambi\u00e9n puedes usar una imagen rectangular y recortarla antes o despu\u00e9s de\u00a0subirla a WordPress<\/a>. WordPress viene con una funci\u00f3n de recorte incorporada<\/a>\u00a0para los iconos del sitio si los a\u00f1ades a trav\u00e9s del Personalizador (que te explicaremos en breve).<\/p>\n Adem\u00e1s, es importante tener en cuenta que tu favicon se mostrar\u00e1 como un cuadrado de 16\u00d716 px. Por lo tanto, quieres elegir una imagen que se vea bien una vez que se haya reducido a esas dimensiones. Aunque se mostrar\u00e1 con ese tama\u00f1o, deber\u00eda tener una altura y anchura de al menos 512 px.<\/p>\n Por \u00faltimo, es una idea inteligente revisar algunas de las\u00a0directrices de Google<\/a>\u00a0para crear y usar faviconos. Esto ayudar\u00e1 a garantizar que tu icono se muestre de forma \u00f3ptima en los motores de b\u00fasqueda<\/a> y en las pesta\u00f1as de los navegadores.<\/p>\n Una vez que tengas tu favicon, estar\u00e1s listo para a\u00f1adirlo a tu sitio de WordPress. Echemos un vistazo a tres m\u00e9todos que puedes usar para hacerlo.<\/p>\n A partir de WordPress 4.3, todos los sitios de WordPress incluyen una funci\u00f3n de icono de sitio que facilita la carga y el recorte de una imagen para usarla como favicon. Para la mayor\u00eda de los usuarios, este es el m\u00e9todo m\u00e1s simple y r\u00e1pido para agregar un icono de favicon a WordPress.<\/p>\n Todo lo que necesitas es una imagen de al menos 512\u00d7512 p\u00edxeles. WordPress se encargar\u00e1 del resto del proceso. Para empezar, ve a Apariencia \u2192 Personalizar<\/strong> en tu panel de control de WordPress:<\/p>\n Desde all\u00ed, navega a la pesta\u00f1a de Identidad del Sitio<\/strong>:<\/p>\n A continuaci\u00f3n, mira en la parte inferior para la secci\u00f3n de Icono del Sitio<\/strong>, y haz clic en el bot\u00f3n de Icono del Sitio<\/strong>:<\/p>\n Se abrir\u00e1 la interfaz normal de la\u00a0Biblioteca Multimedia de WordPress<\/a>. Puedes elegir una imagen existente en tu Biblioteca de Medios o subir una nueva. Si has usado RealFaviconGenerator para crear tu favicon, aseg\u00farate de que el paquete que has descargado est\u00e1 descomprimido.<\/p>\n Una vez que tengas una imagen que te guste, haz clic en ella y elige Seleccionar<\/strong> en la esquina inferior derecha:<\/p>\n Si tu imagen no es ya un cuadrado perfecto (por ejemplo, 512\u00d7512 px), WordPress te dar\u00e1 la oportunidad de recortarla en la siguiente pantalla.<\/p>\n Utiliza el cuadro para resaltar la parte de la imagen que deseas utilizar para icono. Puedes ver una vista previa de c\u00f3mo se ver\u00e1 tu imagen recortada en el lado derecho de la interfaz.<\/p>\n Una vez que est\u00e9s contento con el aspecto de las cosas, haz clic en Crop Image<\/strong> para finalizar tu elecci\u00f3n:<\/p>\n \u00a1Eso es! Todo lo que tienes que hacer es seleccionar Guardar y Publicar para<\/strong> hacer tu favicon en vivo. Si alguna vez quieres cambiar tu favicon en el futuro, puedes volver a esta interfaz.<\/p>\n Si prefieres una soluci\u00f3n de plugin a la funcionalidad del icono nativo del sitio de WordPress, puedes usar un popular plugin gratuito llamado\u00a0Favicon de RealFaviconGenerator<\/a> (la herramienta basada en la nube de la que hablamos antes).<\/p>\n Este plugin es tan simple de usar como el personalizador nativo de WordPress. Sin embargo, ofrece opciones de compatibilidad adicionales para varios dispositivos e iconos de aplicaciones. Para usarlo, instala y activa el plugin gratuito<\/a>\u00a0a trav\u00e9s de tu panel\u00a0de control de WordPress<\/a>:<\/p>\n Una vez que actives el plugin, ve a Appearance \u2192 Favicon<\/strong> para crear tu conjunto de favicon. Todo lo que necesitas hacer es seleccionar o subir una imagen de al menos 70\u00d770 px (idealmente 260\u00d7260 px):<\/p>\n Despu\u00e9s de seleccionar tu imagen, haz clic en Generar favicon<\/strong>. Cuando selecciones ese bot\u00f3n, el plugin te llevar\u00e1 fuera de tu sitio de WordPress al sitio web del RealFaviconGenerator.<\/p>\n En la parte inferior del sitio, despl\u00e1zate hacia abajo para seleccionar Generar tus Favicons y c\u00f3digo HTML<\/strong> (ver la secci\u00f3n anterior). Mientras la herramienta funciona, Generador de Favicons Real te enviar\u00e1 de vuelta a tu tablero de WordPress:<\/p>\n Despu\u00e9s de eso, tu favicon estar\u00e1 listo para funcionar. Puedes ver vistas previas de c\u00f3mo se ver\u00e1 en diferentes dispositivos en la interfaz del plugin.<\/p>\n Si prefieres hacer las cosas manualmente, es posible a\u00f1adir un favicon a tu\u00a0sitio de WordPress a trav\u00e9s del Protocolo de Transferencia de Archivos (FTP)<\/a> o del Administrador de Archivos si tu proveedor utiliza cPanel<\/a>.<\/p>\n Si sigues este m\u00e9todo, tambi\u00e9n tendr\u00e1s que crear tu propia imagen de favicon. Puedes hacerlo siguiendo los pasos que hemos descrito anteriormente en este post.<\/p>\n Para esta demostraci\u00f3n utilizaremos el paquete que hemos creado y descargado de RealFaviconGenerator, las instrucciones se aplican aunque hayas utilizado una herramienta diferente para crear tu favicon.<\/p>\n Para a\u00f1adir manualmente un favicon de WordPress a tu sitio web, necesitar\u00e1s:<\/p>\n Los archivos deben estar en la misma carpeta que las carpetas wp-admin<\/i> y wp-content<\/i>. A continuaci\u00f3n, toma el c\u00f3digo que RealFaviconGenerator te proporcion\u00f3 antes, y cualquiera de los dos:<\/p>\n El uso del plugin Insert Headers and Footers es \u00f3ptimo porque asegura que no perder\u00e1s tu favicon si cambias los temas de WordPress<\/a> en el futuro.<\/p>\n Para ello, instala y activa Insertar encabezados y pies de p\u00e1gina. Luego ve a Configuraci\u00f3n \u2192 Insertar encabezados y pies de p\u00e1gina<\/strong>, y pega tu c\u00f3digo en la secci\u00f3n Scripts en Header<\/strong>:<\/p>\n Aseg\u00farate de guardar los cambios. \u00a1Entonces ya est\u00e1 todo hecho!<\/p>\n Si quieres que cada sitio de tu red de sitios m\u00faltiples tenga un favicon \u00fanico, la forma m\u00e1s f\u00e1cil de conseguirlo es usar un plugin de favicon como el que aparece arriba. Si bien es posible editar los archivos de tu tema para habilitar faviconos \u00fanicos para cada sitio de la red, el proceso es significativamente m\u00e1s complicado que el uso de un plugin.<\/p>\n Tambi\u00e9n podr\u00edas considerar usar una Red de Entrega de Contenido (CDN)<\/a> para servir tus im\u00e1genes de favicon. Los tres m\u00e9todos que discutimos en este post almacenan las im\u00e1genes de tu favicon en tu servidor. Sin embargo, puedes optimizar tu sitio a\u00fan m\u00e1s utilizando una CDN para servir esas im\u00e1genes.<\/p>\n Cuando\u00a0instalas Cloudflare<\/a> o un servicio como KeyCDN<\/a>, los navegadores de los visitantes cargar\u00e1n tu favicon desde tu CDN en lugar del servidor de tu sitio. Si est\u00e1s usando un plugin como\u00a0CDN Enabler<\/a>, deber\u00eda reescribir autom\u00e1ticamente tu URL del favicon de WordPress para que funcione con los m\u00e9todos anteriores.<\/p>\n\n Un favicon de WordPress puede ayudar a aumentar el reconocimiento de tu marca y mejorar la UX para los visitantes de tu sitio web. Afortunadamente, tienes m\u00faltiples opciones para elegir que hacen que a\u00f1adir uno sea sencillo.<\/p>\n Los tres m\u00e9todos principales que puedes usar para a\u00f1adir un favicon de WordPress a tu sitio son:<\/p>\n Los favicons son m\u00e1s conocidos como los peque\u00f1os iconos que aparecen junto a los nombres de los sitios web en las pesta\u00f1as del navegador. Sin embargo, …<\/p>\n","protected":false},"author":103,"featured_media":33579,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[564,611],"topic":[1356,1345],"class_list":["post-33564","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-wordpresshelp","tag-wptips","topic-consejos-wordpress","topic-desarrollo-wordpress"],"yoast_head":"\n![\"El](\"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2020\/05\/favicon-kinsta-navegador-chrome.png\")
<\/a>\u00bfC\u00f3mo crear un Favicon de WordPress?<\/h2>\n
\n
\n
![\"Subir](\"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2020\/05\/subir-imagen-fuente-favicon-realfavicongenerator.jpg\")
![\"La](\"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2020\/05\/pantalla-opciones-generador-favicon-realfavicongen.jpg\")
![\"La](\"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2020\/05\/pantalla-descargar-paquete-favicon.jpg\")
Consejos para crear un favicon de WordPress<\/h3>\n
\u00bfC\u00f3mo a\u00f1adir un Favicon de WordPress a tu sitio web? (3 opciones sencillas)<\/h2>\n
1. Usando el Personalizador de WordPress para subir tu Favicon<\/h3>\n
![\"El](\"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2020\/05\/menu-apariencia-wordpress.jpg\")
![\"La](\"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2020\/05\/opcion-identidad-sitio-personalizador-wp.jpg\")
![\"El](\"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2020\/05\/boton-seleccionar-icono-sitio-wp-customizer.jpg\")
![\"Seleccionando](\"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2020\/05\/seleccionando-imagen-favorita-wordpress.jpg\")
![\"Recortar](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2020\/05\/crop-favicon-image-1024x490.png\")
2. Instalando un plugin para a\u00f1adir tu WordPress favicon<\/h3>\n
![\"El](\"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2020\/05\/favicon-realfavicongenerator-wordpress.jpg\")
![\"La](\"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2020\/05\/pantalla-anadir-wordpress-favicon-usando-plugin.jpg\")
![\"La](\"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2020\/05\/pantalla-previsualizar-aparecera-favicon-wordpress.png\")
3. A\u00f1adiendo manualmente tu Favicon a trav\u00e9s de FTP<\/h3>\n
\n
\n
![\"A\u00f1adiendo](\"https:\/\/kinqsta.com\/es\/wp-content\/uploads\/sites\/8\/2020\/05\/anadiendo-codigo-favicon-usando-plugin-insert-headers.jpg\")
Consejos adicionales para usar Favicons de WordPress<\/h2>\n
Resumen<\/h2>\n
\n