Cambiare l'icona del vostro blog nel browser


iconablog1

Avete presente la piccola icona di Blogger che compare nel browser vicino all'indirizzo del vostro blog? Questa stessa icona viene utilizzata dai browser quando aggiungiamo un blog ai nostri siti preferiti. Sebbene l'icona predefinita di Blogger sia carina, è possibile decidere di personalizzarla e visualizzarne una di nostra scelta (magari fatta da noi) per dare un aspetto più professionale e più personale al blog.

L'icona da visualizzare deve avere caratteristiche ben precise: una risoluzione di 16 x 16 pixel o di 32 x 32 pixel (la prima garantisce una maggiore compatibilità, specie coi browser più vecchi), e deve essere di tipo ICO, PNG o GIF (scegliendo quest'ultimo formato, possiamo addirittura avere un'icona animata!)

Per la creazione dell'icona potete scegliere uno strumento online come 256pixels (16x16) oppure Favicon Editor (32x32), oppure installare un programma come Microangelo (anche in prova per 21 giorni). Una volta che avrete realizzato la vostra icona, dovrete pubblicarla su qualche servizio online, come Picasa.

A questo punto non resta che farla visualizzare dal vostro blog. Andate in Layout -> Modifica HTML e, dopo aver effettuato il backup del vostro template, all'interno del codice del vostro template cercate la seguente riga:

<title><data:blog.pageTitle/></title>

che si trova quasi all'inizio. A seconda del formato dell'immagine che avete scelto, dovrete utilizzare il codice appropriato e incollarlo subito sotto la riga appena indicata.

Per un'immagine ICO:

<link rel='shortcut icon' href='indirizzo dell'immagine' type='image/vnd.microsoft.icon'/>

Per un'immagine PNG:

<link rel='shortcut icon' href='indirizzo dell'immagine' type='image/png'/>

Per un'immagine GIF:

<link rel='shortcut icon' href='indirizzo dell'immagine' type='image/gif'/>

Salvate le modifiche effettuate e visualizzate il vostro blog per vedere la sua nuova icona:

iconablog2

Condividi su Facebook, Twitter o Google Buzz:
Condividi su Facebook Condividi su Twitter Pubblica su Google Buzz

Per ricevere direttamente in posta i nuovi articoli, inserisci il tuo indirizzo email:
oppure puoi iscriverti al feed per tenerti sempre aggiornato sui nuovi contenuti del blog!
Per maggiori informazioni sui feed, clicca qui!

67 commenti:

Anonimo ha detto...

Ci sono riuscito.....dopo tante prove ma soprattutto dopo il grande aiuto di Tenebrae...

mitico

Angelo Ferretti ha detto...

Ciao, complimenti per il blog, è fantastico! grazie per tutti i consigli che ci dai! solo che non riesco proprio a cambiare l'icona come dici in questo post... ho caricato la gif su imageshack, inserito la stringa con l'url, ma niente da fare... mi è solo sparota la b di blogger... è possibile che il cambiamento si noti dopo qualche tempo? cmq ti ho linkato al mio, questo è il link http://angeloferretti.blogspot.com/ ciao!

Tenebrae ha detto...

Grazie dei tuoi complimenti Angelo, ti aggiungo molto volentieri all'elenco dei blog che mi linkano :)

Se è come penso io hai lo stesso problema che altri utenti stanno avendo con imageshack... perchè non provi con skydrive seguendo la guida che ho pubblicato io qui?

se proprio non riesci neanche così, mandami via mail la porzione di codice interessata, cioè la riga di codice che hai aggiunto e quelle subito prima e subito dopo

Andrea Walter ha detto...

voglio provarla anch'io questa!

Andrea Walter ha detto...

la procedura l'ho capita, vi dirò che non mi è molto facile creare un logo.. tenebrae come hai fatto a creare la C e la B con tanta precisione? io vorrei creare una icona contenente le mie iniziali AW
però non è mica semplice, mi vengono fuori delle lettere tutte storte, che programma hai usato?

