{"id":2714,"date":"2019-08-20T21:03:44","date_gmt":"2019-08-20T19:03:44","guid":{"rendered":"https:\/\/www.hostingtg.com\/blog\/?p=2714"},"modified":"2025-02-06T10:19:03","modified_gmt":"2025-02-06T09:19:03","slug":"favicon","status":"publish","type":"post","link":"https:\/\/www.hostingtg.com\/blog\/favicon\/","title":{"rendered":"Favicon: \u00bfc\u00f3mo utilizarlo en tu web?"},"content":{"rendered":"

En el mundo de la web, los elementos que parecen no funcionales resultan imprescindibles a la hora de posicionar una p\u00e1gina, como el diminuto icono alojado en un rinc\u00f3n de la pesta\u00f1a de nuestro navegador denominado favicon<\/strong>.<\/p>\n

Quiz\u00e1s este es el modo correcto de referirnos al \u201cicono favorito\u201d que adorna nuestra pantalla y que favorece nuestros motores de b\u00fasqueda e historial de navegaci\u00f3n, casi inexistente pero necesario para aumentar la presencia en l\u00ednea de una p\u00e1gina de internet. \u00bfPero cu\u00e1les son los t\u00e9rminos correctos para definir esta herramienta?<\/p>\n\n

\u00bfQu\u00e9 es Favicon?<\/strong><\/h2>\n

El favicon <\/strong>es un peque\u00f1o icono que se encuentra ubicado justamente al lado del t\u00edtulo de un portal web<\/strong>, el mismo nos ayuda a identificar el sitio web que estamos visitando, sus dimensiones var\u00edan, sin embargo, es com\u00fan observar los iconos con unas medidas de (16 x 16 p\u00edxels), esto depender\u00e1 del gusto del creador del portal.<\/p>\n

M\u00e1s all\u00e1 de lograr una identificaci\u00f3n r\u00e1pida de un portal, tambi\u00e9n ayuda al propietario del portal a mostrar una imagen corporativa, de esta manera tendr\u00e1 m\u00e1s presencia en la mente de sus usuarios y lograr\u00e1 simpat\u00eda con el mismo. \u00bfQu\u00e9 est\u00e1s esperando para obtener uno?<\/p>\n

\u00bfC\u00f3mo generar un favicon?<\/strong><\/h2>\n

Para generar un \u201cIcono favorito\u201d debes definir en primer lugar que es lo que quieres, puedes utilizar el editor visual  <\/strong>el cual te ayudar\u00e1 al m\u00e1ximo, debido a que el generador te mostrar\u00e1 varias opciones, estilos y colores que podr\u00e1s personalizar, adapt\u00e1ndolo  as\u00ed a tus necesidades y gustos.<\/p>\n

Nosotros te recomendamos 3 formas de editarlo:<\/p>\n

Genfavicon: Un excelente editor online con el que con 3 simples pasos podr\u00e1s crearlo y previsualizarlo.<\/p>\n

FaviconCC: El el caso de este editor, permite incluso editar la imagen subida, por lo que podr\u00e1s realizar peque\u00f1os retoques y previsualizarlo para que quede perfecto.<\/p>\n

Favicon-generator: Este es posiblemente el m\u00e1s sencillo, eliges el logo que quieras subir, pulsas en subir y te genera el icono, as\u00ed de simple, pero, tiene una parte interesante un poco m\u00e1s abajo, una galer\u00eda nada despreciable de iconos para utilizar en tu web.<\/p>\n

El editor de genfaicon posee un generador de letras, el cual te permitir\u00e1 elegir la tipograf\u00eda de tu preferencia y el tama\u00f1o, asimismo podr\u00e1s cargar una imagen si as\u00ed lo deseas.<\/p>\n

\u00bf C\u00f3mo poner un favicon en WordPress? <\/strong><\/h2>\n

Para empezar debes de cerciorarte que la versi\u00f3n de tu WordPress<\/a> permita a\u00f1adir un favicon, luego inicia la sesi\u00f3n de tu portal web<\/strong>, posteriormente dale clic en el \u00e1rea de administraci\u00f3n de WordPress<\/a>, luego debes clicar \u201capariencia\u201d – \u201cpersonalizar\u201d – \u201csitio\u201d y por \u00faltimo \u201cicono del sitio\u201d justo all\u00ed cargue la imagen de su preferencia desde su computador y listo.<\/p>\n

\u00bfEs compatible con mi navegador?<\/strong><\/h2>\n

Es una pregunta muy usual entre los usuarios, sin embargo, es un punto que debemos de considerar debido a que no todos los navegadores son compatibles con los iconos de favoritos, por ejemplo, el Explorer que necesita un enlace, el cual debe contener el c\u00f3digo del icono.<\/p>\n

Sin embargo, los favicons<\/strong> con el creador de genfavicon.com<\/a> son compatibles con todo los navegadores, entre ellos destacamos Firefox, Google Chrome, Microsoft Edge, Opera y Safari, los cuales son los m\u00e1s comunes entre los usuarios.<\/p>\n

Si utilizas un generador de favicon <\/strong>puedes subir archivos jpg y png sin ning\u00fan inconveniente, luego que crees el favicon puedes elegir el formato que quieres utilizar, pero \u00bfpuedo descargarlo gratuitamente?<\/strong> la respuesta es s\u00ed \u00a1no lo dudes m\u00e1s y cr\u00e9alo para descargarlo!<\/p>\n

 <\/p>\n

\u00bfCuales son los formas y tama\u00f1os m\u00e1s comunes?<\/strong><\/h3>\n

Entre los formatos y tama\u00f1os m\u00e1s comunes de un favicon destacamos:<\/p>\n

(32×32 p\u00edxeles), (96×96 p\u00edxeles), (256×256 p\u00edxeles) y por \u00faltimo y m\u00e1s com\u00fan (16×16 p\u00edxeles). Recordemos que puedes elegir el formato que deseas utilizar para cada archivo.<\/p>\n

 <\/p>\n

\u00bfExisten plantillas  predeterminadaS que pueda utilizar?<\/strong><\/h3>\n

Para la sorpresa de todos la respuesta es s\u00ed, existen sitios donde encontrar gran cantidad de estos iconos, lo ideal logicamente es utilizar nuestro propio logo, mediante el generador editarlo para que quede a corde al tama\u00f1o y listo.<\/p>\n

Pero si lo que quieres, es utilizar una plantilla predeterminada, te voy a indicar varios sitios:<\/p>\n

Iconfinder: Para m\u00ed, una de las mejores sin lugar a dudas, mas de 3 millones y medio de iconos bastante bien clasificados, solo tienes que buscar y te saldr\u00e1n montones en diferentes tama\u00f1os listos para usar.<\/p>\n

IconShock<\/a>: En este portal vamos a encontrar solo una gran cantidad de iconos gratis, sino tambi\u00e9n de iconos premium de pago, tiene planes de suscripci\u00f3n aun que con la gran cantidad de im\u00e1genes que pod\u00e9is descargar de forma gratuita posiblemente no necesit\u00e9is recurrir a una suscripci\u00f3n.<\/p>\n

Flaticon: Esta tambi\u00e9n tiene una gran cantidad de iconos gratuitos, pod\u00e9is filtrar entre monocromo y color, si quer\u00e9is recurrir a opciones como categor\u00edas o otros filtros necesitareis una suscripci\u00f3n, aun que es un caso muy parecido al anterior.<\/p>\n

S\u00f3lo tienes que cargar en la herramienta el logo de tu portal web, posteriormente no olvides editarlo en genfavicon, tambi\u00e9n puedes agregarle textos personalizados con la tipograf\u00eda de tu preferencia.<\/p>\n

\u00a1Utiliza un favicon en tu portal web y disfruta de los beneficios!<\/p>\n

Recuerda que puedes compartir esta publicaci\u00f3n y dejar tus comentarios.<\/p>\n","protected":false},"excerpt":{"rendered":"

En el mundo de la web, los elementos que parecen no funcionales resultan imprescindibles a la hora de posicionar una p\u00e1gina, como el diminuto icono alojado en un rinc\u00f3n de la pesta\u00f1a de nuestro navegador denominado favicon. Quiz\u00e1s este es el modo correcto de referirnos al \u201cicono favorito\u201d que adorna nuestra pantalla y que favorece […]<\/p>\n","protected":false},"author":1,"featured_media":8335,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_aifi_custom_prompt":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[192],"tags":[499,501,500],"class_list":["post-2714","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutoriales","tag-generador-de-favicon","tag-generador-iconos","tag-icono-url"],"_links":{"self":[{"href":"https:\/\/www.hostingtg.com\/blog\/wp-json\/wp\/v2\/posts\/2714","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostingtg.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostingtg.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostingtg.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostingtg.com\/blog\/wp-json\/wp\/v2\/comments?post=2714"}],"version-history":[{"count":14,"href":"https:\/\/www.hostingtg.com\/blog\/wp-json\/wp\/v2\/posts\/2714\/revisions"}],"predecessor-version":[{"id":8688,"href":"https:\/\/www.hostingtg.com\/blog\/wp-json\/wp\/v2\/posts\/2714\/revisions\/8688"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.hostingtg.com\/blog\/wp-json\/wp\/v2\/media\/8335"}],"wp:attachment":[{"href":"https:\/\/www.hostingtg.com\/blog\/wp-json\/wp\/v2\/media?parent=2714"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostingtg.com\/blog\/wp-json\/wp\/v2\/categories?post=2714"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostingtg.com\/blog\/wp-json\/wp\/v2\/tags?post=2714"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}