Crea Favicons e íconos para el iPhone

by webmonkey - 28 Mayo 2009
Webmonkey Favicon
Webmonkey’s bitmapped favicon

Favicons, los pequeños íconos que se ven en la barra de herramientas del navegador, son a menudo ignorados en diseño web, pero son otra forma de ayudar a crear la identidad de marca de su sitio. En gran medida el favicon pasa desapercibido para la mayoría de los visitantes, pero sin embargo solemos reconocerlos cuando los vemos.

Como otras formas sutiles de publicidad, los favicons entran en nuestro subconsciente sin que nos demos cuenta. ¿Cuál es exactamente la razón por la que su sitio necesita un favicon? ¿Qué tan seguido se consigue identidad de marca con un cuadrado de 16 pixeles?

Y ya que creamos favicons, ¿por qué no crear un icono para sus sitio que se pueda usar en iPhones/iPods?. El proceso es casi idéntico al de los favicons, y cosecha las mismas recompensas. Es cierto, la mayoría de la gente probablemente no lo utilizará, pero las pocas que lo hagan apreciaran el esfuerzo.

Favicons

El término favicon es simplemente una abreviación en inglés de la frase “ícono de favoritos” (favorites icon), ya que originalmente fueron pensados como marcadores de enlaces favoritos que fueran fáciles de navegar. Los favicons usan un formato poco conocido usado en los viejos íconos de Windows. Un archivo .ico es un bitmap de 16×16 pixeles que data de las primeras versiones de Windows.

Hoy en día, los navegadores modernos como Firefox, Safari, Opera y versiones más recientes de Internet Explorer pueden usar otros formatos de imágenes como .gif o .png, pero para alcanzar la mayor compatibilidad posible entre navegadores, .ico sigue siendo la mejor opción. Sin embargo, gracias a los metatags, no es difícil servir múltiples favicons – el formato del archivo a usar es librado a su discreción.

Para crear favicons se requería de editores de  imágenes como Photoshop o GIMP y ciertos plug-ins y herramientas de la línea de comandos. Por suerte, ya no es necesario. Hay una multitud de aplicaciones que convierten imágenes en favicons.

Muchos utilizan ImageMagick, que se incluye en varias distribuciones de Linux. Si conoce ImageMagick, puede crear el archivo usted mismo. Si no, existen servicios en línea como degraeve.com y Favicon.cc que facilitan esta tarea.

Creando Favicons

La calidad de la imagen generada por ImageMagick depende de la calidad de la imagen que usted le alimenta. Para obtener los mejores resultados comience con un formato “lossless” como .png. Cuando prepare su favicon use gráficos simples. Su logo puede que sea limpio y simple a tamaño completo, pero al momento de reducirlo a 16×16 pixeles, es probable que se convierta en un embrollo.

Intente aislar el elemento preponderante de su marca — por ejemplo el favicon de Google es justo una “g”, Flickr utiliza simplemente un punto rosa y otro azul, y Facebook opta por la letra “F” en un fondo azul.


La idea es simplificar, pero siéntase libre de hacer su gráfico inicial un poco más grande. Yo suelo comenzar con una imagen de 32×32, considerando que el producto final perderá inevitablemente algún detalle.

Usando Favincons

Una vez que usted tenga su imagen de 16 x 16 pixeles y esté feliz con el resultado, suba el archivo al directorio raíz de su servidor web. Es verdad que los navegadores modernos pueden encontrar un favicon donde sea que usted lo haya guardado, pero puede llegar a tener problemas con navegadores más viejos. Si soportar navegadores antiguos no es su prioridad, siéntase libre de guardar el archivo dondequiera que usted desee.

Ahora sólo necesitamos agregar un metatag a nuestros documentos HTML, de manera que el navegador sepa dónde encontrarlo. Nótese que esto no es siempre necesario. Algunos navegadores buscan el archivo favicon.ico aunque usted no les indique esto, es por eso que pudo haber notado mensajes de error en los registros de su servidor.

El tag de la cabecera es similar al siguiente:

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

Si desea usar una imagen en un formato diferente para navegadores más modernos, digamos .png, solo agregue esta línea de código debajo de la anterior:

<link rel=”icon” href=”http://yoursite.com/favicon.png” type=”image/png”>

Íconos para iPhone

Ya que estamos jugando con íconos minúsculos, ¿por qué no crear un icono para iPhone en caso de que los usuarios quieran marcar nuestra página en el menú de sus iPhones? Es casi tan fácil como crear un favicon y el código de la cabecera es casi idéntico.

Apple tiene instrucciones en su sitio para crear un ícono Web Clip y especificar un ícono para Web Clip, pero a continuación cubrimos lo que es necesario saber.

Apple recomienda usar un ícono de 57×57 pixeles, sin embargo diseñadores curiosos que han jugado con el formato descubrieron que los mejores resultados se obtienen con íconos de 60×60 pixeles a 72dpi. El iPhone automáticamente reducirá la imagen, de manera que esta sea de 57 pixels, pero se obtendrá una imagen más nítida al usar como punto de inicio dimensiones mayores.

Una vez que haya creado su ícono de 60×60 pixeles para iPhone, súbalo al directorio raíz de su website,  como lo hizo con su archivo favicon.

El iPhone probablemente descubra su imagen sin tener que decirle dónde se encuentra su archivo apple-touch-icon.png, pero para estar seguros, agregue en la sección <head> de sus documentos HTML  el siguiente código:

<link rel=”apple-touch-icon” href=”/whatever.jpg”/>

Y  ya está. Todos los íconos que usted pueda comer. 😉

2 Comments on “Crea Favicons e íconos para el iPhone”

  1. Codespanish » Blog Archive » Create Favicons and biPhone/b Icons « Iphone Buyer Info Says:

    […] webmonkey wrote an interesting post today onCodespanish » Blog Archive » Create Favicons and biPhone/b IconsHere’s a quick excerpt […]

  2. Free Gadget Says:

    Thanks for the information, bookmarked your page for updates 🙂

Leave a Reply