Andrea Walter ha detto...

ce l'ho fatta! anche il mio blog ha il suo favicon! però ho usato un sito che ti crea il favicon in maniera semi automatica! qui per voi il link:
http://antifavicon.com/index-it.html

e poi l'ho trasformato in png per metterlo su photobucket con questo programma di nome idon sushi:
http://www.towofu.net/soft/e-aicon.php

si. perchè photobucket non carica i file ico
Ciao
Grazie tenebrae! come sempre sei il massimo!!!

Tenebrae ha detto...

semplice, ho utilizzato paint per creare un'immagine a 16 x 16 e poi ho utilizzato uno dei due servizi di cui parlo per convertila in icona :)

prendo nota dei link che mi hai segnato, ho già tra le bozze del writer un post sugli strumenti per creare le favicon :)

Tenebrae ha detto...

e grazie del complimento andrea, anche tu non sei da meno ;)

Babaccio ha detto...

Fatta anche questa!!!!!
Ormai sono un quotidiano frequentatore del tuo blog.
Per quanto riguarda ubuntu sto facendo dei tentativi per installarlo su un vecchio imb Thinkpad A30 ma ho poche speranze.
Salutoni

Unknown ha detto...

salve tenebrae innanzitutto grazie x i tuoi splendidi consigli..io ho 1 problema ho un blog su piattaforma splinder sto cercando di cambiare l'icona del mio blog nel browser seguendo il tuo post in riguardo ma niente!!
potresti aiutarmi forse la procedura è diversa?
grazie the sciaman

Tenebrae ha detto...

Non conosco Splinder ma non dovrebbe essere molto diverso... mi dai il link all'immagine che vuoi usare? magari il problema è lì

Anonimo ha detto...

Ciao,
purtroppo con il mio nuovo modello di blog non riesco ad inserire la stringa: ogni volta che provo mi dice che c'è un errore di XML

Tenebrae ha detto...

Nino ho controllato il tuo template e non ha nulla che non vada, inserisci il codice per l'icona (che al momento non c'è) e fammi sapere se hai ancora problemi così do un'occhiata

Anonimo ha detto...

Ci sono riuscita, anche se devo migliorare l'icona! Grazie
Per quanto riguarda il tuo ultimo commento sul mio blog, mi viene solo da dire: ANDATE (su internet) E MOLTIPLICATELI (i siti che parlano di signoraggio). A presto

ZiaBoby ha detto...

ho notato che Explorer continua a visualizzare la favicon predefinita di blogger

Tenebrae ha detto...

@boby: già, ho notato che qualunque sito si visiti (compreso google!) internet explorer non ne visualizza la favicon

dany ha detto...
Questo commento è stato eliminato dall'autore.
dany ha detto...

Ciao e complimenti per l'utilissimo blog!

E' da giorni che non riesco a capire, perchè quando inserisco dei codici di esempio (tipo il tuo articolo) non riesco a pubblicare l'articolo...

Se ad esempio scrivo la riga da cercare in quest'articolo


mi restituisce errore:

Non è possibile accettare il codice Tag is not allowed:xxxxxspecificato.

Il mio intento era quello di raggruppare in un blog (non visibile agli utenti e motori), tutte le modifiche che si possono apportare a blogger, ma quando scrivo un codice di esempio non mi fa pubblicare..

Dov'è che sbaglio?

Ps.
La riga non ho potuto scriverla in quanto mi da errore pure nei commenti!
Grazie e complimenti di nuovo!

Anonimo ha detto...

