Creazione di una favicon [chiusa]

95

Come posso creare una favicon per il mio sito web?

html  favicon 
— Ry-
fonte
1
— Michał Perłakowski
@ Gothdo Questo non è un duplicato! Quello a cui indichi È! Questo ha preceduto quello di un anno e mezzo!
— Dov Miller
5
Voto per chiudere questa domanda come fuori tema perché non si tratta di programmazione ma di web design.
— Kyll
@DovMiller La domanda migliore con le risposte migliori è quella che dovrebbe rimanere aperta.
— mbomb007

Risposte:

100

Cercando le favicon, ho scoperto che avevo bisogno di più di 10 tipi di file per funzionare in tutti i browser e dispositivi :(

Mi sono incazzato e ho creato il mio generatore di favicon, che crea tutti questi file e l'intestazione HTML corretta per ognuno di essi: faviconit.com

Spero ti sia piaciuto.

— Eduardo Russo
fonte
14
Ottima app. Questo è uno dei migliori siti di generatore di favicon che abbia mai visto.
— Chris Livdahl
1
Grazie, Chris! Sono felice di aiutarti!
— Eduardo Russo
3
@EduardoRusso questo è semplicemente fantastico - grazie!
— davnicwil
4
Buon lavoro. Funziona come previsto.
— Dilshan
1
Funziona meglio del previsto! Tiny bug (?): Quando si utilizza advanced, il percorso e la versione non sono inclusi nel browserconfig.xml. Comunque lo adoro ancora. : D
— mrjink
42

Se hai già un'immagine del logo che desideri trasformare in una favicon, puoi convertirla utilizzando http://www.favicomatic.com/ . Crea favicon nitide e non ho dovuto modificarle dopo averle create. Genererà favicon a 16x16 e 32x32 e per citarle: "Ogni dannata dimensione, signore!". Il sito supporta / preserva anche la trasparenza presente in alcuni png. Inoltre, il loro sito ha un bell'aspetto ed è facile da usare.

Ad esempio, ecco un logo stackoverflow: inserisci qui la descrizione dell'immagine

Ecco alcune delle favicon generate:

inserisci qui la descrizione dell'immagine inserisci qui la descrizione dell'immagine inserisci qui la descrizione dell'immagine inserisci qui la descrizione dell'immagine inserisci qui la descrizione dell'immagine

Generano anche l'html necessario:

<link rel="apple-touch-icon-precomposed" sizes="57x57" href="apple-touch-icon-57x57.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-icon-114x114.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="apple-touch-icon-144x144.png" />
<link rel="apple-touch-icon-precomposed" sizes="60x60" href="apple-touch-icon-60x60.png" />
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="apple-touch-icon-120x120.png" />
<link rel="apple-touch-icon-precomposed" sizes="76x76" href="apple-touch-icon-76x76.png" />
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="apple-touch-icon-152x152.png" />
<link rel="icon" type="image/png" href="favicon-196x196.png" sizes="196x196" />
<link rel="icon" type="image/png" href="favicon-96x96.png" sizes="96x96" />
<link rel="icon" type="image/png" href="favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="favicon-16x16.png" sizes="16x16" />
<link rel="icon" type="image/png" href="favicon-128.png" sizes="128x128" />
<meta name="application-name" content="&nbsp;"/>
<meta name="msapplication-TileColor" content="#FFFFFF" />
<meta name="msapplication-TileImage" content="mstile-144x144.png" />
<meta name="msapplication-square70x70logo" content="mstile-70x70.png" />
<meta name="msapplication-square150x150logo" content="mstile-150x150.png" />
<meta name="msapplication-wide310x150logo" content="mstile-310x150.png" />
<meta name="msapplication-square310x310logo" content="mstile-310x310.png" />

Ho guardato i primi 20 risultati di Google e questo è stato di gran lunga il migliore.

— Jared Menard
fonte
1
Come posso migliorare questa risposta per evitare ulteriori downvote?
— Jared Menard
3
Non lo so. La tua risposta ha reso questo lavoro di cinque minuti per me. Grazie.
— andyb
1
ad alcune persone piace semplicemente downvote senza motivo. Così ha bisogno di avere una politica contro di essa. A proposito, abbiamo davvero bisogno di molte dimensioni diverse o noi 16x16 e 32x32 sono appena sufficienti per generare il sito web
— batmaci
Personalmente non so quale sia la migliore pratica qui. Sul mio sito penso che ne usiamo solo uno. Questi potrebbero essere utili per le app Web Chrome progressive se combinati con manifest.json.
— Jared Menard
Ho trovato questa risorsa su favicomatic.com , si chiama "Favicon Cheat Sheet" github.com/audreyr/favicon-cheat-sheet
— Jared Menard
20

GIMP è un buon programma per questo. Basta salvare l'immagine come PNG, quindi aggiungere

 <link rel="SHORTCUT ICON" HREF="/favicon.png">

nella <HEAD>sezione della tua pagina.

— Stefano Borini
fonte
7
Gimp offre anche la possibilità di salvarlo come favicon.ico, il che eviterebbe la fatica di aggiungere il collegamento.
4
Peccato che i vecchi MSIE (che sono ancora abbastanza popolari) non accetteranno il PNG al posto di un "corretto" file ICO formattato.
— Már Örlygsson
Per aggiungere siti Web alla barra delle applicazioni, anche Windows richiede un ico.
— Necriis
8

Crei un file icona 16 x 16, 32 x 32 o 64 x 64. Chiamalo favicon.ico e posizionalo nella radice della cartella pubblica del tuo sito web.

Ci sono siti web che convertiranno altri formati grafici in .ico per te. cioè. http://tools.dynamicdrive.com/favicon/

— Jim
fonte
4
Inoltre: puoi salvare il tuo file favicon ovunque se aggiungi un <link rel="shortcut icon" href="link/to/fav.ico" />al <head>blocco delle tue pagine.
— Már Örlygsson
1
tools.dynamicdrive.com/favicon ti consentirà anche di unire più dimensioni in un favico, il che è fantastico
— hdorio
3

Se vuoi creare file .ico, puoi anche usare GIMP per creare favicon. I browser moderni possono utilizzare normali file immagine, ma in origine penso che fossero solo file .ico. È un editor di immagini open source simile a Photoshop. Crea e modifica un'immagine della giusta dimensione (diciamo 32 x 32), appiattiscila su un livello (a meno che tu non voglia più icone nello stesso file) e salva come .ico. Lo formatterà correttamente, quindi utilizzerà quello di Stefano <link rel="SHORTCUT ICON" HREF="/favicon.ico">per usarlo nella tua pagina web.

— rocketmonkeys
fonte
3

Uso il programma open source Paint.net insieme al plugin Icon .

È quindi possibile creare e salvare un'immagine nel formato .ico con tutte le diverse dimensioni incorporate nel file .ico.

— Matthew Lock
fonte
Hmm, paint.net.amihotornot.com.au come host per il plugin Icon? È legittimo?
— RonaldB
@RonaldB sì, è la casa di quel plugin. Strano dominio non è vero
— Matthew Lock
2

Quando crei una favicon, devi tenere in considerazione i seguenti fattori:

  • Piattaforme supportate Dieci anni fa volevi supportare solo i browser desktop e la soluzione era generare l' favicon.icoimmagine classica . Al giorno d'oggi, vuoi supportare iOS (e iOS Safari) e Android (e Android Chrome). Forse anche Windows 10 (e Edge) e la nuova Touch Bar di Mac Book Pro (macOS Safari). Non puoi più usare una sola immagine "taglia unica".
  • Progettazione Non appena si supportano più piattaforme, si devono affrontare più linee guida di progettazione. Ad esempio, Google utilizza icone trasparenti per le proprie app native su Android, mentre le icone iOS non possono essere affatto trasparenti. Non è possibile utilizzare semplicemente un approccio "design unico per tutti".
  • Icone generate e codice HTML Per due o tre anni, il riferimento è stato quello di generare quante più icone possibili per coprire tutti i casi. Temo di aver creato questa tendenza tutto da solo: - / Il problema è che ti ritroverai con 20 righe o HTML, che è davvero troppo. Per avere una soluzione tecnica soddisfacente, è necessario bilanciare la quantità di icone / HTML generate e le piattaforme supportate.

Come al solito, puoi creare tutte queste risorse manualmente. A meno che tu non abbia esigenze molto, molto specifiche e un budget, questa non è sicuramente la strada da percorrere.

Il modo giusto per la maggior parte delle persone è utilizzare un generatore di favicon che ti consente di decidere l'aspetto di tutte le icone e si prende cura di tutti i dettagli. L'unico che lo fa è Real Favicon Generator . Informativa completa: sono l'autore di questo sito.

— philippe_b
fonte
1

E se stai usando asp.net prova in questo modo per applicare la favicon alla tua pagina:

<link runat="server" rel="shortcut icon" href="~/favicon.ico" type="image/x-icon" />
<link runat="server" rel="icon" href="~/favicon.ico" type="image/ico" />

ma puoi trovare maggiori informazioni qui: http://doctype.com/

— Tarik
fonte
1
Come nota, doctype.com è stato chiuso il 15 febbraio 2013. Ulteriori informazioni a riguardo .
— Krease
1

Realizzo le mie favicon 16 x 16 o 32 x 32 usando Photoshop. Poi lo salvo come gif e utilizzo IrfanView per convertire la gif in ico.

— Max
fonte
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.