In questa mini-guida voglio proporvi un metodo per cambiare la favicon standard di blogger (la b bianca su sfondo arancione) e inserirne al suo posto una personalizzata che rispecchi i contenuti o il logo del nostro blog.
Prima di iniziare vediamo di capire meglio cos’è questa favicon.
La favicon
è un un’immagine che i browsers pongono a sinistra della barra degli indirizzi e quindi accanto all’url del nostro sito o blog…
come potete notare nell’immagine sopra la favicon si trova anche nella scheda del browser.
Come si personalizza la favicon
Personalizzare una favicon è molto semplice, innanzitutto effettuiamo una copia del template, questa ci servirà per ripristinare il tutto qualora qualcosa dovesse andare storto.Dopo di che andiamo su Layout >> Modifica HTML premiamo CTRL + F (funzione “trova” del browser), cerchiamo la stringa “</head>” (senza virgolette) e incolliamo subito sopra il seguente codice:
Per immagine .gif
<link href='url favicon.gif' rel='icon' type='image/gif'/>Per immagine .png
<link href='url favicon.png' rel='shortcut icon' type='image/vnd.microsoft.icon'/>
Per immaginr .ico
<link href='url favicon.ico' rel='shortcut icon'
type='image/x-icon'/>
Dove a url favicon va sostituito il link relativo all’immagine della favicon.
Dovreste avere quindi una cosa di questo tipo
clicca sull'immagine per ingrandirla
Salviamo il modello e controlliamo i risultati.
Link utili per la creazione di favicon
Ci sono dei siti che rendono la creazione di una favicon estremamente semplice…ve ne cito alcuni:Ne conosci altri?
41 commenti:
@Spyproject il commento è stato eliminato perchè palesemente a scopo pubblicitario.
Nonostante io non sia una gran esperta di informatica seguendo le tue istruzioni sono riuscita a fare una favicon animata con favicon.cc. Bel post! Sara
@Sara grazie della visita, fa sempre piacere sapere di essere stato utile a qualcuno :)
Grazie, per me ha funzionato perfettamente. Grazie mille.
@mamma (quasi) green Bene...mi fa piacere che tu ci sia riuscita...hai fatto una bella favicon! ;)
ma io o fatto una favicon con favicon cc ma non capisco come prendere l' indirizzo url della favicon
@Best friends Prova a caricarla su imageshack...da li prendi l'URL dell'immagine ;)
Fammi sapere come va...
Ciao grazie per la guida. Purtroppo io non ci riesco, potrebbe essere problema del template? io utilizzo studio press.. Ho fatto tutto come ha scritto ma non mi esce la favicon, in compenso però toglie la favicon di blogger e esce quelal standard di IE. Potrebbe essere la dimensione? io ho usato la 16x16 credo sia la standard giusto?
Ciao Lorenzo...analizzando la sorgente del tuo blog mi sono accorto che in effetti hai impostata la favicon di blogger...prova a rivercare questo codice < link href = 'http://www.blogger.com/favicon.ico' rel='icon' type = 'image/vnd.microsoft.icon'/> e sostituiscilo con quello che ho detto io nell'articolo e fammi sapere se risolvi...
dimenticavo....ho aggiunto degli spazi sul codice perchè i commenti non suportano l'html :)
Ciao Nicola sei molto gentile ad aiutarmi! Si poi ho tolto il codice e rimesso come era prima, solo per sicurezza per evitare errori.
Per quanto riguarda il codice che mi hai scritto,l'ho inserito(eliminandone gli spazi) nella barra d funzione trova (F3) ma non mi trova nessun risultato di questo codice..
Se hai facebook aggiungimi come amico che ne parliamo meglio...
E' la prima volta che vengo qui da te: mi occorreva sapere come mettere un .png come favicon.
Sono pigra e non mi andava di fare un .ico. Invece, grazie alla tua guida, sono riuscita ad usare la mia tortina.png!! Grazie mille!
Tornerò domani per dare uno sguardo ulteriore...!!
:)
@Sarù (Torte decorate) Gran bella favicon...compimenti! ;) sempre felice di esser stato utile a qualcuno...hai anche un bel bloghetto per i golosi come me :) sono tuo followers!!
Proprio quello che mi serviva...carino questo blog, mi chiamo marco e mi sono unito ai tuoi sostenitori con google friend, se ti và puoi fare lo stesso con me: www.gratisdalweb.com
Ciao
Ciao Marco...sono contento che tu abbia trovato quello che ti serviva proprio qui. Anchio ti seguo...
Salve.
Ho provato ad inserire il codice, non mi da errore, però non funziona.
Compare per qualche istante l'icona nella barra di firefox dove ho salvato alcuni segnalibri, ma non nella barra dell'url, appena ricarico la pagina del blog sparisce tutto, non capisco proprio cosa non va
@PalleQuadre ciao...ho visitato il tuo blog con Firefox, Chrome ed Internet Explorer e la favicon è visibile in tutti e tre i browser! :)
Si alla fine ci sono riuscito grazie
ciao ho appena provato a inserire una favicon ma non riesco a visualizzarla... qual è il problema? ti ringrazio tantissimo in anticipo! :)
@The Queen og Chocolate hai usato il codice esatto corrispondente all'estensione dell'immagine(.png .gif .jpg)?
ciao Nicola, premetto che ci capisco poco e niente di queste cose e poi ho provato in diversi modi a inserire la favicon, in quanto sul web ci sono opinioni molto differenti su come farlo.
Ho salvato l'immagine con l'estensione .gif, l'ho messa in un sito di hosting, e poi ho inserito il primo codice che hai scritto tu.
Al posto di url favicon (ci ho messo un pò a capire cosa significasse!!!) ho messo l'url che mi dava il sito di hosting + ".gif"
Ho sbagliato vero?
Dalla descrizione che mi hai dato sembrerebbe tutto ok...lo hai incollato sopra il tag < /head >?? Se si inviami l'url della favicon via E-mail e vediamo un pò di sistemare la cosa...oppure aggiungimi come amico su facebook!
grazie Nicola finalmente ho risolto il problema e mi sono divertita a modificare la favicon più volte prima di trovare quella che più mi piaceva! ;) a presto!
è sempre un piacere essere di aiuto a qualcuno...alla prossima!
Ciao seguendo la tua guida sono riuscito ad inserire la favicon, il problema è che questa non viene visualizzata nell home page. Mi spiego meglio, quando vado nel mio sito www.bbackground.com mi spunta la favicon di blogger, se invece vado in uno dei link ai vari post che ho pubblicato mi spunta la mia favicon.
Strano vero?
Come non detto, ho risolto tutto. Complimenti per il blog :)
@BBackground infatti ieri la favicon la vedevo anche in home con firefox :) ma non ho avuto tempo di verificare in maniera approfondita anche con altri browser... ;)
Non riesco a visualizzare l'icona. Come posso fare?
Uso un file di tipo .ico
Complimenti per il blog!! ..l'ho scovato cercando il modo per mettere la favicon personalizzata :)
..sto provando con la tua spiegazione...ma non ci riesco :(
@Pixia61 perchè non riesci? spiegami bene cosa non va :)
Ciao!! ho seguito per filo e per segno i passaggi e alla fine sono riuscita ad inserire la Favicon che volevo MA in google chrome la vedo senza problemi, invece in Esplorer non mi appare...da cosa può dipendere?
:(((( sigh!! ci ho lavorato tutto il pomeriggio...
Grazie!
Mi sento un uomo felice!
Non mi usciva perchè era un immagine .gif
e quindi io inserivo il codice per l'immagine .ico!
Grazie!!!!
:D
Ciao,
Purtroppo non riesco in nessun modo a caricare un nuovo favicon su blogger, ne in formato .ico ne in formato .png.
Risoluzione ovviamente 16x16
Sapresti aiutarmi? Grazie!
Hai seguito per filo e per segno la guida?
Grazie! Funziona :D
Aiuto...non riesco pur seguendo filo e per segno
help help
url http://www.rosaneronews.altervista.org
Grazie
Fabrizio
@Fabrizio io con Firefox 10.0 vedo la tua favicon. E comunque il mio procedimento è specifico per la piattaforma BLOGGER (blogspot).
Ciao il problema rimane con gli indirizzi redirect! Sai percaso come fare?
Posta un commento