Favicon HTML
Una favicon è una piccola immagine visualizzata accanto al titolo della pagina nella scheda del browser.
Come aggiungere una favicon in HTML
Puoi usare qualsiasi immagine che ti piace come favicon. Puoi anche creare la tua favicon su siti come https://favicon.cc .
Suggerimento: una favicon è una piccola immagine, quindi dovrebbe essere un'immagine semplice con un contrasto elevato.
Un'immagine favicon viene visualizzata a sinistra del titolo della pagina nella scheda del browser, in questo modo:
Per aggiungere una favicon al tuo sito web, salva l'immagine della favicon nella directory principale del tuo server web o crea una cartella nella directory principale chiamata images e salva l'immagine della favicon in questa cartella. Un nome comune per un'immagine favicon è "favicon.ico".
Quindi, aggiungi un <link>
elemento al tuo file "index.html", dopo l' <title>
elemento, in questo modo:
Esempio
<!DOCTYPE html>
<html>
<head>
<title>My Page
Title</title>
<link rel="icon" type="image/x-icon" href="/images/favicon.ico">
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Ora salva il file "index.html" e ricaricalo nel tuo browser. La scheda del browser dovrebbe ora visualizzare l'immagine della favicon a sinistra del titolo della pagina.
Supporto per il formato file Favicon
La tabella seguente mostra il supporto del formato file per un'immagine favicon:
Browser | ICO | PNG | GIF | JPEG | SVG |
---|---|---|---|---|---|
Edge | Yes | Yes | Yes | Yes | Yes |
Chrome | Yes | Yes | Yes | Yes | Yes |
Firefox | Yes | Yes | Yes | Yes | Yes |
Opera | Yes | Yes | Yes | Yes | Yes |
Safari | Yes | Yes | Yes | Yes | Yes |
Riassunto capitolo
- Usa l'elemento HTML
<link>
per inserire una favicon
Tag di collegamento HTML
Tag | Description |
---|---|
<link> | Defines the relationship between a document and an external resource |
Per un elenco completo di tutti i tag HTML disponibili, visita il nostro Riferimento ai tag HTML .