L'immagine accanto al titolo della pagina nella scheda del browser: come puoi collegare un'immagine qui?
L'immagine accanto al titolo della pagina nella scheda del browser: come puoi collegare un'immagine qui?
Risposte:
Quell'immagine si chiama " favicon " ed è un piccolo .ico
file di forma quadrata , che è il tipo di file standard per le favicon. Potresti usare .png
o .gif
anche, ma dovresti seguire lo standard per una migliore compatibilità.
Per impostarne uno per il tuo sito web dovresti:
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 .ico
file. Puoi farlo su Gimp, Photoshop (con l'aiuto di un plugin ) o un sito web come Favicon.cc o RealFaviconGenerator .
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 .html
file sul tuo sito, in questo modo:
<head>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
</head>
Se vuoi vedere il favicon
da qualsiasi sito web, scrivi www.url.com/favicon.ico
e 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
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">
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.
<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">
Aggiungi un file icona denominato "favicon.ico" alla radice del tuo sito web.
16x16
px.