Ilmainen muunnin

Favicon Generaattori

Luo monikokoisia favicon-tiedostoja (16x16 - 512x512) mistä tahansa kuvasta. Ilmainen, välitön ja toimii kokonaan selaimessasi.

Vedä ja pudota kuva tähän

Tukee PNG, JPG, SVG, WebP. Enintään 10 MB.

Tai

Tietoa tästä työkalusta

Favicon on pieni kuvake, joka näkyy selaimen välilehdissä, kirjanmerkeissä ja historialuetteloissa. Alkuperäinen favicon - 16 × 16 ICO-tiedosto osoitteessa /favicon.ico - on laajentunut monimutkaiseksi kuvakkeeksi eri kokoisina eri alustoille: 16 × 16 ja 32 × 32 selainvälilehdille, 180 × 180 iOS-aloitusnäytöille, 192 × 192 ja 512 × 512 -ruuduille Androidille, laatat eri kokoisiksi. Kaikkien näiden tuottaminen yhdestä lähdekuvasta on mitä moderni favicon-generaattori tekee.

Tämä työkalu ottaa yhden korkearesoluutioisen lähdekuvan (yleensä neliönmuotoisen logon) ja luo kaikki favicon-resurssit sekä niihin viittaamiseen tarvittavat HTML-linkkitunnisteet. Tulos sisältää ICO:n, useita PNG-tiedostoja ja manifest.json-tiedoston progressiivista verkkosovellusten metadataa varten. Pudota tuloksena olevat tiedostot sivustosi juureen ja viittaa niihin luodun HTML-koodin kautta.

Kaikki käsittely tapahtuu selaimessasi. Ei latausta, ei API-kutsua, ei nopeusrajoitusta. Tulos toimii kaikissa nykyaikaisissa selaimissa ja käyttöjärjestelmissä, jotka näyttävät suosikkikuvakkeita.

Miksi luoda Favicon

Sivustot ilman faviconeja näyttävät keskeneräisiltä. Selaimen välilehdillä näkyy yleinen kuvake; kirjanmerkeillä ei ole visuaalista tunnistetta; sivusto näyttää vähemmän ammattimaiselta. Kunnollisen favicon-sarjan lisääminen on vaivaton ja iskunkestävä kiillotusvaihe, joka osoittaa huomiota yksityiskohtiin.

Nykyaikaiset favicon-vaatimukset ovat kasvaneet pidemmälle kuin /favicon.ico. iOS home screen icons, Android Chrome icons, Windows tile icons, and dark mode variants all use different files. Niiden kaikkien luominen yhdestä lähteestä varmistaa johdonmukaisen brändäyksen ilman, että jokaista tiedostoa hallinnoidaan käsin.

Käyttöohjeet

Lataa lähdekuva, niin saat koko favicon-sarjan.

  1. Lataa lähdekuva: Käytä neliönmuotoista kuvaa, jonka koko on vähintään 512×512 pikseliä. PNG on suositeltava (läpinäkyvyystuki); Myös SVG hyväksytään. Korkeamman resoluution lähteet tuottavat terävämpiä pienempiä kuvakkeita.
  2. Määritä alustan asetukset: Ota iOS-, Android-, Windows- ja PWA-lähdöt käyttöön tarpeen mukaan. Oletusasetukset tuottavat standardijoukon, jota useimmat sivustot tarvitsevat.
  3. Mukauta värejä ja teemaa: Valitse teemavärit Windows-laatoille ja PWA-aloitusnäytöille. Yhdistä brändi-identiteettisi.
  4. Lataa ja ota käyttöön: Tallenna luotu zip. Sijoita tiedostot sivustosi juureen ja lisää luodut HTML-linkkitunnisteet <head>-kohtaan. HTML viittaa jokaiseen kuvakkeeseen oikeassa koossa.

Yleiset käyttötapaukset

Tekniset tiedot

Täysi moderni favicon-sarja: favicon.ico (16+32+48 moniresoluutio), favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png (180×180), android-chrome-192x192.png, android-x,51-512px,5. mstile-150x150.png. Plus site.webmanifest PWA:lle, browserconfig.xml Windowsille.

Jokainen PNG luodaan kankaalle perustuvalla alasnäytteistyksellä lähteestä. ICO on rakennettu JavaScriptillä yhdistämällä 16/32/48 versiot usean resoluution ICO-muotoon käyttämällä DataView-kirjoituksia.

HTML-linkkitunnisteet viittaavat kuhunkin tiedostoon asianmukaisilla rel- ja sizes-määritteillä. Generaattori tuottaa nämä kopiointi-liitä-valmiina katkelmina sivustosi <head>-kohtaan.

Parhaat käytännöt

Usein kysytyt kysymykset

Missä kuvamuodossa minun pitäisi ladata?
PNG läpinäkyvällä taustalla toimii parhaiten. Käytä neliönmuotoista kuvaa, jonka koko on vähintään 512 x 512 pikseliä, jotta työkalu voi pienentää laadun heikkenemättä. SVG toimii myös hyvin, koska se skaalautuu mihin tahansa kokoon.
Mitä kokoja tämä tuottaa?
16x16 (selainvälilehti), 32x32 (selaimen välilehti @2x), 48x48 (Windowsin tehtäväpalkki), 180x180 (Apple Touch -kuvake), 192x192 (Android-aloitusnäyttö), 512x512 (PWA-aloitusnäyttö). ICO-tiedosto sisältää 16, 32 ja 48 kuvapisteen koot.
Mihin laitan favicon-tiedostot?
Sijoita favicon.ico verkkosivustosi juurihakemistoon. Muut PNG-koot menevät julkiseen kansioon tai mihin tahansa käytettävissä olevaan polkuun. Lisää HTML-linkkitunnisteet <head>-osioon osoittaen kuhunkin tiedoston sijaintiin.
Miksi suosikkikuvani ei päivity selaimeen?
Selaimet tallentavat faviconit aggressiivisesti välimuistiin. Tyhjennä selaimen välimuisti, yritä avata incognito-ikkunassa tai lisää versiokyselymerkkijono (?v=2) faviconin URL-osoitteeseen pakottaaksesi päivityksen.
Miksi suosikkikuvani ei päivity?
Selaimet tallentavat faviconit välimuistiin aggressiivisesti, joskus päiviä. Pakota päivitys tyhjentämällä välimuisti, avaamalla kuvakkeen URL-osoite suoraan tai liittämällä versiokyselyparametrin linkkitunnisteeseen.
Onko kuvani ladattu palvelimelle?
Ei. Luominen tapahtuu selaimessasi.
Pitäisikö minun käyttää SVG:tä vai PNG:tä?
SVG lähteelle (resoluutiosta riippumaton). The generator outputs PNGs at specific sizes; nykyaikaiset selaimet tukevat myös SVG-faviconeja linkin rel=icon type=image/svg+xml kautta.
Mikä on site.webmanifest?
JSON-luettelo progressiivisille verkkosovelluksille, joka kuvaa kuvakkeita, värejä ja muita metatietoja. Vaaditaan asennettaville verkkosovelluksille; vaaraton sisällyttää jopa tavallisiin sivustoihin.