¿Cuál es el punto de los favicons?

Cuando empiezo a contarle a la gente la importancia de un favicon para su estrategia general de marca en línea, generalmente dicen lo mismo: "¿No te estás llevando demasiado lejos esta marca?"

Mi respuesta generalmente es: "¡No si eres serio acerca de tus propios esfuerzos de marca!"

Es cierto, los favicons son cosas muy pequeñas, probablemente la parte menos importante de un sitio, pero es la atención al detalle lo que hace que un sitio se destaque; e incluso si suena loco, los favicons son muy importantes desde el punto de vista de la marca.

Teniendo en cuenta que WDD es un sitio web orientado a un público de diseñadores, supongo que muchos de ustedes ya saben qué son los favicons y cómo crearlos; pero este artículo aún puede ayudarlo a entender por qué debe hacerlas, y también sirve como una buena página de recursos.

Estoy compartiendo una gran lista con los recursos relacionados con favicon a continuación, así que considere marcar esta página para futuras referencias. Ah, y si lo hace, observe el favicon WDD en su lista de favoritos;)

En caso de que no seas un diseñador, o cualquier tipo de cinturón negro en favicon-arts, este artículo cubre probablemente todo lo que siempre necesitarás saber sobre estos pequeños cuadrados de 16 × 16 píxeles e incluso algunas favicuriosidades interesantes. . ¡Así que Disfrutá!

¿Qué es un favicon?

Los Favicons son pequeñas imágenes cuadradas, generalmente de 16 × 16 píxeles, que son utilizadas por los navegadores web para mostrar una representación gráfica del sitio que se visita en el lado izquierdo de la barra de direcciones del navegador. Probablemente ya haya visto muchos favicons antes, incluso si no sabe cuáles son. Si hay alguna duda, la siguiente imagen ayudará.

Dos ejemplos de favicons en un navegador con pestañas de Google Chrome.

Si está interesado en comprender una parte de la historia de Internet, aquí hay un hecho interesante:

La palabra favicon es un portamenú hecho con las palabras "favorito" e "ícono", y fue nombrado así porque primero fue compatible con Internet Explorer 5 de Microsoft y, por si no usas IE, esta característica de marcadores del navegador se llama favoritos.

¿Cuál es el propósito de un favicon?

En los comienzos de Internet, las herramientas como Google Analytics eran simples sueños en la mente de algunos nerds de la web, por extraño que parezca, en ese momento, los favicons se usaban como una forma de estimar el tráfico del sitio web mediante contando el número de visitantes que marcaron la página. (¡Ese es otro fragmento interesante en la historia de internet!)

Pero aparte de los hechos interesantes, la razón principal para tener favicons hoy en día es mejorar la experiencia del usuario. Los Favicons se utilizan en todos los navegadores modernos en la barra de direcciones, en la barra de enlaces, en el área de marcadores y en sus pestañas de exploración. Además de eso, algunos navegadores también muestran favicons cada vez que creas un enlace de acceso directo para el sitio web correspondiente en tu escritorio y tu dispositivo móvil.

Sin duda, la razón principal para tener un favicon es la mejora obvia en la experiencia del usuario. Un sitio web sin uno mostrará un símbolo genérico del navegador en todos los puntos de interacción que mencioné anteriormente, y si le importa su experiencia de usuario, debe preocuparse por los favicons.

Pero no puedo evitar ver las cosas a través del objetivo de la marca, mi área de experiencia, así que creo que los favicons son aún más relevantes desde el punto de vista de la marca. Nuevamente, con tantos puntos de interacción, no usarlos para aumentar la conciencia de marca es un crimen. La verdad es que encontrar formas creativas para mejorar su marca en línea siempre es una tarea desafiante, y tener un favicon es una manera fácil y simple de lograr eso. ¡Entonces consígase uno mi amigo!

Cómo crear un favicon?

Crear un favicon de sitio web es fácil como un pastel. De hecho, ni siquiera necesitas ser un diseñador para hacer eso. Seguramente ayuda si lo es, ya que puede poner sus habilidades a trabajar y crear algo que realmente se destaque, pero incluso los menos expertos en tecnología de nosotros pueden hacerlo en aproximadamente 5 minutos o menos, utilizando las herramientas adecuadas.

Los sitios web de la lista a continuación le permiten crear un favicon simplemente cargando una imagen preexistente. Por lo tanto, si desea crear un favicon para su marca, todo lo que necesita hacer es cargar su logotipo en uno de los siguientes sitios y descargar el archivo de favicon. Easy peasy, lemon squeezy.

Aquí está la lista de generadores Favicon que está buscando:

Los sitios web de arriba varían mucho en términos del archivo resultante que obtienes; especialmente en términos de tamaño de archivo y extensión. Si está buscando obtener el archivo más compatible posible, le recomiendo que descargue una imagen con un tamaño de 16 × 16 píxeles con el formato "ico".

