Kuinka lisätä verkkosivuston ikoni HTML:ään

Opi lisäämään verkkosivuston ikoni HTML:ään (Favicon).

Kuinka lisätä verkkosivuston ikoni HTML:ään

Verkkosivuston ikoni (favicon) on pieni kuva, joka näkyy selaimen välilehdessä sivun otsikon viereisessä.

Voit käyttää mitä tahansa mieleisesi kuvaa verkkosivustosi ikonina. Voit myös luoda oman verkkosivustosi ikonin esimerkiksi sivustolla https://favicon.cc.

Vinkki:Verkkosivuston ikoni on pieni kuva, joten sen tulisi olla korkeakontrastinen ja yksinkertainen kuva.

Verkkosivuston ikoni kuvanäyttö selaimen välilehdessä sivun otsikon vasemmalla puolella näyttää tältä:

网站图标的例子

Lisääksesi verkkosivustosi ikonin, tallenna verkkosivustosi ikoni kuvana Web-palvelimen juurikansioon tai luo juurikansioon nimeltä images ja tallenna verkkosivustosi ikoni kuvana tähän kansioon. Verkkosivuston ikonin kuvan yleinen nimi on "favicon.ico".

Seuraavaksi, lisää "index.html"-tiedoston <title> lisätä elementin jälkeen <link> Elementit, kuten seuraavassa näytetään:

<!DOCTYPE html>
<html>
<head>
  <title>Minun sivuni otsikko</title>
  <link rel="icon" type="image/x-icon" href="/images/favicon.ico">
</head>
<body>
<h1>Tämä on otsikko</h1>
<p>Tämä on kappale.</p>
</body>
</html>

Kokeile itse

Nyt tallenna "index.html"-tiedosto ja lataa se uudelleen selaimessa. Selaimen välilehdessä pitäisi nyt näkyä verkkosivustosi ikoni sivun otsikon vasemmalla puolella.