Utilia
Kategoriat ▾
Kieli: fi ▾

Favicon-generaattori

Luo favicon.ico, PNG-kuvakkeet, apple-touch-icon ja site.webmanifest yhdestä kuvasta tai emojista valmiilla HTML-tunnisteilla. ZIP-lataus, ei lähetystä.

Lähde

Sovitus
site.webmanifest

Näin luot faviconin

  1. Valitse kohdasta Lähde joko Kuva tai Teksti tai emoji. - Kuva: pudota PNG-, JPG-, WebP- tai SVG-tiedosto. Neliön muotoinen logo, jonka koko on vähintään 512 × 512 px, toimii parhaiten. Valitse Koko kuva sovittaaksesi sen kuvakkeen sisään tai Täytä ja rajaa peittääksesi koko neliön. - Teksti tai emoji: kirjoita kirjain, nimikirjaimet tai emoji ja valitse sitten Fontti, Lihavoitu ja Tekstin väri.
  2. Aseta Taustaväri tai rastita Läpinäkyvä tausta. Valitse Muoto (Neliö, Pyöristetty tai Ympyrä) ja Marginaali (%), jotta sisällön ympärille jää tilaa.
  3. Avaa halutessasi site.webmanifest ja anna Sovelluksen nimi (web manifest), Lyhytnimi, Teemaväri ja Kuvakkeiden kansion URL-osoite (jätä /, jos tiedostot menevät sivustosi juureen).
  4. Napsauta Luo faviconit. Kuvakkeet ilmestyvät todellisessa koossa mallinnetun selainvälilehden viereen. Sen jälkeen jokainen muutos päivittää ne heti.
  5. Napsauta Lataa ZIP, lataa tiedostot sivustollesi, napsauta Kopioi tunnisteet ja liitä ne sivujesi <head>-osioon.

Mitä ZIP-tiedostossa on

Tiedosto Koko Käyttäjä
favicon.ico 16, 32 ja 48 px Selainvälilehdet, kirjanmerkit, vanhat selaimet, Windows
favicon-16x16.png 16 × 16 Selainvälilehdet
favicon-32x32.png 32 × 32 Välilehdet tarkoilla näytöillä, tehtäväpalkin pikakuvakkeet
apple-touch-icon.png 180 × 180 iPhonen ja iPadin aloitusnäyttö
android-chrome-192x192.png 192 × 192 Androidin aloitusnäyttö (web manifest)
android-chrome-512x512.png 512 × 512 Asennuksen aloitusnäytöt (web manifest)
site.webmanifest — Asennettavan sivuston nimi, värit ja kuvakkeet
favicon-tags.html — HTML-tunnisteet muistin tueksi

ICO-tiedosto sisältää kolme PNG-kuvaa, ja tämän muodon lukevat Windows (Vistasta alkaen) ja kaikki nykyiset selaimet. Apple-touch-icon tallennetaan aina yhtenäiselle taustalle, koska iOS näyttää läpinäkyvät pikselit mustina. Läpinäkyvällä taustalla käytetään valkoista.

HTML-tunnisteet

Luodut tunnisteet näyttävät tältä (kansiosi URL-osoitteella):

<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#ffffff">

Selaimet pyytävät /favicon.ico-tiedostoa myös automaattisesti verkkotunnuksesi juuresta, joten sen pitäminen siellä auttaa myös sivuilla, joilla tunnisteita ei ole.

Suunnitteluvinkkejä

  • Pidä se yksinkertaisena. 16 × 16 px:n koossa yksityiskohdat katoavat. Yksi kirjain, lihavoitu symboli tai logosi yksinkertaisin versio on selkein.
  • Tarkista esikatselu todellisessa koossa. Mallivälilehden 16 px:n kuvake on se, minkä kävijät oikeasti näkevät.
  • Huomioi tumma tila. Tumma logo läpinäkyvällä taustalla voi kadota tummissa selainteemoissa. Värillinen tausta tai pieni marginaali auttaa.
  • Emojit näyttävät erilaisilta eri järjestelmissä, koska jokainen alusta piirtää emojit omalla tyylillään. PNG-tiedostot säilyttävät laitteesi ulkoasun.

Usein kysytyt kysymykset

Minkä kokoisia kuvakkeita favicon tarvitsee?

Käytännössä: favicon.ico, jossa on 16, 32 ja 48 px, 180 px:n apple-touch-icon sekä 192 ja 512 px:n PNG-kuvat web manifestia varten. Tämä työkalu luo ne kaikki yhdestä lähteestä.

Voinko käyttää SVG-logoa?

Voit. SVG-tiedostot piirretään korkealla resoluutiolla ennen kuvakkeiden luontia. SVG näytetään pelkkänä kuvana, joten sen komentosarjat eivät koskaan suoriteta.

Miten teen emoji-faviconin?

Valitse Teksti tai emoji, kirjoita tai liitä emoji, valitse tausta tai jätä se läpinäkyväksi ja luo. Tuloksena on oikea PNG ja ICO, joten se toimii kaikissa selaimissa.

Miksi uusi faviconini ei näy?

Selaimet tallentavat faviconit voimakkaasti välimuistiin. Lataa sivu uudelleen välimuisti tyhjentäen, avaa sivusto yksityisessä ikkunassa tai lisää URL-osoitteeseen versio, esimerkiksi /favicon.ico?v=2.

Lähetetäänkö kuvani palvelimelle?

Ei. Kuvakkeet, ZIP-tiedosto ja manifest luodaan selaimessasi, eikä mikään poistu laitteeltasi.

Aiheeseen liittyvät työkalut