El diseño de Favicon es más importante de lo que piensas,. El tamaño realmente importa aquí, ya que un logotipo bien diseñado debe ser reconocible en cualquier tamaño que se vea. Necesita escalar desde pantallas masivas hasta un icono que puede ser tan pequeño como 16 x 16 píxeles, conocido como favicon. Un gran ejemplo de diseño de favicon es el logotipo de Google. Funciona perfectamente para pantallas más grandes con su gran ‘ G ‘ y su distintivo texto de cuatro colores., Y sigue siendo tan reconocible cuando se reduce a la pequeña ‘G’ de cuatro colores vista en una barra de direcciones de navegadores web. El favicon también se puede ver como un icono de acceso directo, un icono de pestaña o un icono de marcador, por lo que necesita mirar la parte. Para ver los diseños de favicon que funcionan, consulta nuestro resumen de inspiración para el diseño de logotipos y echa un vistazo a esta impresionante colección de iconos de Aplicaciones iOS que lo hacen bien.
En este artículo, vamos a ejecutar a través del proceso de cómo diseñar el perfecto favicon., Incluiremos consejos específicos para crear un favicon para dispositivos Apple, Android, Chrome, Opera y Safari. Además de una guía práctica para los diferentes tamaños y formatos de favicon que necesita saber. Utilice los enlaces rápidos (derecha) para saltar directamente a la sección que desea.
Favicon diseño: enlaces Rápidos
Buscando un tipo diferente de icono? Vea nuestra guía de los mejores conjuntos de iconos gratuitos
en los primeros días de la web, un favicon era simplemente un archivo de iconos de 16x16px, pero hoy en día es un poco más complicado., Hay diferentes tamaños de favicon y procesos para diferentes contextos. Crear un favicon adecuado es una ciencia.
entonces, vamos a comenzar con algunos consejos principales sobre cómo debería ser tu favicon, y luego pasaremos a consejos específicos sobre cómo crear un favicon para diferentes contextos. Usaremos la plantilla disponible en Apply Pixels para generar fácilmente los diferentes tamaños de favicon requeridos, y el favicon De Apply Pixels como ejemplo.,
las reglas de diseño del Favicon
lo hacen reconocible
Lo primero que hay que tener en cuenta al diseñar un favicon es lo que debe representarse en el lienzo. Recuerde que su favicon solo se muestra al usuario cuando ya está en su sitio web o lo ha marcado como favorito. Así que no hay necesidad de intentar atraer al usuario con tu favicon.
Use su logotipo
considere favicons como señales sobrias que ayudan a los usuarios a reconocer su sitio web al navegar por sus listas de marcadores y pantallas de inicio., Por lo tanto, desea utilizar su logotipo, o cualquier símbolo que le permita al usuario reconocer su sitio web con mayor facilidad. Si no tienes un logomark que se ajuste al lienzo cuadrático, usa la parte más reconocible de tu logotipo.
manténgalo claro
También hay algunas cosas que debe evitar. No uses el favicon como una herramienta de marketing, eso significa que no hay etiquetas de precio, banners’ nuevos ‘o’ actualizados’, etc. De hecho, no quieres poner texto dentro del favicon en absoluto. El texto no escala bien, y lo más probable es que sea ilegible de todos modos., Por último, no utilice una foto – será fangoso e irreconocible en el tamaño que va a aparecer en.
crear dos versiones
diferentes fondos funcionan bien para diferentes contextos (crédito de la imagen: Michael Flarup/Apply Pixels)
cuando los favicons se introdujeron por primera vez en Internet Explorer 5, aparecieron en la barra de URL y en la lista de marcadores. Hoy en día, los favicons se muestran en muchos otros contextos, incluidas las listas de marcadores, los menús abreviados e incluso las pantallas de inicio móviles y de TV., Esto hace que sea difícil predecir cómo se mostrará tu favicon al usuario final.
para asegurarse de que su favicon se vea bien en los muchos contextos diferentes en los que va a aparecer, idealmente debe proporcionar dos estilos de favicon:
logotipo sobre fondo transparente esta versión se muestra en la barra de URL, listas de marcadores y otros lugares donde el favicon aparece junto a la URL o el nombre de su sitio web.,
Logo on solid fill Esta versión se utiliza en marcadores tipo cuadrícula y menús abreviados donde el navegador o dispositivo enmascara el fondo, para lograr un aspecto uniforme en contexto.
Favicon size cheatsheet
como se mencionó anteriormente, los diferentes contextos requieren favicones de diferentes tamaños. A continuación puede ver una guía rápida de los diferentes formatos y dimensiones que necesitará suministrar para cubrir todos los casos de Uso Principales.
anteriormente los favicons tenían que proporcionarse en el formato ICO., Hoy en día está bien proporcionar los archivos en formato PNG (a excepción del icono de pestaña anclado de Safari que debe proporcionarse como SVG).
si quieres una manera fácil de diseñar y exportar todos los tamaños de favicon, echa un vistazo a la plantilla de favicon en Apply Pixels.
estos son los tamaños de favicon más comunes (crédito de la imagen: emergeinteractive)
ahora echemos un vistazo más de cerca a los requisitos específicos de diferentes casos de uso.,
favicons del navegador de Escritorio
cómo crear un favicon del navegador de escritorio
comencemos con el favicon más sencillo que necesitará crear: un favicon clásico para los navegadores de escritorio clásicos. Este tipo de favicon funciona mejor en fondos transparentes, ya que a menudo aparecerá en la barra de URL y en las listas de marcadores.,
favicons de estilo clásico que se muestran en la barra de marcadores y la barra de URL en Google Chrome (crédito de la imagen: Michael Flarup / Apply Pixels)
deberá proporcionar este tipo de favicon en tres tamaños, todo en formato PNG con un fondo transparente.,
16×16
32×32
48×48
Apple
cómo crear favicons de Apple Touch
iOS de Apple utiliza iconos de Apple Touch para representar sitios web que se han guardado en la pantalla de inicio de iOS como marcadores. Esto significa que el icono de Apple Touch se redondeará a la máscara de squircle de los iconos de la aplicación iOS.
también se mostrará en cualquier fondo que el Usuario haya elegido para su pantalla de inicio. Con esto en mente, el icono de Apple Touch debe tener un estilo de fondo de relleno sólido.,
este favicon se mostrará contra el fondo de la pantalla de inicio del usuario (crédito de la imagen: Michael Flarup/Apply Pixels)
Los favicons de Apple deben suministrarse en formato PNG. Puede salirse con la suya proporcionando un icono de Apple Touch de 180×180 que escalará automáticamente para los diversos tamaños de iPhone y iPad. Esto funcionará bien en la mayoría de los casos.,
Si no, puede proporcionar más tamaños para los diferentes dispositivos de Apple:
60×60
76×76
120×120
152×152
180×180
Android, Chrome y Opera
Cómo crear un favicon para Android, Chrome y Opera
de Android, Chrome y Opera utilizar el android-chrome-192×192.png y android-chrome-512×512.png que Google recomienda.,
desde la introducción de los iconos adaptativos en Android, los sitios web agregados a la pantalla de inicio de Android enmascararán el diseño 192×192, por lo que el icono toma forma después del estilo de enmascaramiento preferido del usuario. Esto podría ser un squircle, elipsis, rectángulo, rectángulo redondeado o forma de lágrima.
los favicons aquí se enmascararán en diferentes formas, de acuerdo con las preferencias del usuario (crédito de la imagen: Michael Flarup / Apply Pixels)
debe crear un favicon PNG con fondo sólido, en 192×192 y 512×512.,
implementar estos favicons mediante la adición de un manifiesto.archivo json a su sitio y enlace a él dentro de las etiquetas:
<link rel="manifest" href="/manifest.json">
Aquí está el código para el manifiesto.archivo json:
Safari
cómo crear un favicon para la pestaña anclada de Safari
Este es el impar, y es el único favicon que debe proporcionarse en formato vectorial como un archivo SVG. Se muestra como el icono de miniatura cuando un usuario fija una pestaña en la ventana del navegador Safari.,
a diferencia de todos los demás favicons, este icono se genera a partir de una imagen SVG (crédito de imagen: Michael Flarup / Apply Pixels)
Este favicon debe ser un archivo SVG 100% negro con un fondo transparente. El SVG solo puede ser una capa, y safari requiere que el atributo viewBox del SVG se establezca en «0 0 16 16».
<link rel="mask-icon" href="your_icon.svg">
Otros favicon tipos
Hay algunos favicon dimensiones y formatos que no fueron incluidos en este artículo, por ejemplo., Google TV, Chrome Web Store y pre-iOS 7 iconos de Apple Touch. ¿Por qué? Porque han sido obsoletos o porque rara vez son relevantes para el desarrollador web promedio.
en general, los desarrolladores y diseñadores deben esforzarse por soportar una amplia variedad de dispositivos y sistemas operativos como sea posible, pero a veces simplemente no tiene sentido. Pero, si quieres ver una lista más completa de imágenes de favicon, asegúrate de echar un vistazo a esta hoja de trucos de favicon en GitHub.,
El diseño de la parte superior de las tendencias para el año 2020
