Come creare favicon adatte a sistemi operativi e browser diversi

La favicon è la piccola icona che identifica il sito, non è semplice tenere conto di tutte le diverse risoluzioni, browser e sistemi operativi visto che ogni sistema ha delle particolarità da rispettare. Vediamo come preparare al meglio il set di icone per il nostro sito Joomla.




Cos'è una favicon?

Favicon è la contrazione del termine inglese favorite icon e indica la piccola icona che identifica il sito e che appare nella tab del browser vicino al titolo della pagina.



Perché occorre creare un set di favicon?

Se ti occupi di web design sai che non è semplice tenere conto di tutte le diverse risoluzioni, browser e sistemi operativi visto che ogni sistema ha delle particolarità da rispettare (risoluzione, dimensione, colori...). Per questo una sola favicon non basta.

Recentemente ho trovato la risposta alla maggior parte delle difficoltà che si incontrano nella realizzazione di favicon per siti e applicazioni web. La soluzione è il tool online: http://realfavicongenerator.net/


Come si usa Real Favicon generator?

Per creare il set di favicon dobbiamo innanzitutto preparare un’immagine facendo attenzione che sia adatta ad essere visualizzata molto piccola.

L’immagine deve essere almeno 70x70px; 260x260px per un miglior risultato.

Utilizziamo il bottone [Select your favicon picture] per scegliere l’immagine di partenza dal proprio PC; il software si mette al lavoro proponendoci di personalizzare la sua elaborazione nelle seguenti sezioni:
  • Favicon for iOS - Web Clip
  • Favicon for Android Chrome
  • Windows Metro (Windows 8 e 10)
  • macOS Safari
Ogni sezione ha una comoda anteprima a sinistra e opzioni specifiche:
  • modifica del colore di sfondo
  • aggiustamento del margine
  • caricamento di un’immagine alternativa se l'immagine generata dal software non ci soddisfa.
Quando abbiamo finito le personalizzazioni utilizziamo il bottone in fondo alla pagina [Generate your favicons and HTML code]. La sezione che ci interessa per Joomla è subito disponibile nella prima Tab HTML5.

Clicchiamo sul bottone [favicon Package] per salvare il pacchetto con tutte le icone, che dovrà essere scompattato nella cartella principale del sito.

Poi copiamo il codice e lo inseriamo nella sezione <head> del sito. La posizione di questa porzione di codice varia in base al tema ma solitamente è in templates/MioTEMPLATE/index.php

 


CommentaCommenta questo articolo sul forum