Favicon – Que Mas Que Una Simple Imagen

favicon2QUE ES?:2009-03-04_124029

Abres Google y escribes define: favicon y tu resultado es el siguiente:

Favicon (abreviatura del inglés ‘favorites icon’), también conocido como icono de página, es un icono asociado con un sitio web o página web en particular. Un diseñador web puede crear este icono y muchos navegadores gráficos pueden hacer uso de él. Los navegadores que permiten esta función suelen mostrar el icono junto a la barra de direcciones, al lado del nombre del sitio en la lista de favoritos y al lado del título de la página en una interfaz de documentos en pestañas.

COMO HACERLO?:2009-03-04_124041

Aquí tres puntos de vista al seleccionar tu Favicon:

1.-Muestra tu logo completo o alguna variación:

Si tu logo original es ligero y sencillo es una gran opcion mostrar tu logo completo. Pero si tu marca o logo es muy complicada, tiene mucho detalle el cual al disminuir el tamaño perderia el sentido, en esos caso debes poner una variacion de tu logo o marca.

2009-03-04_1405492009-03-04_1405422009-03-04_1405362.-Muestra un segmento:

Algunos casos nuestras marcas son tan complejas que el punto anterior no funciona, para esos casos una porción de la misma debería ser utilizada. Haciendo esto creas una referencia visual a tu marca o identidad sin tener que tratar de hacer encajar un gran emblema en 16x16px.

2009-03-04_1416432009-03-04_1416483.-Hazlo basado en tu estilo:

Algunos casos la creacion del Favicon puede ser tratado como algo diferente a tu logo o marca, entonces te dedicas a la creacion de algo especial para esa parte, basado en tu estilo y colores del sitio. Es muy comun ver que la mayoria de empresas/servicios/productos crean su favicon de una manera totalmente diferente al logo.

2009-03-04_1417482009-03-04_141754

QUE HERRAMIENTAS NECESITO?:2009-03-04_124048

Como vimos un Favicon es una imagen de 16x16px, ya sea .ICO, .GIF, .PNG.

Para crearlo puedes dedicarle mucho tiempo con  algún editor de imagenes o puedes crearlo basado en una imagen, existen muchas herramientas web que te permiten realizarlo sin ningun problema con variedad de opciones.

Favicon.cc
256Pixels
FaviconGenerator
Favicon.ru

Y mis recomendados:

Favikon
GenFavIcon
FavIconTool

Y para WordPress un plugin:

Favicon Generator

COMO AGREGARLO A NUESTRO SITIO WEB?:2009-03-04_124059

<!DOCTYPE html
      PUBLIC "-//W3C//DTD HTML 4.01//EN"
      "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en-US">
<head>
<link rel="icon"
      type="image/png"
      href="http://example.com/myicon.png">
[…]
</head>
[…]
</html>

Recomendaciones W3C

Listo con eso tendríamos nuestro Favicon funcionando.

Post Basado en: 3 Ways To Successfully Design Your FavIcon

Leave a Reply

Your email address will not be published. Required fields are marked *