Favicon

Le favicon di Joomla!

Le favicon sono le piccole icone che appaiono nella scheda del browser accanto al nome del sito. Vicino all'inizio del file index.php del template ci sono tre istruzioni per caricare le favicon nella pagina:

    // Browsers support SVG favicons
    $this->addHeadLink(HTMLHelper::_('image', 'joomla-favicon.svg', '', [], true, 1), 'icon', 'rel', ['type' => 'image/svg+xml']);
    $this->addHeadLink(HTMLHelper::_('image', 'favicon.ico', '', [], true, 1), 'alternate icon', 'rel', ['type' => 'image/vnd.microsoft.icon']);
    $this->addHeadLink(HTMLHelper::_('image', 'joomla-favicon-pinned.svg', '', [], true, 1), 'mask-icon', 'rel', ['color' => '#000']);

Per il template Cassiopeia, Joomla cercherà le favicon nei seguenti percorsi:

1. media/templates/site/cassiopeia/images - non sono presenti qui, quindi Joomla cercherà nel percorso successivo.
2. media/system/images - sono presenti qui, quindi Joomla le utilizzerà da questa posizione.

Se desideri utilizzare le tue favicon anziché quelle di Joomla, caricale nel primo percorso: media/templates/site/cassiopeia/images. Puoi farlo utilizzando il modulo Template: personalizza. Non saranno influenzate da eventuali aggiornamenti del template Cassiopeia.

Le favicon vengono talvolta utilizzate anche a dimensioni maggiori e in luoghi diversi dalla scheda del browser. Ad esempio, questa è una schermata di parte di una pagina iniziale di Firefox che mostra alcuni dei siti preferiti dell'utente:

Tutti i browser moderni supportano le icone SVG, quindi dovresti dare priorità alla creazione di un'icona SVG.

Informazioni su SVG

SVG è l'acronimo di Scalable Vector Graphics. Un file SVG contiene testo in un formato che definisce la posizione e la forma delle linee, con colori delle linee, colori di riempimento e così via. La schermata seguente mostra il file joomla-favicon.svg aperto in un editor di testo. I numeri di riga sono generati dall'editor di testo. Non sono presenti nel file. Le righe più lunghe rappresentano curve e sono troncate qui per motivi di visualizzazione.

Per creare un file SVG è necessario usare un'applicazione appropriata come Inkscape. Le applicazioni di grafica raster come Photoshop o The GIMP non vanno bene. Se preferisci progettare un'icona in un'applicazione di grafica raster, o hai un logo raster esistente che può essere adattato per un'icona, puoi importare il file PNG risultante in Inkscape e lì vettorializzarlo per produrre un file SVG. L'immagine vettorializzata deve essere eliminata dopo la vettorializzazione!

La creazione effettiva di una favicon SVG va oltre lo scopo di questo articolo. La creazione di un file standard favicon.ico a partire da un file joomla-favicon.svg è molto semplice: ci sono moltissimi siti che lo fanno online gratuitamente.

Come creare le favicon

Se vuoi creare le tue favicon, il modo migliore è creare una favicon SVG e poi usare uno strumento online per generare tutti gli altri formati a partire da essa. In questo esempio è necessaria un'icona adatta a un template derivato chiamato Cassiopeia Green. Un'icona deve essere quadrata e non troppo elaborata, poiché la dimensione minima di visualizzazione è 16x16 pixel. Alcuni dispositivi richiedono risoluzioni più alte, come 32x32 o 180x180, e Google consiglia multipli di 48x48 pixel. Se parti da un SVG non devi preoccuparti di nulla di tutto ciò: basta creare un'immagine quasi quadrata con un design adatto. In questo esempio, la favicon sarà costituita dalle lettere J4 in verde scuro.

Inkscape

Inkscape è un'applicazione di grafica vettoriale gratuita, Open Source e multipiattaforma, usata per lavorare con i file SVG. Funziona su Linux, Mac e Windows. Vai al sito Inkscape (inkscape.org) per scaricare una copia per la tua piattaforma. Le seguenti illustrazioni mostrano la schermata di Inkscape a metà delle istruzioni seguenti.

Creare un SVG

