02/11/2006

Favicon, Questa Sconosciuta

Posted in Creazioni, Informatica, Mozilla Firefox, Portfolio, Web a 20:35:46 di JhacK

(INFORMAZIONE DI SERVIZIO: il nuovo blog si trova all’indirizzo http://www.jhack.it/blog, pertanto ti pregherei di visitare questo post a questo indirizzo.)

Cos’è la favicon?

Partiamo dal termine: è una contrazione di “favourite icon”, cioè icona preferita. Viene normalmente associata ad un intero sito web ma, al limite, può essere associata ad ogni singola pagina. Tutti i browser moderni sono capaci di gestirla correttamente, ma Internet Explorer fa schifo a prescindere :D, quindi passate tutti quanti a Firefox 2.0, è stato rilasciato da poco!

A che serve?

  • a contraddistinguere il proprio sito, poiché tale icona appare nella barra degli indirizzi, nell’eventuale tab e, cosa più importante, tra i bookmark; in questo modo sarà più facile per l’utente memorizzare l’icona e ritrovarla tra i suoi numerosi bookmark;
  • per il webmaster del sito, serve ad evitare di avere nei log di errore del sito il classico “File does not exist: /…/favicon.ico

Tanto per cambiare è Internet Explorer a creare problemi tecnici: mentre gli altri browser di diffusione rilevante sanno utilizzare correttamente file .png, .gif e .ico (non ho provato, ma suppongo anche qualunque altro formato che il browser è capace di aprire in una qualsiasi pagina web), Internet Explorer conosce solo i .ico. Per compatibilità, è buona norma creare quindi un file .ico, e qui sorgono i problemi quando ad uno come me viene in mente di creare un’icona che sia in grado di supportare più formati, in particolare le dimensioni 16×16px, 32×32px, 48×48px e 128×128px.

Trovandomi sotto Mac OS X potevo scordarmi di utilizzare software di Windows (lo so che c’è Parallels Desktop, ma non vedo perché cercare di tornare a Windows emulandolo :D).

Dopo svariate ricerche, può sembrare curioso, ma ho scartato qualsiasi programma creato apposta per disegnare delle icone o perché non riuscivo a creare niente di carino o perché non offriva la possibilità di creare un’icona con più risoluzioni.

La mia scelta è ricaduta su due software:

  • Inkscape, un programma di grafica vettoriale Open Source ben fatto e facile da utilizzare che si sta evolvendo sempre di più da una release all’altra;
  • Gimp, un software Open Source per la manipolazione di immagini (GNU Image Manipulation Program), già largamente conosciuto e diffuso in ambito GNU/Linux.

Inkscape l’ho utilizzato “solamente” per creare le immagini con cui costruire il file .ico.

Alcuni consigli per non perdere tempo nell’utilizzare Inkscape:

  • innanzitutto può essere comodo avere un canvas della dimensione giusta per una favicon, ma, visto che si parla di grafica vettoriale dove eventuali ingrandimenti/rimpicciolimenti dell’immagine non causano alcun problema all’immagine, è sufficiente avere un canvas quadrato, quindi si può scegliere “File->New->icon_16x16” e poi zoomare a piacimento per poter disegnare al meglio l’immagine;
  • ovvio a dirsi, ma è meglio stare attenti a disegnare l’immagine all’interno del canvas senza farla trabordare;
  • una volta completata l’immagine è necessario salvarla in un qualche formato leggibile da Gimp (consiglio PNG); per far ciò è necessario accedere alla finestra di dialogo tramite “File->Export Bitmap“:
    • come “Export Area” bisogna scegliere “Page” (cioè l’intero canvas);
    • come “Bitmap size” bisogna scegliere per ogni singolo salvataggio la width e l’height desiderate, ad esempio 16×16, 32×32, 48×48 e 128×128, naturalmente avendo impostato come “Units” “px“;
    • per salvare l’immagine in formato PNG è sufficiente impostare come”File name” un nome di file con estensione .png.

A questo punto si avranno a disposizione tutte le immagini .png (in questo esempio, quattro) che andranno a formare il file .ico. Ed è qui che bisogna abbandonare Inkscape e far entrare in gioco Gimp.
Mentre la procedura descritta precedentemente è abbastanza ovvia, quella che ho seguito per utilizzare Gimp non è particolarmente documentata (leggasi: l’ho costruita ad intuito leggendone una parte in un forum mentre cercavo tutt’altro :D):

  • come prima azione, bisogna creare un canvas adatto ad accogliere le immagini; è abbastanza ovvio scegliere come dimensione quella della più grande immagine tra quelle create (in questo esempio 128x128px) e questo si fa attraverso “File->New“:
    • Image Size“, “Width: 128″, “Height: 128″, “pixels“;
    • Advanced Options -> Fill with“: “Transparency“.
  • ora che abbiamo la base su cui lavorare è necessario importare le immagini create con Gimp e per farlo bisogna utilizzare dei layer, quindi scegli “File -> Open as Layer” e seleziona tutte le immagini da importare;
  • i layer verranno importati nel canvas e si vedranno tutti sovrapposti, non temere, non sarà quello il risultato :);
  • ora bisogna salvare il file con “File -> Save as…” ed è fondamentale impostare come “Name” del file un nome che abbia estensione .ico (si usa solitamente il nome standard “favicon.ico”);
  • si aprirà una finestra di dialogo in cui vengono mostrati separatamente i vari layer contenuti nell’immagine; si può cliccare tranquillamente su “Ok” ed ottenere finalmente il file tanto agognato :).

