Favicon-generaattori – favicon.ico, Apple-kuvake ja manifesti yhdellä latauksella
Tee sivustollesi favicon kirjaimesta, nimikirjaimista, emojista tai omasta kuvasta. Saat ZIP-paketin, jossa on favicon.ico, SVG-kuvake, 180 px Apple-kuvake, 192 ja 512 px kuvakkeet manifestia varten sekä valmiit HTML-rivit.
Kaikki piirretään selaimessa, eikä tekstiä tai kuvaa lähetetä minnekään. Esikatselussa näet kuvakkeen välilehdellä 16 pikselin koossa ja puhelimen kotivalikossa. Laskuri tarkistaa myös merkin ja taustan kontrastin, koska pienessä koossa heikko kontrasti katoaa.
Mitä favicon-tiedostoja sivusto tarvitsee?
Selaimet hakevat sivuston juuresta favicon.ico-tiedoston, ja iPhone käyttää 180 × 180 pikselin apple-touch-icon.png-kuvaketta. Nykyaikaiset selaimet osaavat myös SVG-kuvakkeen. Jos sivun voi asentaa sovellukseksi, web-sovelluksen manifestiin tarvitaan 192 × 192 ja 512 × 512 pikselin kuvakkeet (web.dev). Google-haku suosittelee yli 48 × 48 pikselin neliötä. Pura paketti sivuston juureen ja lisää neljä link-riviä head-osaan.
Ladataan työkalua...
Etkö tiedä mihin ryhtyä seuraavaksi? Selaa kaikki työkalut
Hae työkalua →Favicon-generaattori tekee sivuston kuvakkeen kaikkiin tavallisiin kokoihin ja antaa valmiin koodin, jolla ne otetaan käyttöön.
Valitse sisällöksi kirjain, nimikirjaimet, emoji tai oma kuva, sitten muoto ja värit.
- ZIP-paketti: favicon.ico (16, 32 ja 48 px), icon.svg, apple-touch-icon.png (180 px), icon-192.png, icon-512.png, site.webmanifest ja head.html.
- Yksittäiset PNG-koot 16, 32, 48, 180, 192 ja 512 px.
- Esikatselu välilehdellä ja kotivalikossa sekä merkin ja taustan kontrasti WCAG-suhteena.
Välilehdellä kuvake on vain 16 pikseliä, joten ratkaisee, miltä se näyttää pienimmillään.
- Kontrasti 4,5 : 1 tai enemmän erottuu hyvin, 3 : 1 riittää isolle ja paksulle merkille.
- Yksi tai kaksi paksua merkkiä toimii paremmin kuin pitkä teksti.
- Apple-kuvake tehdään täytenä neliönä, koska iOS pyöristää kulmat itse ja täyttää läpinäkyvän alueen mustalla.
SVG-kuvake piirretään katsojan omalla fontilla ja emojifontilla, joten se voi näyttää eri laitteilla hieman erilaiselta. PNG- ja ICO-tiedostot ovat kiinteitä.
- Oma kuva pysyy vain selaimen muistissa, sitä ei lähetetä eikä tallenneta.
- Manifesti tarvitaan vain, jos sivun voi asentaa sovellukseksi.
- Lähteet: MDN (link ja rel=icon), web.dev (Add a web app manifest), Google Search Central (Define a favicon), WCAG 2.2 (kontrastisuhde).