Favicon al azar para tu sitio en PHP
Publicado el Lunes, 12 de enero de 2009Desde que migré de servidor de hosting, dejé de tener un favicon para Picando Código. Así que hoy decidí arreglarlo. Tenía un par de íconos en PNG de 16x16 píxeles. No me decidía por uno en particular, así que hice un script en PHP para elegir uno al azar cada vez.
El favicon es el ícono que aparece al lado de la URL en la barra de navegación de nuestro navegador web. La mayoría de los navegadores web modernos soportan el formato PNG para favicons (no se sorprendan ante esto: aparentemente Internet Explorer aún no...).
Así que usé mis limitados conocimientos en PHP para crear un array, cargarle la ruta de los favicons, y mostrar el código XHTML para usar el Favicon. El estándar de la W3C define el siguiente código para los favicons:
<code><link rel="icon" type="image/png" href="/ruta/favicon.png" /></code> |
En mi caso creé un archivo "favicon.php"
, donde ingresé el siguiente código:
<?php function get_favicon(){ //Creamos un array con las rutas del favicon: $favicons = array("/favicon/imagen01.png", "/favicon/imagen02.png", "/favicon/imagen03.png"); //Usamos array_rand para obtener un índice al azar del array. $favicon = $favicons[array_rand($favicons, 1)]; return $favicon; } ?> <link rel="icon" type="image/png" href="<?php echo get_favicon(); ?>" /> |
Ahora en el archivo donde tengamos los headers de nuestro sitio (ejemplo: headers.php), hay que incluir el favicon.php:
<?php include('favicon.php'); ?> |
Se podría hacer mas dinámico, haciendo que detecte automáticamente todas las imágenes en el directorio "/favicon/", y las agregue al Array. Pero de esta forma creo que es mas simple y tengo la idea que va a ser de menor orden al no tener que recorrer el directorio y encontrar todos los archivos que hayan (corríganme si me equivoco). En mi caso no justifica ya que tengo muy pocas imágenes, pero sería interesante dicha implementación.
Favicon al azar en WordPress
Para implementar este código directamente en WordPress, debemos guardar el archivo "favicon.php" en el directorio de nuestro theme (plantilla de diseño). En mi caso también inclui el directorio de favicons en ese directorio. WordPress tiene una función para encontrar la ruta absoluta de la plantilla de diseño: bloginfo('template_directory');
. La guardamos en una variable y modificamos un poco el código:
<?php function get_favicon(){ $path=bloginfo('template_directory'); $favicons = array($path."/favicon/imagen01.png", $path."/favicon/imagen02.png", $path."/favicon/imagen03.png"); $favicon = $favicons[array_rand($favicons, 1)]; return $favicon; } ?> <link rel="icon" type="image/png" href="<?php echo get_favicon(); ?>" /> |
Esto lo guardamos, y en el header.php de nuestro theme, ingresamos el mismo código que el ejemplo de arriba:
<?php include('favicon.php'); ?> |
Así que de ahora en adelante, Picando Código cuenta con favicons al azar. Les dejo descubrir cuáles son, iré agregando más cuando encuentre alguno que me interese.
DiCrEn 12 enero. 2009 - 20:24
Se ve interesante! 🙂 Quizas lo ponga para mi blog, aunque con lo que me costo “diseñar” mi favicon… como para hacer mas 😛
fernando 12 enero. 2009 - 20:38
Jeje, en mi caso agarré imágenes en png con transparencia, las abrí con GIMP, Alt + I + S (Escalar imagen), 16×16 y Ctrl + Alt + S (Guardar como…), tampoco que tenga mucho de diseñador yo 😛
DiCrEn 13 enero. 2009 - 12:32
A mi me dicen que diseño bien, pero a mi me parecen una basura xD
Para el favicon de mi web probé 20mil formas del logo de GNU, y al final acabe cogiendo un cuarto de la imagen y a correr, pero me pase horas para hacer eso xD
Y ya con el logo de la web ni te cuento… me puse malo, total, pa acabar cogiendo una arial black xDD
Anonimo 7 junio. 2009 - 20:39
Gracias por el dato pero si quieres que se vea en Internet explorer tienes qu eponer este codigo
<link rel=”shortcut icon” type=”image/x-icon” href=”” />
Qrt 12 octubre. 2009 - 04:16
Hola,
El codigo funciona a la perfección.
Gracias
Qrt