Lun
12
Ene

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.


Si te gustó éste post, podés apoyar a PicandoCódigo a través de PayPal!

5 Comentarios para “Favicon al azar para tu sitio en PHP”

  1. DiCrEn a las 8:24 pm 12 Enero. 2009
    Firefox 3.0.5Ubuntu
    Mozilla/5.0 (X11; U; Linux i686; es-ES; rv:1.9.0.5) Gecko/2008121622 Ubuntu/8.10 (intrepid) Firefox/3.0.5

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

  2. fernando a las 8:38 pm 12 Enero. 2009
    GNU IceCat 3.0.5Debian GNU/Linux
    Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.9.0.5) Gecko/2008122316 IceCat/3.0.5-g1 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 :P

  3. DiCrEn a las 12:32 pm 13 Enero. 2009
    Mozilla Compatible 5.0GNU/Linux
    Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.9.0.5) Gecko/2008123017

    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. Anonimo a las 8:39 pm 7 Junio. 2009
    Firefox 3.0.10Windows XP
    Mozilla/5.0 (Windows; U; Windows NT 5.1; es-ES; rv:1.9.0.10) Gecko/2009042316 Firefox/3.0.10

    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. Qrt a las 4:16 am 12 Octubre. 2009
    Firefox 3.0.3Windows XP
    Mozilla/5.0 (Windows; U; Windows NT 5.1; es-AR; rv:1.9.0.11) Gecko/2009060215 Firefox/3.0.3;MEGAUPLOAD 1.0

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

Trackbacks y pingbacks:

Dejar un comentario

Al agregar un comentario en esta página, usted acepta la siguiente licencia para su publicación:
Creative Commons License Creative Commons Attribution-Share Alike 3.0 Unported License.




Si quieres mostrar código, enciérralo entre los tags pre de esta forma:
<pre lang="L"> y </pre>, donde L es un lenguaje compatible GeSHI. Más info.

XHTML: Las siguientes tags están permitidas: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">


Additional comments powered by BackType

Búsqueda personalizada

Warning: fsockopen() [function.fsockopen]: unable to connect to external.linklift.net:80 (Connection refused) in /home/fernando/public_html/wp-content/plugins/linklift_moverll_brhwx4qfqv/linklift_moverll.php on line 442