Favicon-ikonin lisääminen

Tarvittavat ohjelmistot

Tässä työssä tarvitaan

• verkkoselain (esim. Edge)
• FTP-ohjelma (esim. Filezilla)

Toteutusohjeet (vaihe 1)

• Kirjaudu verkkokaupan hallintaliittymään (demo).
• Klikkaa ylhäältä asetukset / koodit ja ulkoasu.
• Klikkaa Lisää uusi -painiketta.
• Valitse Tyyppi-kohdasta "Kuva".
• Syötä Nimi-kohtaan "Favicon" tai mitä tahansa.
• Klikkaa Kuva-kohdassa olevaa sinistä kuvaketta ja valitse png-, jpg-, gif- tai svg-kuvatiedosto tietokoneeltasi.
  - Jos olet käyttänyt favicon-generaattoria, niin sinulla on todennäköisesti tietokoneellasi yksi ico-kuvatiedosto ja useita png-kuvatiedostoja.
- Jätä kuitenkin se ico-kuvatiedosto valitsematta.
• Klikkaa Tallenna-painiketta.
  - Toista tämä jokaiselle kuvatiedostolle.

Toteutusohjeet (vaihe 2)

• Kirjaudu verkkokaupan hallintaliittymään (demo).
• Klikkaa ylhäältä asetukset / koodit ja ulkoasu.
• Valitse Tyyppi-kohdasta "HTML5".
• Syötä Nimi-kohtaan "Favicon" tai mitä tahansa.
• Valitse Sijainti-kohdasta "Verkkokaupassa </head> ennen".
• Lisää Koodi-kohtaan Favicon-ikonin html-koodi, esimerkki:
  

  <link rel="apple-touch-icon" sizes="180x180" href="https://www.example.com/graphics/codes/favicon_180x180_68facd23.png">
  <link rel="icon" type="image/png" sizes="512x512" href="https://www.example.com/graphics/codes/favicon_512x512_14a8f4cf.png">
  <link rel="icon" type="image/png" sizes="192x192" href="https://www.example.com/graphics/codes/favicon_192x192_8bf5e07e.png">
  <link rel="icon" type="image/png" sizes="32x32" href="https://www.example.com/graphics/codes/favicon_32x32_68facd23.png">
  <link rel="icon" type="image/png" sizes="16x16" href="https://www.example.com/graphics/codes/favicon_16x16_69e7b168.png">
  

  - Jos olet käyttänyt favicon-generaattoria, niin sinulla on tietokoneellasi tämänkaltainen html-koodi. Voit poistaa siitä rivin, jossa on kuvatiedosto, jonka tiedostotunniste on ico, esim. rivin, jossa on favicon.ico.
  - Vaihda html-koodissa olevat kuvatiedostojen URL-osoitteet oikeaksi. URL-osoitteessa olevan verkkotunnuksen tiedät. Kuvatiedostojen polut ja tiedostonimet näet kuvakorteista, jotka lisäsit vaiheessa 1.
• Klikkaa Tallenna-painiketta.

Hyvä tietää

Jos nämä ohjeet tuntuvat vaikeilta, niin ajattele yksinkertaisemmin. Sinun on ainoastaan 1) ladattava (upload) kuvatiedostot verkkokaupan hallintaliittymän asetukset / koodit ja ulkoasu -kohdan kautta ja 2) lisättävä faviconeiden html-koodi verkkokaupan hallintaliittymän asetukset / koodit ja ulkoasu -kohdan kautta. Tällä sivulla on turhankin tarkasti ns. kädestä pitäen ohjeistettu verkkokaupan hallintaliittymän käyttämistä, mikä saattaa harhauttaa ajatuksia.

Tärkeää

Selaimet tallentavat favicon-ikonit välimuistiin, eikä niiden kannata tarkistaa uutta ikonia jatkuvasti, koska ikoni vaihtuu yleensä vain kerran vuodessa tai harvemmin. Siksi uusi ikoni ei välttämättä näy, vaikka tiedostonimi olisi vaihtunut ja vaikka klikkaisit Ctrl-F5. Tämä kuuluu asiaan.

Vastuunrajoitus

Näillä ohjeilla ja koodiesimerkeillä ei ole minkäänlaista toimivuustakuuta. Emme vastaa välittömistä, välillisistä, satunnaisista tai epäsuorista vahingoista, menetyksistä, korvauksista, tai kolmannen osapuolen esittämistä vaatimuksista, jotka johtuvat näiden ohjeiden tai koodiesimerkkien noudattamisesta.