sabato 7 marzo 2009

Inserire un icona accanto alla URL della pagina





Inserire un icona accanto alla URL della pagina (Favicon)
Home + Primi Passi + Articoli Primi Passi + Inserire un icona accanto alla URL della pagina (Favicon)
Articolo scritto da Felice Bonfrate
Visita anche www.colpidimouse.it
In questo articolo ci occuperemo della famosa icona che vedete spesso accanto all'url nel browser. Vedremo come realizzarla graficamente e come inserirla strutturalmente.

Per realizzare graficamente l'icona abbiamo bisogno di un editor grafico di icone tipo Microangelo.

A titolo di esempio vedremo come realizzare un simpatico smile da usare come Favicon. Iniziamo...

Apriamo Microangelo il quale di default vi apre un documento di 48x48 pixel, cliccate sull'icona sulla destra e scegliete 16 colori e 8x8 pixel, togliete la spunta dalla casella in basso "Begin new image ..." e quindi poi cliccate su "ok".
Prendiamo lo strumento "Filled Ellipse"


e tracciamo un cerchio che prenda quasi tutto lo spazio a nostra disposizione: praticamente facciamo un cerchio inscritto in un quadrato. Ora diamo il colore si sfondo al cerchio.
Prendiamo lo strumento "Fool"


e scegliamo un colore (il giallo) dalla tavoletta "Palette"

Per ottenere l’effetto clicchiamo sul cerchio con lo strumento "Foll" attivato. La base è creata.

Passiamo ora al corpo: occhi, naso, bocca.
Prendiamo lo strumento "Pencil"


e scegliamo dalla tavoletta "Palette" il colore Blu e disegniamo dei cerchi a simulare gli occhi.
Sempre con lo strumento "Pencil" scegliamo dalla tavoletta "Palette" il colore Rosso e disegniamo la bocca.
Infine sempre con lo strumento "Pencil" scegliamo dalla tavoletta "Palette" il colore bianco e tracciamo delle aperture al cento della bocca.


Salviamo con nome "favicon" in formato "Icon resources". Pubblichiamo l'icona appena creata nella root principale del nostro sito e inseriamo nella pagina tra i tag head questo codice:

link rel="SHORTCUT ICON" href="http://www.tuosito.com/tuaicona.ico"

-


.

2 commenti:

Sono Webmaster Freelance http://www.cipiri.com/

Related Posts Plugin for WordPress, Blogger...

Sosteniamo Mundimago

Segui RIFLESSI da Facebook

Segui RIFLESSI da Facebook
Siamo anche qui

Seguici da FACEBOOK

Seguici da FACEBOOK
siamo anche qui

Post più popolari