Siirry pääsisältöön

Mitä tiedostoja tarvitset Favicon-pakettiin?

Kirjoittaja Converty Team

Opi, mitkä tiedostot kuuluvat käytännölliseen favicon-pakettiin, mukaan lukien favicon.ico, PNG-kuvakkeet, Applen kosketuskuvakkeet, Android-kuvakkeet ja aloituspaketti site.webmanifest.

Mitä tiedostoja tarvitset Favicon-pakettiin?

Favicon-paketti on helppo aliarvioida. Monet ihmiset ajattelevat, että se on yksi pieni kuva selaimen välilehdellä, mutta nykyaikainen sivusto tarvitsee yleensä pienen joukon siihen liittyviä resursseja. Selaimen välilehden kuvake on vain yksi pinta. Mobiilipikakuvakkeet, Android-kuvakkeet, Applen kosketuskuvakkeet ja luetteloviittaukset voivat kaikki vaatia omat tiedostonsa.

Käytännön tavoitteena ei ole kerätä kaikkia mahdollisia kuvakevariantteja. Tavoitteena on toimittaa fokusoitu paketti, joka kattaa yleiset selain- ja sovellusmaiset pinnat muuttamatta käynnistyksen valmistelua manuaaliseksi vientityöksi. Convertyn Favicon / App Icon Generator on rakennettu tämän työn ympärille: aloita yhdestä neliömäisestä kuvasta ja lataa nippu yleisistä tiedostoista yhdessä.

Ydintiedosto on edelleen favicon.ico

favicon.ico on edelleen tutuin favicon-tiedosto. Se on resurssi, jonka ihmiset odottavat näkevänsä selainvälilehtiin, kirjanmerkkeihin ja vanhempiin favicon-konventionaaleihin liittyvän.

Vaikka sivusto sisältää myös PNG-kuvakkeita ja verkkoluettelon, favicon.ico on silti hyödyllinen, koska se kattaa perinteisen polun, jonka monet selaimet ja työkalut ymmärtävät. Yksinkertaisella sivustolla se on usein ensimmäinen tiedosto, jonka joku tarkistaa, kun välilehtikuvake ei näytä oikealta.

PNG-kuvakkeet peittävät moderneja pintoja

Nykyaikaiset kuvakepaketit sisältävät yleensä usean kokoisia PNG-tiedostoja. Eri selaimet, pikakuvakkeet ja näyttökontekstit voivat käyttää eri ulottuvuuksia. Vain yhden koon vienti voi jättää selaimen tai laitteen skaalaamaan kuvaa, jolloin pienet kuvakkeet voivat näyttää pehmeiltä tai täynnä.

Tästä syystä lähdeteoksella on merkitystä. Neliön muotoinen, yksinkertainen, luettava kuva tuottaa parempia tuloksia koko paketissa kuin yksityiskohtainen grafiikka, joka on puristettu useisiin kokoihin. Muuntaminen ei voi muuttaa monimutkaista logoa täydelliseksi pieneksi jäljeksi, mutta se voi poistaa toistuvan vientityön, kun sinulla on sopiva lähde.

Applen kosketuskuvakkeet ja Android-kuvakkeet palvelevat eri pintoja

Applen kosketuskuvakkeita käytetään Applen laitteiden pikakuvapinnoissa. Android-valmiit kuvakkeet tukevat vastaavia asennus- ja pikakuvakkeiden käyttötapauksia Android-suuntautuneilla pinnoilla.

Nämä tiedostot on helppo unohtaa, koska ne eivät aina näy tavallisen työpöytäselaimen tarkistuksen aikana. Sivusto voi näyttää hyvältä välilehdellä, mutta silti siitä puuttuu tärkeitä materiaaleja, kun joku on tallentanut sen laitteen aloitusnäytölle. Täydellinen paketti vähentää sen todennäköisyyttä.

Jos päätät, onko Applen kosketuskuvake erillinen faviconista, lue Apple Touch Icon vs Favicon: Mitä nykyaikaisen sivuston pitäisi sisältää?.

Manifesti sitoo sovellusmaiset pinnat yhteen

Aloitus site.webmanifest antaa verkkosovellukselle tai sivustolle paikan kuvakkeiden ja niihin liittyvien näytön metatietojen kuvaamiseen. Se ei korvaa itse kuvaketiedostoja. Se osoittaa niihin, jotta yhteensopivat pinnat voivat ymmärtää, mitä omaisuutta on saatavilla.

Siksi Converty sisältää aloitusluettelon pakettiin. Luotu tiedosto antaa sinulle käytännöllisen lähtökohdan, mutta sinun on silti sijoitettava resurssit projektiisi ja viitattava niihin sivustosi asetuksista.

Käytännöllinen favicon-paketin tarkistuslista

Kohdistetun favicon-paketin tulisi yleensä sisältää:

  • favicon.ico
  • useita PNG-kuvakkeiden kokoja
  • Applen kosketuskuvakelähtö
  • Android-yhteensopiva kuvakelähtö
  • alkupala site.webmanifest

Tämä riittää monille pienille sivustoille, SaaS-julkaisuille, markkinointisivuille ja dokumentaatioprojekteille. Erikoistuneet asennukset saattavat vaatia lisää alustakohtaisia ​​resursseja, mutta yhteinen paketti saa rutiinityöt pois tieltä.

Avaa Favicon / App Icon Generator, kun sinulla on yksi neliönmuotoinen lähdekuva ja tarvitset yleiset favicon-pakettitiedostot niputettuina yhteen vientiin. Laajempaa työnkulkua varten lue Kuinka luoda täydellinen favicon-paketti yhdestä kuvasta.

Saatat pitää myös näistä