Mi nombre es Fernando Briano y soy programador.

Favicon al azar para tu sitio en PHP

Desde 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 16×16 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…).

Favicon PicandoCódigo

Favicon PicandoCódigo

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.

Feed de comentarios | Url para Trackbacks | Suscribirse a los posts por correo electrónico

5 comentarios en este post

  1. Avatar DiCrEn 12 enero. 2009 - 8:24 pm Firefox 3.0.5 Ubuntu

    Se ve interesante! 🙂 Quizas lo ponga para mi blog, aunque con lo que me costo “diseñar” mi favicon… como para hacer mas 😛

  2. Avatar fernando 12 enero. 2009 - 8:38 pm GNU IceCat 3.0.5 Debian GNU/Linux

    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 😛

  3. Avatar DiCrEn 13 enero. 2009 - 12:32 pm Mozilla Compatible 5.0 GNU/Linux

    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

  4. Avatar Anonimo 7 junio. 2009 - 8:39 pm Firefox 3.0.10 Windows XP

    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=”” />

  5. Avatar Qrt 12 octubre. 2009 - 4:16 am Firefox 3.0.3 Windows XP

    Hola,
    El codigo funciona a la perfección.
    Gracias
    Qrt

    Dejar un comentario

    Toasty!