Ciao sono Sisifo
il tuo blog è interessantissimo per noi piccoli mortali alle prime armi.Sono riuscito ad inserire la favicon l'ho messa in internet (l'ultima prova con altervista)
ma mi rimane solo per qualche giorno dopo un pò di tempo come apro il mio blog non mi si vede più.(ma se vado all'indirizzo dell'immagine c'è) è normale? Bisogna fare qualche altro procedimento?
Ti ringrazio per il tuo aiuto prezioso.Buon ferragosto da Sisifo

Tenebrae ha detto...

@dany: puoi risolvere leggendo questo post

@sisifo: non è normale... quindi l'immagine è conservata su altervista? perchè non provi altri siti per ospitare l'immagine?

buon ferragosto in ritardo anche da parte mia

Anonimo ha detto...

Sembra che finalmente l'immagine rimane,grazie al tuo aiuto sei forte .Continua ad aiutarci..
Sisifo

Den ha detto...

Come si fa a creare un'icona in movimento?

Tenebrae ha detto...

@den: utilizzando una gif animata

AeSse77 ha detto...

Ciao,
Quando inserisco il codice come dici tu, chiaramente nel post e poi salvo ma il testo html cambia, sposta il testo da dopo link alla fine...che ne pensi??

link ---> href 'http://cid-a9e86dacbb401518.skydrive.live.... --->rel='shortcut icon' type='image/vnd.microsoft.icon'/>

Tenebrae ha detto...

intendi dire nel template? di solito capita quando manca qualche pezzo nel codice... oppure è blogger stesso che fa qualche sistemazione del codice (capita)... ma a parte quest'effetto, non ti funziona?

Anonimo ha detto...

Lasciamelo gridare!!! SEI UN GRANDE!!! questo blog è favoloso... grazie ancora

Leo ha detto...

Ciao
Volevo ringraziarti immensamente perchè, da quando ti ho trovato, il mio Blog ha cambiato totalmente look!
Ho seguito tutti i tuoi consigli e puoi vederne il risultato visitandolo:
www.ilmondodileo.blogspot.com
Ovviamente ti ho aggiunto ai link utili (è il minimo!)
L'unica cosa che proprio non mi riesce a cui terrei tanto, è cambiare l'icona nel browser..
La foto l'ho converita in *.npg e la carica, ma all'indirizzo si aggiungono dei numeri (???), tipo: http://ilmondodileo.blogspot.com.123456
Come potrei risolvere?

Tenebrae ha detto...

ciao leo, grazie per avermi linkato, ho subito ricambiato (era il minimo!)

così non so dirti... mi dai l'indirizzo dell'immagine che vorresti pubblicare? magari mi aiuta a capire

Leo ha detto...

Si, certo..
Ho pubblicato la foto su Image, che come certamente saprai, fornisce una serie di risultati..
Io ho utilizzato questo:
http://img444.imageshack.us/img444/8538/leoiconaih3.png
che era contrassegnato come "Direct link to image". Quindi ho creato la stringa che tu indichi così:"link rel='shortcut icon' href='http://img444.imageshack.us/img444/8538/leoiconaih3.png' type='image/png'/>" .
Il risultato sulla barra del browser è questo: http://www.blogger.com/html?blogID=8042734484348438590!
Spero di essere stato chiaro...

Anonimo ha detto...

purtroppo non sono riuscito a inserire la favicon,per pubblicarla ho usato imageShack, che uso sempre per altre piccole pubblicazioni, la porzione di codice è come l'hai indicata tu ma non cambia nulla.

come modello base uso minima

Cristina ha detto...

ho provato più volte..ma non cambia nulla...sighhh

Tenebrae ha detto...

@cristina e altri che hanno il problema: considerate che questa modifica non riuscirete a vederla con internet explorer, che per chissà quale problema non riesce a visualizzare le favicon... sto cercando però una soluzione alternativa

Den ha detto...

Io ho fatto una icona animata, solo che è venuta molto più grande di 16x16!
Come posso fare a restringerla?

Anonimo ha detto...

Ciao Tenebrae
mi servirebbe la soluzione alternativa per vedere le favicon con explorer, sono depressa: ho appreso oggi, dopo appena un anno di vita del blog, l'ingiusta verità...: due miei commenatori riescono a vederla e IO NO.... IO NOOO!!!
E' SEMPRE STATA LI, E IO NON LO SAPEVO PERCHE' NON VEDO UNA CIPPA!!!
SIGH.. :°((
SONO DEPRESSA... E ME NE VO CON LA CODA TRA LE GAMBE...
Saluti ingiusti
Ellcrys.

Tenebrae ha detto...

@Ellcrys: lo so, maledetto Internet Explorer... metto la proposta nel sondaggio

andy-drew ha detto...

Ragazzi, io sono un semplice utente, però so benissimo che Firefox ha sempre funzionato perfettamente con le favicon e IE mai; tra l'altro le icone *animate* .gif IE non mi pare le abbia mai supportate (almeno prima era così)

*°* Silvia *°* ha detto...

Funziona!!!!!!!
Dopo qualche problemino... che bello!!!
Grazie 1000!!!!

Salvatore Ferrante ha detto...
Questo commento è stato eliminato dall'autore.
AteaMente ha detto...
Questo commento è stato eliminato dall'autore.
AteaMente ha detto...
Questo commento è stato eliminato dall'autore.
Angel~ ha detto...

Scusa, Tenebrae, mi dispiace disturbare..
Ho fatto tutto quello che hai detto, e dopo svariate prove sono riuscito a creare la mia favicon. Purtroppo, però, quando vado per visualizzare il blog, continua a mostrare la favicon di Blogger..
ps: uso Google Chrome, potrebbe c'entrare?
Grazie e complimenti per il blog ;)

alessia trans bergamo ha detto...

come mai anche adesso cancelli tutti i miei commenti? :( ricordo che tempo fa' mi hai detto che lo facevi perche avevo come nome "alessia trans escort"....
ma a quanto pare non era il problema la parola escort come avevi detto te, è solo una questione di discriminazione? ok fai come vuoi il blog è il tuo non ti obbligo a fare cose contro la tua volonta....
ps: molti tuoi colleghi tipo "la camera dei blog e il sito blu" non si comportano cosi anzi rispondono gentilmente ai miei commenti e mi trattano come una persona "normale"... evidentemente lui non è razzista
ciao

Tenebrae ha detto...

non cancellerò questo, così spiegherò il concetto anche per altri

molti qui mi lasciano commenti pur avendo siti per adulti, ma seguono due accortezze: spesso non usano nick che possano attirare l'attenzione, e sempre flaggano il blog come "per adulti" (cosa per altro prevista dal regolamento di google oltre che dalla legge italiana)... stesse accortezze che avevo chiesto a te di seguire, o altrimenti di scrivermi in privato, perchè qui vengono persone di tutte le età, e soprattutto giovanissimi

non puoi pretendere di fregartene delle richieste (fatte in maniera assolutamente gentile) del padrone di casa per poi meravigliarti se vieni "buttata fuori"

la mia mail privata rimane comunque sempre a disposizione

Fiordilatte ha detto...

Ha funzionato al primo colpo :)
Trovo il sito davvero utile per chi ne capisce poco di html!
Unica cosa, ho notato che la favicon non compare ancora nei blogroll, forse apparirà non appena scrivo un nuovo post? In ogni caso va bene anche così! Grazie ;)

Jacopo ha detto...

fantastico!

Gianluca Testa ha detto...

nonostante sul nuovo blog utilizzi wordpress, ci sono riuscito! grazie

resiani-valresia ha detto...

riesco a fare tutto solo questo no perchè???.comunque sei sempre grande.

Giorgy ha detto...

Ciao ho usato una favicon.ico usando Favicon Generator pre crearla, e SkyDrive per hostare l'immagine, ma viene sempre fuori l'icona di Blogger come mai? mi puoi dare un'occhiata?
a proposito uso Firefox! Grazie in anticipo!

Alessandra Inzerillo ha detto...

Favolosooo ci sono riuscita..Ho inserito un favicon gif creata con un programma per foto...seguendo le tue istruzioniiii. Che dirti grazieeeeee.

Aurelia ha detto...

Grazie,grazie ,grazie!!!
Con i tuoi consigli è stato...quasi...una passeggiata.
Orazio,sei fantastico
Aurelia

Massimo ha detto...

Fantastico! Rendi le cose molto facili. Grazie!

Paolo P. ha detto...

Ieri ci sono riuscito, ma non con Picasa o gli altri servizi, non mi davano l'Url giusta: ho usato un vecchio servizio che lo reputo ottimo, photobucket, ho prelevato il link diretto e il codice che indichi, vedi qui , perfetto! Grazie Tenebrae, sei insostituibile

Zia Fiorella ha detto...

Aiuto dopo due giorni di prove mi arrendo. Si vede solo su Internet Explorer, su Firefox ha funzionato 1 volta e al primo riavvio è riapparsa la B di Blogger. Dove sbaglio? Tenebrae puoi aiutarmi?. Grazie anticipate e un saluto.

Tenebrae ha detto...

@mirò: qui ho parlato ancora della favicon, magari l'approccio diverso ti risolve il problema

Tenebrae ha detto...

@wolfango: purtroppo però photobucket ha limiti notevoli di banda... ma per una favicon va benissimo

k@tia ha detto...

uffaaaaa, fatto e rifatto dieci volte io non lo vedooooo!!! mi puoi aiutare in qualche modo tu?? please, grazie in anticipo!!
katia

Tenebrae ha detto...

k@tia: dai un'occhiata qui, forse il tuo problema è dovuto a questo

Anonimo ha detto...

Ciao Tenebrae! Con l'aggiornamento del design modelli ora il blog non carica la favicon.png, mentre nel formato gif sì... il problema è che mi serviva il png per sfruttare le trasparenze! Qualche idea? Grazie in anticipo!

Elena ha detto...
Questo commento è stato eliminato dall'autore.
Elena ha detto...

Grazie 1000!!
Finalmente sono riuscita anch'io a mettere una favicon al mio blog...e tutto grazie a te!!
Baci Baci
PS: ho messo il tuo link al mio blog!

Luca Lipartiti ha detto...

grande!!!
ottimo articolo
icona installata
http://odioilmiopc.blogspot.com/

About A Photo ha detto...

Gentili, io ho provato parecchie volte, ma non riesco assolutamente a visualizzarla: o rimane la "B" o mi segnala qualche errore oppure ancora appare l'indirizzo dell'immagine. Uso Firefox e il template del mio blog è Simple. Non so proprio che fare. Grazie mille!

Anastasia ha detto...

Io le sto provando tutte, ma niente!
Il mio blog è scuoladitrucco.blogspot.com e l'immagine è http://picasaweb.google.com/lh/photo/Rvv7PfeQWLE9KYH9KQ9JvbzxGHcgJCGgcYXq-f4qbHA?feat=directlink, ed è in formato png..
Sto tentando varie volte, ma nulla.
Cosa posso fare?

andy-drew ha detto...

Annie, se continui ad utilizzare IE è normale che non funga :)
Internet Explorer non supporta altri formati oltre a .ico
Usa Firefox, Opera, Chrome, etc.

Alienz ha detto...

Il mio blog e questo http://films92.blogspot.com/ però non so dove caricare la ICO del imagine che vloglio mettere e per di piu non trovo la riga giusta del HTML del blog da inserire il Tag qualcuno puo caricare un video su youtube di come ha fatto please magari L'admin di questo blog:.ringrazio

Hery ha detto...
Questo commento è stato eliminato dall'autore.
Hery ha detto...

Andato alla grande al primo colpo! ^__^ thank you Tenebrae!
il primo esperimento di blog sta prendendo forma pian pianino *-*
www.ourjarofhearts.blogspot.com


Prima di lasciare un commento, leggete qui

Posta un commento

Nota. Solo i membri di questo blog possono postare un commento.