26/06/2008
Come modificare la favicon
Per rendere il blog ancora più personale, una modifica che si può compiere è quella sulla favicon.
La favicon è quella piccola icona, associata a un sito web, che appare a sinistra della URL nella barra degli indirizzi e nel menu dei Preferiti dei diversi browser (Internet Explorer, Firefox, Safari, Opera, Camino, …). Per fare un esempio, la favicon di MyBlog.it è questa:

L’immagine di una favicon è un’immagine quadrata che deve avere una di queste dimensioni in pixel: 16x16 o 32x32 o 48x48. E deve essere in uno di questi tre formati: .ico, .png o .gif.
Una favicon viene visualizzata grazie a questo codice HTML inserito tra le tag <head></head> che si trovano in testa alla pagina:
<link rel="icon" href="URL/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="URL/favicon.ico" type="image/x-icon" />
Per modificare la favicon sul proprio blog di MyBlog, innanzitutto scegliete la nuova immagine da utilizzare. Noi abbiamo utilizzato un’immagine 48x48 pixel in formato .png:
Una favicon viene visualizzata grazie a questo codice HTML inserito tra le tag <head></head> che si trovano in testa alla pagina:
<link rel="icon" href="URL/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="URL/favicon.ico" type="image/x-icon" />
Per modificare la favicon sul proprio blog di MyBlog, innanzitutto scegliete la nuova immagine da utilizzare. Noi abbiamo utilizzato un’immagine 48x48 pixel in formato .png:

Cliccate sulla cartella images e poi sul bottone Sfoglia per selezionare e caricare l’immagine dal vostro PC. Dopo pochi secondi vedrete l’immagine apparire nell’elenco dei file all’interno della cartella images.
Cliccate con il tasto destro del mouse sul nome del file e selezionate Copia collegamento (in Internet Explorer) o Copia indirizzo (in Firefox).

In questo modo avete copiato la URL della vostra immagine. Incollatela in un file di testo e salvatela, ci servirà tra poco.
Ora andate in Presentazione > Opzioni avanzate. Nei modelli delle pagine che avete a disposizione dovete cercare e modificare il seguente codice:
<link rel="icon" href="{$platform.url}graphics/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="{$platform.url}graphics/favicon.ico" type="image/x-icon" />
Le modifiche che dovete eseguire in entrambe le righe sono:
anziché: href=”{$platform.url}graphics/favicon.ico”
dovete inserire: href=”La url della vostra immagine”
L’attributo type=”image/x-icon” rappresenta il formato dell’immagine che si vuole utilizzare.
Se il formato è .ico, type non deve essere modificato.
Se il formato è .png: type=”image/png”
Se il formato è .gif: type=”image/gif”
Il risultato finale è questo:
Ora andate in Presentazione > Opzioni avanzate. Nei modelli delle pagine che avete a disposizione dovete cercare e modificare il seguente codice:
<link rel="icon" href="{$platform.url}graphics/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="{$platform.url}graphics/favicon.ico" type="image/x-icon" />
Le modifiche che dovete eseguire in entrambe le righe sono:
anziché: href=”{$platform.url}graphics/favicon.ico”
dovete inserire: href=”La url della vostra immagine”
L’attributo type=”image/x-icon” rappresenta il formato dell’immagine che si vuole utilizzare.
Se il formato è .ico, type non deve essere modificato.
Se il formato è .png: type=”image/png”
Se il formato è .gif: type=”image/gif”
Il risultato finale è questo:

Inoltre se volete che la vostra favicon sia in movimento basta inserire una GIF animata delle dimensioni richieste, come questa:

10:20 Scritto da: myblog.it in Blog - Tips and Tricks | Link permanente | Commenti (9) | Segnala
| Tag: myblog, virgilio, tutorial, tips, tricks, favicon, blog | OKNOtizie |
|
del.icio.us
|
|
Digg |
Facebook

Commenti
grazie, siete super. non speravo di riuscire a tanto. aspetto qualche altro suggerimento per personalizzare il mio blog.
Rispondi a questo commento
ciao,
ho accesso al mio profilo ma non riesco né a vedere nè modificare il mio vecchio blog
http://blog.alice.it/sonojenny
li aiutate?
Rispondi a questo commento
Ciao jennyfer,
dopo aver effettuato la login su www.myblog.it, clicca sul bottone "Crea e gestisci blog", in questo modo entrerai nel pannello di controllo da dove potrai gestire il tuo blog.
A presto
Rispondi a questo commento
thankssss :)
Rispondi a questo commento
Grazie a voi è stato facilisimo modificare la favicon...
Ma come mai con Internet Explorer non si vede?
(Col il mio sempre più adorato Firefox sì... e già mi basta).
Mapi
Rispondi a questo commento
Già risolto grazie... la favicon in formato .ico si vede anche con Internet Explorer :)
Io l'avevo fatta in .png
Grazie ancora :)
Mapi
Rispondi a questo commento
Senti a me la favicon non va per nulla. Ho provato a modificare su tutte le opzioni avanzate e ho inserito il codice html. non va. cosa sbaglio?
Rispondi a questo commento
Ciao Andrea,
dopo la modifica della favicon, ti consigliamo di fare diversi refresh sul blog o di eliminare la cache dal tuo browser, che potrebbe non mostrarti immediatamente le modifiche effettuate.
Qual'è l'indirizzo del tuo blog, così controlliamo.
Rispondi a questo commento
Bene se la vedete voi allora è un problema di chache. Grazie per l'aiuto. Spero che presto pubblicherete come cambiare il carattere e il colore del titolo del blog, indipendentemente dal resto.
Rispondi a questo commento
Scrivi un commento
NB: i commenti di questo blog sono moderati.