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.
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.
2.-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.
3.-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.
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:
COMO AGREGARLO A NUESTRO SITIO WEB?:
<!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>
Listo con eso tendríamos nuestro Favicon funcionando.
Post Basado en: 3 Ways To Successfully Design Your FavIcon