Ora non rimane che effettuare l’upload del file sul server web per il quale verrà utilizzato e indicare nelle pagine del sito di utilizzarlo. Per la prima azione dovrete utilizzare un client FTP, ad esempio per MacOSX c’è Cyberduck :).

La cosa più interessante è la seconda: alcuni browser utilizzano automaticamente il file favicon.ico, se questo è presente nella directory root del vostro spazio web ed ha ovviamente il nome di default favicon.ico. Tuttavia, l’azione più corretta da eseguire è introdurre nelle pagine un riferimento a tale icona e ciò si fa come segue:

<link href=”favicon.ico” rel=”shortcut icon” type=”image/x-icon” />

 

Se per qualche motivo l’icona non risiede nella root dello spazio web basta modificare opportunamente l’attributo href.

 

Tutto quello che ho descritto porta ad avere un’icona compatibile con Internet Explorer, ma altri browser, come Firefox, permettono di utilizzare altri formati grafici, ad esempio .png o .gif, assegnando all’attributo type il corretto MIME type (per una lista si veda qui).

Spero vi sia di aiuto, “That’s All Folks!”.

Annunci

18 commenti »

  1. Seric said,

    non è che sai anche come far visualizzare subito le favicon? cioè se l’utente non ti mette nei preferiti non visualizza la favicon nella barra, e anche se ti mette nei preferiti non è detto che lo faccia, ovviamente tutto questo è un problema del mirabolante explorer. Io sono passato a firefox, opera, safari, ma sviluppando pagineweb devo trovare soluzioni per la maggioranza della popolazione di interne, che usa explorer…lo so è un brutto compromesso da fare, abbassare la qualità per…
    va bè ciao e grazie

  2. JhacK said,

    @Seric: per quanto ne so IE gestisce male la cosa (non so IE7 perché ho abbandonato da un po’ Windows), come hai riscontrato anche tu, e ha comportamenti abbastanza arbitrari. Che io sappia non c’è una soluzione che prescinda da un comportamento attivo dell’utente (inserimento nei bookmark, che talora non funziona nemmeno).

  3. Cocco said,

    Anch’io ho lo stesso problema nel mio sito http://www.cavalcalonda.com con firefox tutto okkey mentre con explorer l’icona viene caricata soltanto se viene messa tra i preferiti.
    Boicottiamo explorer.

    OLA …

  4. Neoz said,

    http://www.somejunkwelike.com/wordpress/2005/05/24/howto-faviconico-on-mac-os-x/

    Con questo sistema mi sa che è più semplice 😉

    Buone favicon 🙂 !

  5. JhacK said,

    @Neoz: lo avevo provato, ma è limitativo: permette di creare solamente icone fino a 48x48px.

  6. Neoz said,

    Hai ragione, ottimo per una favicon, ma limitato 😉
    Beh … può essere utile a qualcuno che non necessita dimensioni superiori (come me ed i miei siti in Joomla).

    Buone feste a todos !

  7. luca said,

    Salve a tutti.
    sono capitato su questo blog perche ho problemi con le favicon

    mi sono soffermato su questa frase “Internet Explorer fa schifo a prescindere ” e a proposito vorrei farvi una domanda..

    Perche non spiegate anche io motivo per cui explorer è cosi odiato..?
    Sviluppo applicativi web ormai da diversi anni, e non trovo explorer cosi schifoso come spesso sento dire..
    Ad esempio provate a sviluppare applicativi utilizzando xmldom con firefox!!
    Sono due browser con pregi e difetti diversi , ma datemi un buon motivo per definirlo schifoso!!!

  8. JhacK said,

    @luca: non darmi del “voi” :D. I motivi sono tanti (non conosco bene IE7, quindi parlo per IE6):
    * se cerchi di sviluppare un sito internet che funzioni con differenti browser, quello che crea *sempre* più problemi è IE! Risulta sempre un dramma creare un foglio CSS unico e ci si riduce a trucchetti sporchi o, nei casi estremi, a creare fogli CSS diversi in base al browser!
    * le eventuali patch legate alla sicurezza vengono rilasciate molto meno frequentemente rispetto a Firefox;
    * non ho ancora trovato un modo per effettuare il debug di codice Javascript in IE; l’unico tool rilasciato da Microsoft è un bagaglio strano degli anni ’90 quasi inutilizzabile;
    * Firefox supporta un sacco di extension comodissime: EditCSS, WebDeveloper, FireBug, per citare solo alcune legate allo sviluppo di siti web;
    * IE non fa che inseguire Firefox, infatti si sono degnati di introdurre i tab quando Firefox li aveva già da tempo;
    * and so on…

  9. Lorenzo said,

    IE7 non visualizza alcuna icona anche se rinominata in “favicon.ico”. Qual’è la soluzione migliore ? lasciarla nella root e aggiungendo ? o è meglio icon ?

  10. JhacK said,

    @Lorenzo: “e aggiungendo” cosa? Comunque già dalla premessa “lasciarla nella root” posso dirti che quella è una strada sbagliata poiché, benché vari browser vadano a cercare un file di nome “favicon.ico” in “/”, va contro le direttive del W3C e contro il buon senso. Per farti un esempio pratico, molti utenti hanno un sito Internet appartenente ad un dominio non di primo livello e, ovviamente, non hanno modo di scrivere nella root del domini. Se anche potessero, naturalmente, si pesterebbero i piedi a vicenda perché il file dovrebbe avere lo stesso nome.
    Quindi il metodo migliore è quello che ho suggerito e, provando, ad esempio, a visionare questo blog con IE7, l’icona mi viene mostrata, quindi ho il dubbio che l’icona che stai utilizzando sia in un qualche modo “strana”. Per fare una prova, sostituiscila con quella di questo sito e vedi cosa succede.

  11. Ragazzi non è difficile 😉

    Basta che mettiate questo tag nell’header (nel codice html o php, in alto, dopo il titolo del blog):

    Ma funziona anche con altri tipi di siti:

    E la favicon la carica dalla cartella pagina

    Oppure:

    Anche se avete un terzo livello, tipo tuonome.altervista.org funzionerà 😛

  12. azz non me lo prende il codice…

    vabbè è così:

  13. ancora censurato?

    Non riesco a scrivere il codice 😛

  14. Ammazza, admin, c’hai paura dello spam? Non riesco a scrivere il codice necessario 😉

  15. JhacK said,

    @Federiko Aka The Killer: non è censura, ma se permettessi la scrittura di codice (X)HTML nei commenti potresti distruggermi potenzialmente il blog. Se sapessi quanto spam mi arriva al giorno capiresti.

  16. Davvero? 😀

    Installa il plugin “Did I passed Math?” che crea un campo in cui bisogna inserire la soluzione ad una sottrazione o addizione (es. 5+1 o 3-2) e se si sbaglia il commento non viene inviato 🙂

  17. JhacK said,

    @Federiko Aka The Killer: li convinci tu i proprietari dello spazio web? 🙂

  18. Slartibartfast said,

    Ma la sapete la cosa buffa? Le favicon sono state create per i preferiti di IE5 🙂


Rispondi

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione / Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione / Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione / Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione / Modifica )

Connessione a %s...

%d blogger hanno fatto clic su Mi Piace per questo: