Wikipedia risponde meglio a questa domanda:

Favicon(abbreviato dall'inglese FAVorites ICON - "icona per i preferiti", dal nome della cartella dei segnalibri in MSIE) - un'icona per un sito web o una pagina web. Viene visualizzato dal browser nella barra degli indirizzi prima dell'URL della pagina, nonché come immagine accanto al segnalibro, nelle schede e in altri elementi dell'interfaccia.

Ecco un esempio di visualizzazione delle favicon in browser di Google Cromo:

Vorrei anche attirare l'attenzione su un'altra importante area di utilizzo delle favicon: nell'emissione di alcune motori di ricerca, cataloghi e servizi di social bookmarking:

Tradizionalmente si utilizzavano immagini di dimensione 16×16 pixel in formato ICO, collocate nella root del sito sotto il nome favicon.ico.

Tutto browser moderni comprendere l'indicazione esplicita della posizione dell'icona nel codice (X)HTML (all'interno di un elemento ), che permette, in assenza di /favicon.ico, di utilizzare un'icona diversa per ogni pagina: , Dove:

Pertanto non dovrebbe essere esagerato. Conclusione: esistono molti modi per ottimizzare le pagine. Non tutti sono necessari. Ma da questo elenco di misure è possibile ricavare per quasi ogni sito la giusta opzione di ottimizzazione. Puoi testare la velocità della pagina lungo il percorso.

Icona standard e vari tipi e dimensioni di file

La mancanza di questo file non ha conseguenze importanti e la pagina Web può essere visualizzata anche senza il file. Il nome del file deriva dai preferiti e dall'icona. Inoltre, l'icona appare nelle voci del tuo browser preferito. Ciò semplifica l'evidenziazione delle voci. Potrebbero essere fornite icone aggiuntive. Dovrebbero spesso differire dal formato e dal formato del file e dovrebbero essere denominati in modo diverso. La varietà di dispositivi e sistemi è aumentata a tal punto che un'icona standard di piccole dimensioni non è più sufficiente.

• rel può anche contenere una "icona di collegamento" (Microsoft Internet Explorer risponderà alla stringa "icona di collegamento" e i browser conformi agli standard alla parola "icona")


• href contiene un URI assoluto o relativo al file (in MozillaFirefox 3.0, ad esempio, supporta gli stessi URI del tag img).


• Il formato del file può essere png o gif, di dimensioni 16x16 o 32x32 e con profondità di colore a 8 o 24 bit (in Mozilla Firefox, ad esempio, può essere non solo questo, ma anche come il tag img). In questo caso, l'attributo type deve contenere il tipo MIME del formato (ad esempio, image/png per PNG). Se Internet Explorer utilizza il formato ICO, il suo tipo MIME dovrebbe essere image/vnd.microsoft.icon. Il tipo image/x-icon è stato deprecato nel 2003 dopo che il tipo è stato standardizzato per le ICO.

È possibile specificare più immagini in formati diversi- ad esempio, una riga con un'icona di collegamento e un'icona in Formato ICO per Internet Explorer, e una riga con un'icona e un'icona in formato GIF o PNG per i browser alternativi.

Seconda parte. Come dovrebbe essere una favicon?

Quindi, abbiamo capito cosa sono le favicon e dove vengono utilizzate. Ora come dovrebbe essere una buona favicon.

1. È ovvio che favicon- è una specie di biglietto da visita, quindi deve essere eseguito nello stesso stile del sito. Più il sito e la favicon sono comuni, meglio è. Quando si sviluppa una favicon, è consigliabile utilizzare i colori e gli elementi di design del sito web o del logo corrispondente. La favicon deve essere associata al sito: questa è la sua funzione principale.

Creazione di un'icona predefinita

È possibile selezionare uno dei tre seguenti per il tipo di file. I browser solitamente chiamano il file automaticamente quando accedi a una pagina web dalla directory principale. Si evitano conflitti con alcuni browser che dovrebbero essere visualizzati con un'icona diversa. I valori possibili sono:

Pertanto è necessario considerare molte costellazioni. Ecco alcune possibilità. Questa è l'opzione consigliata. Questo non è raccomandato. Tuttavia, a volte ciò potrebbe essere richiesto, ad esempio il codice di esempio per entrambe le voci sarebbe il seguente. Questa è una costellazione molto sfavorevole.

2. Favicon deve essere facile da capire: l'utente dovrebbe capire subito cosa è disegnato sulla favicon. Non dovresti cercare di inserire un’immagine intera nella favicon: bastano uno o due elementi riconoscibili.

3. Puoi visualizzare un'icona del tema del sito sulla favicon (ad esempio, un numero di telefono per un negozio di telefonia online), ma solo se questa icona descrive completamente il sito (non dovresti visualizzarla sulla favicon di un negozio di articoli per la casa) negozio lavatrice, se vendono anche ferri da stiro e aspirapolvere).

Quando l'utente aggiunge una pagina Web alla superficie del riquadro, verrà visualizzato uno snippet della pagina Web. Quindi il codice può essere esteso come segue. Come puoi vedere, fornire un'icona standard può comportare molte incertezze.

Rimpicciolisci l'immagine originale o usa una matita

La sfida quando si crea un'icona standard è usarla o svilupparla argomento adatto per un sito web che abbia un bell'aspetto anche con una dimensione dell'immagine molto piccola. Esistono due metodi. Quando usi una matita, dovresti attivare la funzione di zoom in modo che i pixel siano chiaramente visibili. Questo potrebbe funzionare con alcuni browser.

4. È molto desiderabile rendere le favicon memorabili, quindi sarebbe meglio utilizzare immagini familiari all'utente, che può chiamare con qualche parola (la favicon di LJ, ad esempio, è "Matita").

Discuti l'articolo nel mio LiveJournal.