Uso creativo de los favicons

Un modo de añadir un favicon pero sin añadir realmente el fichero de la imagen, es usar una de las técnicas que ya he explicado para enlazar imágenes reduciendo el número de peticiones HTTP.

Aquí está el código para un copy-paste rápido para incluir un favicon en blanco de modo que se reducen el número de peticiones HTTP (ya no se pide al servidor el favicon con cada carga de página) y se tiene "algo" por ejemplo mientras se pone el icono definitivo.

<link href="data:image/x-icon;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQEAYAAABPYyMiAAAABmJLR0T///////8JWPfcAAAACXBIWXMAAABIAAAASABGyWs+AAAAF0lEQVRIx2NgGAWjYBSMglEwCkbBSAcACBAAAeaR9cIAAAAASUVORK5CYII=" rel="icon" type="image/x-icon" />

Para generar la cadena a partir del favicon real, basta con:

<?php echo base64_encode(file_get_contents('favicon.ico')); ?>

Recordaros que ésto solo funciona con navegadores modernos e IE8 o superior. Si es IE6 o 7 hay que usar MHTML como se vió en el artículo de 6 maneras de visualizar imágenes. En estos casos quizás sea más rápido usar directivas de condición según el navegador y versión:

<!--[if lt IE 8]><link type="image/x-icon" href="favicon.ico" rel="icon" /><![endif]-->

Y para rematar la faena, un editor online de favicons:

http://www.favicon.cc/