Esercitazione HTML

HTML HOME Introduzione all'HTML Editor HTML HTML di base Elementi HTML Attributi HTML Intestazioni HTML Paragrafi HTML Stili HTML Formattazione HTML Citazioni HTML Commenti HTML Colori HTML CSS HTML Collegamenti HTML Immagini HTML Favicon HTML Tabelle HTML Elenchi HTML Blocco HTML e in linea Classi HTML ID HTML Iframe HTML JavaScript HTML Percorsi di file HTML Testa HTML Layout HTML HTML reattivo Codice informatico HTML Semantica HTML Guida allo stile HTML Entità HTML Simboli HTML Emoji HTML Set di caratteri HTML Codifica URL HTML HTML e XHTML

Moduli HTML

Moduli HTML Attributi del modulo HTML Elementi del modulo HTML Tipi di input HTML Attributi di input HTML Attributi del modulo di input HTML

Grafica HTML

Tela HTML HTML SVG

Supporto HTML

Supporto HTML Video HTML Audio HTML Plug-in HTML YouTube HTML

API HTML

Geolocalizzazione HTML Trascina/rilascia HTML Archiviazione Web HTML Lavoratori Web HTML HTML SSE

Esempi HTML

Esempi HTML Quiz HTML Esercizi HTML Certificato HTML Riepilogo HTML Accessibilità HTML

Riferimenti HTML

Elenco tag HTML Attributi HTML Attributi globali HTML Supporto browser HTML Eventi HTML Colori HTML Tela HTML Audio/video HTML Tipi di documenti HTML Set di caratteri HTML Codifica URL HTML Codici HTML Lang Messaggi HTTP Metodi HTTP Convertitore da PX a EM Tasti rapidi

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:

Esempio di favicon

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 .