Krypton Solid

¿Qué sentido tienen los favicons?

¿Qué sentido tienen los favicons?

Cuando empiezo a decirle a la gente sobre la importancia de un favicon para su estrategia general de marca en línea, generalmente dicen lo mismo: «¿No estás llevando esto de la marca demasiado lejos?»

Mi respuesta suele ser: «¡No si te tomas en serio 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 una audiencia 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 comprender por qué debe hacerlos y también servir como una buena página de recursos.

A continuación, comparto una gran lista con recursos relacionados con favicon, así que considere marcar esta página para referencia futura. Ah, y si lo hace, observe el favicon WDD directamente en su lista de marcadores;)

En caso de que no sea un diseñador, o cualquier tipo de cinturón negro en favicon-arts, este artículo cubre probablemente todo lo que necesitará saber sobre estos escurridizos 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 los navegadores web utilizan para mostrar una representación gráfica del sitio que se visita en el lado izquierdo de la barra de direcciones del navegador. Probablemente hayas visto muchos favicons antes, incluso si no sabes cuáles son. Si tiene alguna duda, la imagen de abajo le ayudará.

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

Si está interesado en comprender un fragmento de la historia de Internet, aquí hay un dato interesante:

La palabra favicon es un portamentau hecho de las palabras «favorito» e «icono», y se nombró así porque primero fue compatible con Internet Explorer 5 de Microsoft y, en caso de que no use IE, esta función de marcadores del navegador se llama favoritos.

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

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

Pero dejando de lado los hechos interesantes, la principal razón 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 vínculos, en el área de marcadores y en sus pestañas de navegación. Además de eso, algunos navegadores también muestran favicons cada vez que crea un enlace de acceso directo para el sitio web correspondiente en su escritorio y su dispositivo móvil.

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

favicons

Pero no puedo evitar ver las cosas a través de la lente de la marca, mi área de especialización, por lo 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 el conocimiento de la marca es un crimen. La verdad es que encontrar formas creativas de mejorar su marca en línea es siempre una tarea desafiante, y tener un favicon es una forma fácil y sencilla de lograrlo. ¡Así que consíguete uno, amigo mío!

¿Cómo crear un favicon?

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

Los sitios web en la lista a continuación le permiten crear un favicon simplemente cargando una imagen preexistente. Entonces, 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. Fácil, exprimido de limón.

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

Los sitios web anteriores varían mucho en términos del archivo resultante que obtiene; especialmente en términos de tamaño y extensión del archivo. 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 necesita algo de inspiración, intente ver las galerías de favicon a continuación:

¿Cómo usar tu favicon?

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

Paso 1

Deberá cargar el archivo «favicon.ico» en su servidor. Para hacer eso, apunte la barra de direcciones de su navegador a su servidor FTP; su URL debería verse similar a esto:

Presione enter y el navegador le pedirá un nombre de usuario y contraseña antes de otorgar acceso al servidor de archivos. Una vez que esté dentro, simplemente cargue el archivo «favicon.ico» en la carpeta raíz y listo.

Paso 2

Ahora deberá editar la página HTML de su sitio web para ayudar a los navegadores a encontrar su imagen de favicon. Mantenga su ventana FTP abierta, 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 código a continuación en el área HEAD del archivo «index.html» y no olvide cambiar «yoursite.com» por la dirección de su propio sitio web.

<link rel="shortcut icon" type="image/x-icon" href="http://yourwebsite.com/favicon.ico">

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

<link rel="shortcut icon" type="image/x-icon" href="https://www.webdesignerdepot.com/2012/11/whats-the-point-of-favicons/<?php bloginfo("url') ?>/favicon.ico">

Una vez hecho esto, vuelva a cargar el archivo donde lo obtuvo. ¡Listo!

De hecho, la mayoría de los navegadores modernos son lo suficientemente inteligentes como para encontrar su archivo de favicon incluso sin ningún fragmento de código, pero solo mientras la imagen de favicon tenga 16 × 16 píxeles, se ha denominado «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 favicon, ¿por qué querrías tomar el camino difícil y crearlo en Photoshop? Bueno, si eres diseñador y quieres sacar lo mejor de tu favicon, sin duda esa es la forma profesional de hacerlo. El truco es que Photoshop no admite archivos «ico» de forma nativa, por lo que debe descargue 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 el cuadro «Guardar como» de Photoshop para confirmar que el complemento está instalado.

Cree un nuevo documento en Photoshop seleccionando el elemento de menú «Archivo» y la siguiente opción «Nuevo», luego configure su lienzo en 64 × 64 píxeles. ¿Por qué? Dado que el tamaño final del favicon de 16 × 16 es tan pequeño, tener un lienzo más grande en el que trabajar te ayudará a hacer fluir tu creatividad. 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 elegir «Bicúbica más nítida», esto es para asegurarse de que la imagen no se vea borrosa cuando se cambie de tamaño. Si no le gusta el resultado final, simplemente deshaga los últimos cambios con “AltCtrl / AltCmd + Z” y siga 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í te acuerdas de 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 no solemos prestar demasiada atención, pero lo cierto 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 el punto de vista de la marca. de vista.

Algunos dicen que las cosas grandes vienen en tamaños pequeños, y creo que eso también se aplica a los favicons, porque cualquier diseñador web y / o especialista en branding que siempre se toma el tiempo para 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 profesionalidad y atención al detalle; el tipo de calidad que todo cliente aprecia.

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

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

Deja un comentario