Si necesitas algo de inspiración, prueba echar un vistazo a las galerías de favicones a continuación:

¿Cómo usar tu favicon?

Una vez que tenga su favicon cuidadosamente diseñado, instalarlo en su servidor no debería tomar más de un par de minutos en dos sencillos pasos. Para eso, necesitará acceder a la carpeta raíz de su sitio web y a una herramienta de edición de texto para cambiar el código HTML de su sitio web.

Paso 1

Deberá subir el archivo "favicon.ico" a su servidor. Para hacerlo, señale la barra de direcciones de su navegador a su servidor FTP; su URL debe ser similar a esto:

ftp://[email protected]

Presione enter y el navegador le solicitará un nombre de usuario y contraseña antes de otorgarle acceso al servidor de archivos. Una vez que esté dentro, simplemente suba el archivo "favicon.ico" a la carpeta raíz y listo.

Paso 2

Ahora necesitará editar la página HTML de su sitio web para ayudar a los navegadores a encontrar su imagen de favicon. Mantenga abierta su ventana de FTP, busque y descargue el archivo "index.html" o "header.php" de su servidor y siga los pasos a continuación según el archivo que obtenga:

Si su sitio web está hecho de HTML simple, inserte el siguiente código en el área HEAD del archivo "index.html", y no se olvide de cambiar "yoursite.com" por la dirección de su sitio web.

Si usa WordPress, inserte el código a continuación en el área HEAD de su archivo "header.php".

Una vez hecho esto, cargue el archivo nuevamente desde donde lo obtuvo. ¡Terminaste!

De hecho, la mayoría de los navegadores modernos son lo suficientemente inteligentes como para encontrar su archivo de favicon, incluso sin ningún tipo de código, pero solo si la imagen del favicon tiene 16 × 16 píxeles, se le ha llamado "favicon.ico" y es guardado en la carpeta raíz de la carpeta de su sitio web.

Cómo crear un favicon en Photoshop

Con tantas herramientas disponibles para ayudarte a crear tu favicón, ¿por qué querrías tomar el camino difícil y crearlo en Photoshop? Bueno, si eres un diseñador y quieres sacar el máximo provecho de tu favicon, sin duda es la forma profesional de hacerlo. El truco es que Photoshop no admite archivos "ico" nativamente, por lo que necesita descarga este complemento de Telegraphics .

Asegúrese de instalarlo antes de seguir el tutorial a continuación. Photoshop no funcionará sin él.

Busque la opción "ICO" en su cuadro "Guardar como" de Photoshop para confirmar que el complemento está instalado.

Cree un nuevo documento en Photoshop seleccionando el elemento del menú "Archivo" y la siguiente opción "Nuevo", luego configure su lienzo en 64 × 64 píxeles. ¿Por qué? Dado que el tamaño de favicon final de 16 × 16 es tan pequeño, tener un lienzo más grande para trabajar te ayudará a que tu creatividad fluya. Luego pegue su logotipo en el documento y libere su mágico poder creativo de unicornio.

Una vez que haya terminado, simplemente seleccione el menú "Imagen" y la siguiente opción "Tamaño de imagen" y reduzca la imagen a 16 × 16 píxeles. Recuerde hacer clic en "Volver a muestrear la imagen" y elija "Bicubic Sharper", esto es para asegurarse de que la imagen no se vea borrosa al cambiar el tamaño. Si no le gusta el resultado final simplemente deshaga los cambios de última hora con "AltCtrl / AltCmd + Z" y continúe trabajando en el diseño hasta que esté satisfecho con él.

Para terminar tu favicon todo lo que tienes que hacer es hacer clic en el menú "Archivo" y la siguiente opción "Guardar como", allí recuerdas nombrar tu archivo como "favicon.ico". ¡Una vez más, trabajo hecho!

Conclusión

Los Favicons son una de esas pequeñas cosas a las que normalmente no le prestamos demasiada atención, pero la verdad es que, lejos de ser insignificantes, son una parte muy importante de la web, tanto desde la perspectiva de la interfaz de usuario como desde un punto de marca. de vista.

Algunos dicen que las cosas buenas vienen en tamaños pequeños, y creo que también se aplica a los favicons, porque cualquier diseñador web y / o especialista en marcas que siempre se toman el tiempo de agregar un favicon a los sitios de sus clientes, incluso cuando el cliente no tiene idea de lo que es un favicon, demuestra una gran cantidad de profesionalismo y atención al detalle; el tipo de calidad que aprecia cada cliente

¿Creas favicons para tus clientes? ¿Son demasiados problemas por muy poca recompensa? Háganos saber sus pensamientos en los comentarios.

Imagen / miniatura destacada, imagen desconcertada a través de Shutterstock

diseño web marca cómo Favicon consejos y trucos

¿Cuál es el punto de Favicons?