PricingLoginStart free
HTML Academy · Oppitunti

Favicon ja Apple Touch Icon

Lisää kuvakkeet, jotka näkyvät selaimen välilehdissä ja aloitusnäytöissä

Oppitunti 4/413 vaihetta

Favicon ja Apple Touch Icon on ilmainen HTML Academy-oppitunti CoddyKitissä. Tämä on oppitunti 4/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu HTML Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. HTML Academy-kurssilla on yhteensä 4 oppituntia.

Mikä favicon on

favicon on pieni kuvake, joka näkyy seuraavissa paikoissa:

  • Selaimen välilehdet
  • Kirjanmerkkiluettelot
  • Selaushistoria
  • Hakutulokset (joskus)

Se auttaa käyttäjiä tunnistamaan sivustosi yhdellä silmäyksellä useiden avointen välilehtien joukosta.

Favicon-linkin perusteet

Lisää favicon head-osioon link-elementillä:

<head>
  <!-- SVG favicon (modern, scales at any size) -->
  <link rel="icon" type="image/svg+xml" href="/favicon.svg">

  <!-- PNG fallback -->
  <link rel="icon" type="image/png" href="/favicon.png">

  <!-- Legacy ICO for Internet Explorer -->
  <link rel="shortcut icon" href="/favicon.ico">
</head>

Favicon-muodot

Suositeltu strategia favicon-muodoille:

  • SVG — vektorimuoto, skaalautuu täydellisesti ja tiedostokoko on pieni (käytä ensimmäisenä)
  • PNG 32x32 — varavaihtoehto selaimille, jotka eivät tue SVG:tä
  • ICO — vanha muoto, joka sisältää 16x16- ja 32x32-koot

ICO-tiedoston sijoittaminen

Verkkotunnuksen juurihakemistossa oleva favicon.ico-tiedosto haetaan automaattisesti:

<!-- Browsers request /favicon.ico automatically -->
<!-- Placing it at the domain root means no link tag is needed:
/favicon.ico  -- served without any HTML link tag
-->
<!-- But: specifying it explicitly is better: -->
<link rel="icon" href="/favicon.ico" sizes="32x32">

sizes-attribuutti

sizes-attribuutti määrittää kuvakkeen mitat:

<link rel="icon" href="/icon-16.png" sizes="16x16">
<link rel="icon" href="/icon-32.png" sizes="32x32">
<link rel="icon" href="/icon-64.png" sizes="64x64">

Apple Touch Icon

Apple Touch Icon näkyy, kun käyttäjät lisäävät sivustosi iOS:n aloitusnäyttöön:

<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<!-- Recommended size: 180x180 px -->
<!-- Used by: iOS Safari, some Android browsers -->
<!-- Apple applies rounded corners and gloss effect automatically -->
<!-- Pre-composited icon (no transparency) looks best -->

Androidin maskable-kuvakkeet

Androidin PWA-sovellukset käyttävät maskable-kuvakkeita, jotka täyttävät kuvakkeen muodon:

<link rel="manifest" href="/manifest.json">

<!-- In manifest.json: -->
<!--
{
  "icons": [
    {
      "src": "/icon-192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any maskable"
    }
  ]
}
-->

Tumman tilan favicon

Tarjoa tumman tilan huomioiva SVG-favicon:

<!-- SVG favicon with dark mode support: -->
<!-- In /favicon.svg: -->
<!--
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    @media (prefers-color-scheme: dark) {
      .icon-bg { fill: white; }
      .icon-mark { fill: black; }
    }
    .icon-bg { fill: #0070f3; }
    .icon-mark { fill: white; }
  </style>
  <circle class="icon-bg" cx="16" cy="16" r="16"/>
  <text class="icon-mark" x="50%" y="60%">C</text>
</svg>
-->

Web App Manifest PWA-kuvakkeille

Progressive Web Apps -sovellusten täydellinen kuvakekokoonpano:

<link rel="manifest" href="/manifest.json">

<!-- manifest.json icons array: -->
<!--
"icons": [
  { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
  { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
]
-->

Faviconin täydellinen määritys

Täydellinen moderni favicon-määritys:

<head>
  <!-- SVG: scales to any size, supports dark mode -->
  <link rel="icon" type="image/svg+xml" href="/favicon.svg">
  <!-- PNG fallback -->
  <link rel="icon" type="image/png" href="/favicon-32.png" sizes="32x32">
  <!-- Apple home screen -->
  <link rel="apple-touch-icon" href="/apple-touch-icon.png">
  <!-- PWA manifest (for Android home screen) -->
  <link rel="manifest" href="/manifest.json">
</head>

Faviconien testaaminen

Favicon-määrityksen tarkistaminen:

  • Lataa sivu uudelleen välimuisti ohittaen (Ctrl+Shift+R / Cmd+Shift+R), jotta välimuistissa oleva favicon poistetaan
  • Käytä Favicon Checker -työkalua (realfavicongenerator.net)
  • Testaa Apple Touch Icon oikealla iOS-laitteella
  • Tarkista PWA-manifesti Lighthousella → PWA-auditointi

Pikatarkistus

Mikä on Apple Touch Icon -kuvakkeiden suositeltu koko?

Vastaa interaktiivisessa oppitunnissa

Kertaus: faviconit

Faviconien perusteet:

  • SVG-favicon — moderni, skaalautuva ja tumman tilan huomioiva
  • PNG 32x32 — varavaihtoehto selaimille, jotka eivät tue SVG:tä
  • ICO juurihakemistossa — vanhan IE:n varavaihtoehto
  • apple-touch-icon 180×180 — iOS:n aloitusnäyttö
  • Web App Manifest — Androidin PWA-kuvakkeet (192px ja 512px)
Aloita maksutta

Opi HTML tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit
40
Oppitunnit
159
Aloita opiskelu maksuttaNäytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Favicon ja Apple Touch Icon” ilmainen?

Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa HTML Academy-oppimispolun 3 oppituntia, myös oppitunnin “Favicon ja Apple Touch Icon”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. HTML Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”Favicon ja Apple Touch Icon”?

Lisää kuvakkeet, jotka näkyvät selaimen välilehdissä ja aloitusnäytöissä Harjoittelet HTML Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni HTML Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin HTML Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 4/4.

Kuinka kauan ”Favicon ja Apple Touch Icon”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä HTML Academy-oppitunnilla?

Kyllä. Jokainen HTML Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

  1. title-elementti ja sen merkitys SEO:ssa
  2. meta charset, viewport, author ja description
  3. Canonical-URL-osoitteet ja robots-meta
  4. Favicon ja Apple Touch Icon
← Takaisin: HTML Academy