1. Avvia Inkscape e porta la finestra a una dimensione comoda: seleziona Vista / Zoom / Adatta alla pagina
2. Seleziona lo Strumento Testo, contrassegnato dalla lettera A nella barra degli strumenti a sinistra
3. Seleziona Arial, Normale, 48 e px
4. Trascina per definire un riquadro in un punto qualsiasi della pagina
5. Digita il testo: J4
6. Seleziona Vista / Zoom sulla selezione
7. Seleziona Tracciato / Oggetto in tracciato - nessun cambiamento visibile, ma le parole non sono più testo
8. Seleziona File / Proprietà del documento
9. Seleziona Ridimensiona al contenuto
10. Rimpicciolisci per avere una visuale migliore, assicurandoti che tutte le lettere siano ancora selezionate
11. Imposta il valore dell'altezza uguale a quello della larghezza. Digitalo!
12. Chiudi la finestra di dialogo Proprietà del documento
13. Vista / Adatta alla pagina di nuovo - i caratteri devono essere centrati
14. Modifica / Seleziona tutto
15. Oggetti / Allinea e distribuisci
16. Sposta la selezione come gruppo / Relativo alla pagina / Centra sull'asse orizzontale - dovresti vedere J4 spostarsi al punto medio verticale
17. Seleziona il pannello Riempimento e contorno a destra - il pannello destro ha una lista a discesa contrassegnata da una freccia rivolta verso il basso
18. Nel pannello Riempimento e contorno, seleziona Riempimento e il primo quadrato pieno
19. Nel pannello RGB inserisci 006400ff nel campo RGBA in basso a destra - il codice per lo stile CSS darkgreen
20. File / Salva
21. Nella finestra di dialogo Salva, inserisci un nome di file adatto, ad esempio green-favicon-j4.svg
22. Seleziona un lato adatto, ad esempio ~/Documents/joomla-dev/svgs
23. Seleziona SVG ottimizzato (.svg) dalla lista a discesa in fondo al modulo.
24. Seleziona Salva
25. Seleziona OK per tutti i valori predefiniti nel modulo Optimised SVG Output
26. Chiudi l'SVG su cui stai lavorando - c'è la possibilità di salvare l'immagine in formato Inkscape ma non è realmente necessario farlo.

Modifica l'SVG con un editor di testo

Avvia il tuo editor di testo preferito per apportare alcune modifiche che non erano possibili in Inkscape.

1. Apri il file SVG appena creato - nota che la prima riga è una specifica XML
2. Puoi eliminare la seconda riga - un commento contenente Created with Inkscape
3. Se presente, puoi eliminare la riga contenente in quanto non c'è testo
4. Apri il file originale joomla-favicon.svg - si trova in joomla_root/media/system/images
5. Copia il blocco di stile e incollalo nel tuo SVG nella riga successiva all'istruzione SVG
6. Chiudi il file originale joomla-favicon-svg per evitare modifiche accidentali
7. Nel blocco di stile del tuo file SVG cambia path {fill: #000;} in path {fill: #006400;}, il valore nella riga
8. Elimina fill="#006400" dalla riga
9. Salva
10. Apri l'immagine nel tuo browser. Per Firefox è File / Apri file...

Dovresti vedere l'immagine nel tuo browser. L'esempio mostra J4 a 47 pixel quadrati. La fase successiva è creare gli altri tipi di icone necessari utilizzando come master l'SVG appena creato.

Elaborazione online

Vai al sito Real Favicon Generator. Sono disponibili altri siti ma questo sembra particolarmente completo.

1. Seleziona il pulsante etichettato Select your Favicon image
2. Il sito ti mostrerà la tua immagine master. Dice anche Your picture is not square (688x512). We can fix this by adding transparent margins
3. Seleziona il pulsante Continue with this picture sotto l'immagine master.
4. Ci sono sottomoduli con sfondo azzurro chiaro per diversi tipi di icone - compila ciascuno controllando che l'anteprima sia di tuo gradimento.
5. È meglio attenersi ai valori predefiniti delle Favicon Generator Options a meno che tu non sappia qualcosa di meglio. Tranne:
6. Path, seleziona l'opzione I cannot ... e inserisci: media/templates/site/cassiopeia-green/images
7. Seleziona il pulsante Generate your Favicons and HTML Code
8. Dopo una breve attesa, appare un nuovo modulo, seleziona il pulsante Download your package: Favicon
9. Salva il download ...
10. Seleziona e copia il blocco di link da salvare da qualche parte.
11. Chiudi il sito di elaborazione online

Il download è un file zip contenente 10 elementi: favicon.ico, safari-pinned-tab.svg, sei file PNG, browserconfig.xml e site.webmanifest.

Distribuzione

Per utilizzare l'insieme standard delle favicon di Joomla devi rinominare e spostare le icone in joomla_root/media/templates/site/yourtemplate/images:

• La tua immagine SVG master, green-favicon-j4.svg, deve essere rinominata in joomla-favicon.svg
• Il file safari-pinned-tab.svg scaricato deve essere rinominato in joomla-favicon-pinned.svg
• Il file favicon.ico scaricato deve solo essere spostato

Il blocco di link

Il blocco di link copiato in precedenza contiene:

<link rel="apple-touch-icon" sizes="180x180" href="/media/templates/site/cassiopeia-green/images/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/media/templates/site/cassiopeia-green/images/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/media/templates/site/cassiopeia-green/images/favicon-16x16.png">
<link rel="manifest" href="/media/templates/site/cassiopeia-green/images/site.webmanifest">
<link rel="mask-icon" href="/media/templates/site/cassiopeia-green/images/safari-pinned-tab.svg" color="#5bbad5">
<link rel="shortcut icon" href="/media/templates/site/cassiopeia-green/images/favicon.ico">
<meta name="msapplication-TileColor" content="#ffc40d">
<meta name="msapplication-config" content="media/templates/site/cassiopeia-green/images/browserconfig.xml">
<meta name="theme-color" content="#ffffff">

Probabilmente non avrai bisogno di utilizzarlo!