En cualquier momento del día tengo unas 20 pestañas abiertas en Chrome. Lo que me ayuda a realizar un seguimiento de qué pestañas son los pequeños iconos que se muestran a continuación.
Sé que mis Documentos de Google son tarjetas de notas azules. Mi tablero de Trello es una pestaña con un mini tablero de Trello. Los blogs de HubSpot a los que me refiero son pestañas con engranajes, etc.
Estos iconos se conocen como favicons. No solo pueden aumentar su visibilidad en un navegador lleno de pestañas abiertas, sino también fortalecer la identidad de su marca.
Echemos un vistazo más de cerca a los favicons a continuación. A continuación, veremos cómo crear dicho archivo usando el generador de favicon y agregarlo a su sitio web usando HTML.
¿Qué es un favicon?
Un favicon es un icono de navegador que representa una marca o un sitio web. Los favoritos, que se muestran con mayor frecuencia junto al título de un sitio web en las pestañas del navegador, también se pueden encontrar en las barras de direcciones, las listas de marcadores, las páginas de resultados de búsqueda, las barras de herramientas, el historial del navegador y otros lugares en la web.
Google tiene uno de los favicon más reconocibles. Puede ver la G multicolor en la barra de direcciones de mi navegador a continuación.
También puede ver favicons para Gmail, Google Sheets, HubSpot Wiki, Hemingway Editor y más en mi lista de favoritos.
Los favicons incluso aparecen en Resultados de la búsqueda móvil de Google Ahora. A continuación puede ver los resultados de mi última búsqueda: «con qué frecuencia debo regar las suculentas».
¿Por qué importan los favicons?
Los Favicons no solo afectan la experiencia del usuario y el conocimiento de la marca, sino que también pueden hacer que su sitio web se vea más profesional.
Tenga en cuenta en el SERP móvil que los sitios web para jardín de la alegría y Bulbos fáciles de cultivar tienen íconos de flores pero una página para Primavera jugosa tiene un globo gris. No tiene mucho sentido para un sitio suculento, ¿verdad? Esto se debe a que el globo terráqueo es el favicon predeterminado de Google Chrome establecido para los sitios que no tienen un favicon personalizado.
Si navego rápidamente por la página de resultados, probablemente optaré por investigar jardín de la alegría y Bulbos fáciles de cultivar final Primavera jugosa debido a algunas razones. No solo aparecen primero en el SERP, sino que sus favicons, URL, títulos de página y metadescripciones indican que todos son sitios web específicos de plantas que respondieron a mi pregunta.
Ahora imagine estos tres sitios en las pestañas de su navegador en su escritorio. Sería mucho más fácil recordar favicons personalizados jardín de la alegría y Bulbos fáciles de cultivar que el favicon predeterminado Primavera jugosa. En un mar de pestañas abiertas, es más probable que vuelva a las pestañas con favicons personalizados y pase más tiempo en estos sitios.
Finalmente, digamos que hago clic en cada uno de estos sitios. Durante la visita jardín de la alegría y Bulbos fáciles de cultivar, noté de inmediato que los favicons personalizados se basan en el logotipo del sitio web. El colorido logotipo de este último se muestra a continuación. Reconocerás el tulipán como su favicon.
Esto ayuda a fortalecer su identidad de marca y hacer que su sitio web sea más memorable. Durante la visita Primavera jugosa, por otro lado, esta es la primera vez que veré su logo. Podrían mejorar la coherencia de la marca haciendo coincidir su logotipo y su favicon.
¿De qué tamaño es un favicon?
El tamaño óptimo de favicon es de 16×16 píxeles. Así es como se ven en las pestañas del navegador, las barras de direcciones y las listas de marcadores. Sin embargo, es mejor si crea un favicon en varios tamaños. De esta manera, verá versiones escaladas correctamente en pantallas más grandes, no una versión alargada de 16×16.
A continuación se muestran algunos de los tamaños de favicon más comunes y sus propósitos únicos.
- 16×16: Tamaño del favicon del navegador.
- 32×32: tamaño de los iconos de acceso directo en la barra de tareas.
- 96×96: tamaño de los iconos de acceso directo en el escritorio.
- 180×180: El tamaño de los iconos táctiles de Apple.
- 300×300: Tamaño requerido por Squarespace.
- 512×512: Tamaño requerido por WordPress.
Ahora que entendemos qué es un favicon, cuál es su propósito y cuál es el otro tamaño, echemos un vistazo a cómo crear uno.
Cómo hacer un favicon
Desea que su favicon sea reconocible y coherente con la identidad de su marca. Entonces, en lugar de comenzar desde cero, debe basarlo en el logotipo de su empresa.
Si no tienes un logo, empieza por ahí. Puede contratar a un diseñador para que cree uno para usted, o puede usar herramientas como Logotipo claro diseñe un logotipo de alta calidad por una fracción del costo.
Una vez que esté satisfecho con su logotipo, puede comenzar a crear un favicon. Desafortunadamente, no es tan simple como comprimir su logotipo en un cuadrado de 16×16 y recuperarlo en el transcurso del día. Por ejemplo, su logotipo puede contener texto que no será legible cuando se reduzca la escala.
Es por eso que desea tomar la parte más reconocible de su logotipo y convertirla en un favicon. Bulbos fáciles de cultivar hizo exactamente eso tomando un tulipán de su logo y convirtiéndolo en un favicon.
Es posible que deba usar un software de edición de íconos como Iconedit2. Con la mayoría de los programas de edición de íconos, puede agregar varios tamaños a un solo archivo de ícono. Una vez que esté satisfecho con la imagen y los tamaños del favicon, puede guardar el archivo en formato PNG o JPG y luego subirlo al generador de favicon.
Sin embargo, para cambios menores, como recortar una imagen, puede completar todo el proceso utilizando el generador de favicon. Echemos un vistazo más de cerca a las herramientas en línea a continuación.
generadores de favicon
A continuación se encuentran algunos de los mejores generadores de favicon en la web. Con estas herramientas, solo necesita cargar su favicon, que lo convertirá a los formatos de favicon apropiados y estará disponible para su descarga. Este proceso solo toma unos minutos.
Los formatos estándar de favicon son ICO y PNG. ICO es compatible con todos los navegadores, incluido Internet Explorer. PNG es otro formato popular. El único inconveniente es que Internet Explorer no admite el archivo PNG. Un generador perfectamente seleccionado te permitirá descargar favicon en ambos formatos.
favorito
Crear un favicon en un Favicon es fácil. Simplemente cargue la imagen, recórtela y luego descargue el ícono resultante en formato ICO o PNG. He publicado a continuación icono de llama con proyecto sustantivo.
La desventaja es que Favikon solo admite un tamaño: 16×16 píxeles. Para obtener más opciones de tamaño, consulte las herramientas a continuación.
Favicon.io
Con Favicon.io puedes generar un favicon desde cero oa partir de una imagen, logo o emoticonos. Puede obtener una vista previa en tres tamaños diferentes antes de descargar.
Puedes descargar el resultado en formatos ICO y PNG y en muchos tamaños. Las opciones se enumeran a continuación:
- android-cromo-192×192.png
- android-cromo-512×512.png
- apple-touch-icono.png
- favicon-16×16.png
- favicon-32×32.png
- Favicon.ico
Favicon.ico y generador de iconos de aplicaciones
Con esta herramienta gratuita, puede cargar una imagen PNG o JPG y convertirla a formatos ICO y PNG en incluso más tamaños.
Las opciones de descarga se enumeran a continuación:
- manzana-icono-57×57.png
- icono-manzana-60×60.png
- icono-manzana-72×72.pnf
- manzana-icono-76×76.png
- icono-manzana-114×114.png
- manzana-icono-120×120.png
- icono-manzana-144×144.png
- icono-manzana-152×152.png
- icono-manzana-180×180.png
- icono-android-192×192.png
- favicon-32×32.png
- favicon-96×96.png
- favicon-16×16.png
Después de generar el favicon en el formato deseado, lo guardará en el directorio raíz del sitio. Luego, puede vincular el archivo HTML para implementar el favicon en su sitio web.
Antes de pasar por este proceso a continuación, tenga en cuenta que esto es para propietarios de sitios web que han creado su sitio desde cero o que utilizan una plataforma de desarrollo como Bootstrap CSS. Si ha utilizado un creador de sitios web o un CMS como WordPress o las alternativas de WordPress, el proceso será ligeramente diferente.
Cómo agregar un favicon en HTML
Después de crear un favicon, debe indicar a los navegadores y otras aplicaciones web dónde pueden encontrarlo. Para hacer esto, debe agregar una línea de código en la sección
su archivo HTML.Suponga que ha guardado un archivo PNG como «favicon.ico». Luego agregue el siguiente fragmento de código en cualquier lugar entre las etiquetas
:
<link rel="icon" type="image/png" href="https://blog.hubspot.com/favicon.png">
tenga en cuenta: Su favicon no tiene que estar colocado en la raíz de su sitio web, normalmente lo está. Si lo guardó en otro lugar, asegúrese de que el atributo href sea correcto. Entonces, si lo guardó en una subcarpeta llamada «imágenes», escribiría
Suponga que ha creado varios tamaños de favicon. Puede cargarlos todos en su sitio agregando una línea de código para cada tamaño en la sección
archivo HTML. Por ejemplo, si crea una versión de 16×16, 32×32, 48×48 y 180×180, agregará el siguiente fragmento de código:
<link rel="icon" type="image/png" href="https://blog.hubspot.com/favicon-16x16.png">
<link rel="icon" type="image/png" href="https://blog.hubspot.com/favicon-32x32.png">
<link rel="icon" type="image/png" href="https://blog.hubspot.com/favicon-48x48.png">
<link rel="apple-touch-icon" href="https://blog.hubspot.com/apple-touch-icon.png">
Crear un favicon favorito
Los favicons son una parte importante del diseño web. Pueden mejorar la experiencia del visitante, fortalecer la identidad de su marca y hacer que su sitio web sea más creíble. No cometa el error de pasarlos por alto, especialmente cuando son fáciles de crear y agregar a su sitio. Solo necesita un generador de favicon gratuito y algunos conocimientos de HTML.
