Pubblicato il 05/12/08 - aggiornato il  | 9 commenti :

Inserire in Blogger una favicon con testo scorrevole visibile con tutti i browser escluso IE.

In un articolo precedente ho parlato di come creare una favicon animata. Adesso facciamo qualcosa di ancora più originale inserendo una scritta scorrevole. Tutto questo può sembrare solo un gioco senza nessun beneficio pratico, invece non è così per almeno tre buoni motivi
  • La cura dei dettagli fa pensare al visitatore occasionale che il nostro sia un blog di alto livello.
  • Tutte queste features accrescono la curiosità che è propedeutica all'interesse
  • Invece di avere una B bianca su sfondo arancione, come tutti gli utenti di Blogger, avere qualcosa di diverso ed originale ti fa riconoscere immediatamente in mezzo agli altri se qualcuno mette il tuo sito tra i Segnalibri.
La cosa negativa di questa personalizzazione è che è visibile solo in Firefox ma anche su Explorer dovrebbe comunque sparire la B di Blogger sostituita da un'immagine meno anonima.

Per prima cosa ho creato un'immagine logo con Photoshop di dimensioni 80x80. Siccome sono pigro ho solo messo un carattere di testo
Senza titolo-1
Sicuramente avrete più fantasia di me!. Quindi sono andato sul sito Animated Favicon. Questo sito offre la possibilità di creare delle favicon con testo scorrevole. Il problema è che il procedimento descritto non funziona in Blogger. Dopo un paio di tentativi ho capito come occorre procedere.
Cliccare su Sfoglia per scegliere l'immagine del vostro logo ed inserire la scritta che volete compaia nella favicon. Infine premere su Create Favicon e su Get it Now quando è terminato il processo
image
La nostra realizzazione sarà scaricata sotto forma di un file in formato ZIP che dovrà essere scompattato con il programma Zip Genius o analogo che può essere scaricato gratuitamente. Per farlo cliccare sul destro del mouse quindi Zip Genius>Estrai qui
image
Compariranno 6 file ma quello che dovete considerare è animated_favicon.gif. Li altri li potete anche cancellare. Adesso rinominatelo come favicon animata.ico. Il computer vi avvertirà che il file potrebbe non essere più aperto, procedete comunque.
Adesso caricatela in un hosting come Google Page Creator o SkyDrive e acquisitene l'indirizzo con il tasto destro del mouse


image
Andate adesso In Personalizza>Layout>Modifica HTML
e cercate nel modello il tag </head>, quindi immediatamente sopra incollate il seguente codice
<link href='indirizzo-favicon' rel='shortcut icon'/>
<link href='indirizzo-favicon
' rel='icon'/>

Dove al posto di indirizzo-favicon va messo l'indirizzo acquisito precedentemente. Nel sito si fa presente che questa favicon dovrebbe essere visibile con tutti i browser. Ho qualche dubbio, comunque coloro che non la visualizzassero ecco cosa vedrebbero se avessero Firefox.
Aggiornamento: Per vedere la favicon anche con Google Chrome seguite le istruzioni del post






9 commenti :

  1. ciao parsifal sto provando ad inserire la favicon nel mio blog.
    vorrei sapere se posso usare altri servizi di hosting come tynipic o imageshack.
    grazie :)

    RispondiElimina
  2. @nanussa
    L'importante è che supportino il formato ico altrimenti la puoi sempre caricare ma non la vedranno quelli che hanno il browser IE.
    Ciao

    RispondiElimina
  3. ok grazie. :)

    sempre che riesco ad inserirla la favicon!! chissa' perche' mi e' cosi' difficile.... :( fino ad ora niente...cmq provero'ancora....
    grazie e buona giornata! :)

    RispondiElimina
  4. finalmente ci sono riuscita!! favicon con testo scorrevole ;)
    si visualizza sia con firefox e anche con opera.
    peccato che non si vede con internet explorer e google chrome.
    ciao parsifal, grazie del tutorial!! a presto:)

    RispondiElimina
  5. @nanussa
    Se vuoi vederla anche con Chrome inserisci le modifiche indicate in questo post
    http://www.ideepercomputeredinternet.com/2010/09/come-visualizzare-una-favicon.html
    Dovrebbe funzionare, poi eventualmente fammi sapere.
    Ciao

    RispondiElimina
  6. ciao, ho inserito le modifiche che mi hai indicato, ora si vede anche con chrome!!
    praticamente si vede con tutti i browser tranne che con internet explorer, cmq explorer non l'uso quasi mai e non so se con la versione aggiornata si vede.
    Ma mi va bene cosi', grazie sei stato gentilissimo. ciao :)

    RispondiElimina
  7. @nanussa
    Grazie a te per esserti prestata a fare questo test. Adesso modifico il post con relativo aggiornamento.

    RispondiElimina
  8. @Easy...
    Funziona ancora. Si va su Scegli File per l'immagine quadrata, quindi si inserisce il testo, si va su Create favicon e in basso appare il risultato in anteprima. Per scaricarlo si va su Get it Now!

    RispondiElimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.