Come inserisco il logo del mio sito web come immagine dell'icona nelle schede del browser?


Risposte:


177

Quell'immagine si chiama " favicon " ed è un piccolo .icofile di forma quadrata , che è il tipo di file standard per le favicon. Potresti usare .pngo .gifanche, ma dovresti seguire lo standard per una migliore compatibilità.

Per impostarne uno per il tuo sito web dovresti:

  1. Crea un'immagine quadrata del tuo logo (preferibilmente 32x32 o 16x16 pixel, per quanto ne so non c'è una dimensione massima *) e trasformalo in un .icofile. Puoi farlo su Gimp, Photoshop (con l'aiuto di un plugin ) o un sito web come Favicon.cc o RealFaviconGenerator .

  2. Quindi, hai due modi per configurarlo:

    A) Posizionandolo nella cartella / directory principale del tuo sito web (accanto a index.html) con il nome favicon.ico.

    o

    B) Collegalo tra i <head></head>tag di ogni .htmlfile sul tuo sito, in questo modo:

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

Se vuoi vedere il faviconda qualsiasi sito web, scrivi www.url.com/favicon.icoe lo vedrai (probabilmente). La favicon di Stackoverflow è 16x16 pixel e Wikipedia è 32x32.

*: C'è anche un problema con il browser senza limiti di dimensione del file. Potresti facilmente bloccare un browser con una favicon estremamente grande, maggiori informazioni qui


18

Si chiama " favicon " e devi aggiungere il codice seguente alla sezione dell'intestazione del tuo sito web.

Aggiungilo semplicemente alla <head>sezione.

<link rel="icon" href="/your_path_to_image/favicon.jpg">

8

Questa è la favicon ed è spiegata nel link.

ad esempio da W3C

  <link rel="icon" 
     type="image/png" 
     href="http://example.com/myicon.png">

Inoltre, ovviamente, il file immagine nel posto appropriato.


2
<link rel="apple-touch-icon" sizes="114x114" href="${resource(dir: 'images', file: 
'apple-touch-icon-retina.png')}">

oppure puoi usare questo

<link rel="shortcut icon" sizes="114x114" href="${resource(dir: 'images', file: 'favicon.ico')}"
type="image/x-icon">

apple-touch-icon è per iOS webApps
LasagnaAndroid

1

Aggiungi un file icona denominato "favicon.ico" alla radice del tuo sito web.


Ricorda che deve essere esattamente 16x16 px.
uınbɐɥs

3
No, deve essere di forma quadrata e di qualsiasi dimensione, ci vorrà solo più tempo per caricarlo
LasagnaAndroid
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.