Seuraa tätä esimerkkiä ja sovella samoja säätimiä omaan kuvaasi. Avaa Favicon / ICO-generaattori.
Valitse selkeä logo tai aloita nimikirjaimilla
Avaa Favicon / ICO -generaattori ja valitse Kuva. Lataa PNG, JPG, JPEG, WebP tai GIF, tai valitse Kokeile näytettä. Esimerkissä käytetään favicon-orbit.png-tiedostoa, 512 × 512 pikselin violettia kiertoradamerkkiä, jossa on läpinäkyvät kulmat. Syöte on 202,491 tavua.
Jos brändillä ei ole valmista logoa, valitse työkalusivulta Teksti. Kirjoita yksi tai kaksi kirjainta ja valitse Jatka. Editori tarjoaa Modern sans-, Classic serif- ja Monospace-fontteja sekä erilliset teksti- ja taustavärit. Jopa kolme merkkiä hyväksytään, mutta ylimääräiset merkit voivat muuttua vaikeasti tunnistettaviksi pienissä koissa.
Säilytä alkuperäinen taideteos. Generaattori luo uusia kuvaketiedostoja eikä korvaa lähdettä. GIF-syöte muuttuu staattiseksi kuvakkeeksi animoidun faviconin sijaan.
Monogrammia varten Fontti-valikko alkaa kolmella sisältyvällä tyylillä. Valitse Käytä järjestelmän fontteja tuetulla työpöytäselaimella ja salli pääsy laitteellesi asennettujen fonttien lisäämiseen. Käytä edellinen- ja seuraava-nuolia vertaillaksesi vierekkäisiä fontteja tai valitse perhe ja tarkista live-esikatselu, erityisesti 16 pikselin koossa. Fontit pysyvät laitteellasi; sisältyvät tyylit toimivat ilman lupaa.
Käytä yksinkertaista siluettia. Yksityiskohtainen valokuva voi näyttää houkuttelevalta 512 pikselin koossa, mutta muuttua epäselväksi pisteeksi 16 pikselin koossa.
Tarkenna kehystystä ja tarkista pienet esikatselut
Editori näyttää vaaleat ja tummat selainvälilehdet sekä esikatselut yleisissä kuvakekoissa. Tarkista ensin 16 pikselin esimerkki; se on tiukin testi sille, pysyykö merkki tunnistettavana. Apple Touch -esikatselu edustaa 180 pikselin vientiä ja näkyy työtilassa pienempänä.
Avaa Asetukset puhelimella. Jätä Luo kohteesta -asetukseksi Ladattu kuva ja Kuvan sovitus -asetukseksi Näytä koko kuva. Aseta tässä esimerkissä Sisällön ympärillä oleva tila arvoon 0 ja ota käyttöön Läpinäkyvä tausta. Lähdekuvassa on jo valmiiksi pyöristetty violetti muoto ja selkeät marginaalit, joten se ei tarvitse erillistä värillistä taustaa.
Toisella lähdekuvalla Näytä koko kuva säilyttää reunat, kun taas Täytä kuvake voi rajata ne. Pyöristetty neliö, Neliö ja Ympyrä määrittävät ulkomuodon. Läpinäkyvä tausta säilyttää tyhjät alueet, mutta ei voi poistaa valokuvaan jo piirrettyä peittävää taustaa. Tarkista pienin esikatselu jokaisen rajausmuutoksen jälkeen.
Logo, jossa on läpinäkyvät kulmat, voi saada ei-toivotun toisen kehyksen, jos lisäät erillisen peittävän taustan. Esikatsele molemmat taustavaihtoehdot.
Tämän oppaan esimerkki
Kokeile esimerkkiä: favicon-orbit.png, 512 × 512 px. Ladattu kuva; Näytä koko kuva; Pyöristetty neliö; Sisällön ympärillä oleva tila 0%; Läpinäkyvä tausta käytössä; Verkkosivuston kuvakepaketti (ZIP); Verkkosivuston nimi My website.
- Lähdekuva
- 512 × 512 PNG · 202,491 tavua
- ICO kehystä
- 16, 24, 32, 48, 64, 128 ja 256 px
- Paketti
- 9 tiedostoa · 304,351 tavua
- Näytetty tulos
- Todellinen 256 × 256 ICO kehys
Valitse monikokoinen ICO tai verkkosivustopaketti
Valitse Lataa-kohdasta Verkkosivuston kuvakepaketti (ZIP) tätä esimerkkiä varten. Jätä Verkkosivuston nimi -kohdaksi My website tätä esimerkkiä varten tai korvaa se oman projektisi todellisella tuotenimellä. Tätä nimeä käytetään site.webmanifest-tiedostossa; sitä ei lisätä tekstinä kuvan päälle.
Valitse Aloita. Selain luo seitsemän kehyksen favicon.ico-tiedoston, jossa on neliönmuotoiset kuvat koossa 16, 24, 32, 48, 64, 128 ja 256 pikseliä. Se luo myös PNG-kuvakkeet koossa 16, 32, 48, 180, 192 ja 512 pikseliä, manifestin ja asennusohjeet. Lopputuloksena on yksi ZIP-tiedosto erillisen latauspainikkeen sijaan jokaiselle kuvakkeelle.
Jos tarvitset vain klassisen favicon.ico-tiedoston, valitse sen sijaan Monikokoinen ICO. Tämä on hyödyllistä, kun verkkosivustoalusta hyväksyy ICO-latauksen eikä tarvitse erillistä pakettia.
Paketti on joukko verkkosivuston kuvakevaroja. Se ei automaattisesti muuta sivustoa progressiiviseksi verkkosovellukseksi.
Lataa, asenna ja tarkista kuvaketiedostot
Lataa tallentaa website-icons.zip-tiedoston. Varsinainen esimerkki sisältää yhdeksän tiedostoa ja on 304,351 tavua. Yllä oleva vertailu näyttää 512 pikselin lähdekuvan vieressä aidon 256 pikselin kehyksen, joka on purettu viedystä ICO-tiedostosta, eikä simuloitua selainkuvakaappausta.
Pura ZIP-tiedosto, lataa kuvaketiedostot verkkosivustosi juureen ja lue INSTALL.txt. Se sisältää HTML linkkitunnistetta ICO, PNG kuvakkeelle, Apple Touch -kuvakkeelle ja web-manifestille. Jos sijoitat tiedostot alikansioon, päivitä sekä HTML-polut että kuvakepolut site.webmanifest-tiedoston sisällä.
Tarkista sivustosi uudessa selainvälilehdessä ja käyttämilläsi laitteilla. Selaimet voivat välimuistittaa favicon-kuvakkeita, joten vanha kuvake ei välittömästi todista asennuksen epäonnistumista. Säilytä lähdekuva ja ladattu paketti ennen editorin päivittämistä, koska päivitys palauttaa päätyökalusivulle.
Valitse yksi kanoninen kuvakkeen sijainti ja pidä HTML-polut johdonmukaisina. Generaattori luo varat; niiden julkaiseminen on edelleen osa verkkosivustosi työnkulkua.
Yleisiä kysymyksiä
Voinko luoda faviconin lataamatta logoa?
Kyllä. Valitse Teksti, kirjoita nimikirjaimesi ja valitse sitten editorista fontti, värit, muoto ja välistys.
Mitkä koot sisältyvät ICO-tiedostoon?
ICO sisältää seitsemän PNG-pohjaista kehystä: 16, 24, 32, 48, 64, 128 ja 256 pikseliä neliönä. Selain valitsee sopivan kehyksen.
Mitä verkkosivun ZIP-tiedosto sisältää?
Se sisältää favicon.ico, kuusi PNG kuvaketta selain-, Apple- ja Android-käyttöön, site.webmanifest-tiedoston ja INSTALL.txt, jossa on HTML linkkitunnisteet.
Voiko faviconissani olla läpinäkyvä tausta?
Kyllä. Ota käyttöön Läpinäkyvä tausta. Tämä säilyttää läpinäkyvät alueet lähteen ympärillä; se ei poista läpinäkymätöntä taustaa valokuvasta.
Ladataanko kuva palvelimelle muunnosta varten?
Ei. Tämä työkalu luo ja pakkaa kuvaketiedostot selaimessasi. Säilytä ladatut tiedostot, sillä editori ei ole pysyvä projektitallennustila.
Voinko käyttää tietokoneelleni asennettuja fontteja?
Kyllä, jos selaimesi tukee paikallista fonttien käyttöä. Valitse Teksti / monogrammi, valitse Käytä järjestelmän fontteja ja anna selaimelle lupa. Käytettävissä olevat fonttiperheet näkyvät Fontti-luettelossa. Mukana olevat tyylit pysyvät käytettävissä, jos lupa evätään tai paikallinen fonttien käyttö ei ole mahdollista.
Anna seuraavalle verkkosivustollesi selkeä pieni tunnus.
Kokeile näytettä tai käytä omaa tiedostoasi ja tarkista tulos ennen jakamista.
