Nemokamas konverteris

Favicon Generatorius

Generuokite kelių dydžių (nuo 16 x 16 iki 512 x 512) favicon failus iš bet kurio vaizdo. Nemokama, momentinė ir veikia tik jūsų naršyklėje.

Nuvilkite vaizdą čia

Palaiko PNG, JPG, SVG, WebP. Daugiausia 10 MB.

Arba

Apie šį įrankį

Favicon yra maža piktograma, kuri rodoma naršyklės skirtukuose, žymėse ir istorijos sąrašuose. Originalus favicon - 16 × 16 ICO failas adresu /favicon.ico - išsiplėtė į sudėtingą skirtingų dydžių piktogramų rinkinį skirtingoms platformoms: 16 × 16 ir 32 × 32 naršyklės skirtukams, 180 × 180 iOS pagrindiniams ekranams, 192 × 192 ir 512 × 512 plytelėms, skirtoms Android, ir 512 × 512 plyteles. Šiuolaikinis favicon generatorius daro visa tai iš vieno šaltinio vaizdo.

Šis įrankis paima vieną didelės raiškos šaltinio vaizdą (paprastai kvadratinį logotipą) ir sugeneruoja visą favicon išteklių rinkinį bei HTML nuorodų žymas, reikalingas jiems nuorodai. Išvestis apima ICO, kelis PNG ir manifest.json progresyviems žiniatinklio programos metaduomenims. Nuleiskite gautus failus į savo svetainės šaknį ir nurodykite juos naudodami sugeneruotą HTML.

Visas apdorojimas vyksta jūsų naršyklėje. Jokio įkėlimo, API skambučio, greičio apribojimo. Išvestis veikia visose šiuolaikinėse naršyklėse ir operacinėse sistemose, kuriose rodomi favicons.

Kodėl reikia generuoti Favicon

Svetainės be favicon atrodo nebaigtos. Naršyklės skirtukuose rodoma bendra piktograma; žymės neturi vaizdinio identifikatoriaus; svetainė atrodo ne tokia profesionali. Tinkamo favicon rinkinio pridėjimas yra mažai pastangų reikalaujantis didelio poveikio poliravimo veiksmas, kuris parodo dėmesį detalėms.

Šiuolaikiniai favicon reikalavimai išaugo už /favicon.ico. „iOS“ pagrindinio ekrano piktogramose, „Android Chrome“ piktogramose, „Windows“ plytelių piktogramose ir tamsaus režimo variantuose naudojami skirtingi failai. Generuojant juos visus iš vieno šaltinio, užtikrinamas nuoseklus prekės ženklo kūrimas netvarkant kiekvieno failo ranka.

Kaip naudoti

Įkelkite šaltinio vaizdą, gaukite visą favicon rinkinį.

  1. Įkelti šaltinio vaizdą: Naudokite kvadratinį bent 512 × 512 pikselių vaizdą. Pageidautina PNG (skaidrumo palaikymas); SVG taip pat priimamas. Didesnės raiškos šaltiniai sukuria ryškesnes mažesnes piktogramas.
  2. Konfigūruokite platformos parinktis: Jei reikia, įgalinkite iOS, Android, Windows ir PWA išvestis. Numatytieji nustatymai sukuria standartinį rinkinį, kurio reikia daugumai svetainių.
  3. Tinkinkite spalvas ir temą: Pasirinkite „Windows“ plytelių ir PWA ekranų temos spalvas. Suderinkite savo prekės ženklo tapatybę.
  4. Atsisiųskite ir įdiekite: Išsaugokite sugeneruotą ZIP failą. Įdėkite failus į savo svetainės šaknį ir pridėkite sugeneruotas HTML nuorodų žymas prie savo <head>. HTML nurodo kiekvieną piktogramą tinkamo dydžio.

Bendro naudojimo atvejai

Techninės detalės

Visas modernus favicon rinkinys: favicon.ico (16+32+48 daugialypė raiška), favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png (180×180), android-chrome-192x192.png, android2px,51-51. mstile-150x150.png. Plius site.webmanifest, skirtas PWA, browserconfig.xml, skirtas Windows.

Kiekvienas PNG generuojamas drobės pagrindu sumažinant atranką iš šaltinio. ICO sukurtas JavaScript, sujungiant 16/32/48 versijas į daugialypės raiškos ICO formatą naudojant DataView rašymą.

HTML nuorodų žymos nurodo kiekvieną failą su atitinkamais rel ir dydžių atributais. Generatorius sukuria juos kaip kopijavimui ir įklijavimui paruoštą jūsų svetainės <head> fragmentą.

Geriausia praktika

Dažnai užduodami klausimai

Kokio formato paveikslėlį turėčiau įkelti?
Geriausiai veikia PNG su skaidriu fonu. Naudokite kvadratinį bent 512 x 512 pikselių vaizdą, kad įrankis galėtų sumažinti mastelį neprarandant kokybės. SVG taip pat gerai veikia, nes jį galima keisti iki bet kokio dydžio.
Kokius dydžius tai sukuria?
16x16 (naršyklės skirtukas), 32x32 (naršyklės skirtukas @2x), 48x48 (Windows užduočių juosta), 180x180 (Apple Touch piktograma), 192x192 (Android pagrindinis ekranas), 512x512 (PWA ekranas). ICO faile yra 16, 32 ir 48 pikselių dydžiai.
Kur dėti favicon failus?
Įdėkite favicon.ico į savo svetainės šakninį katalogą. Kiti PNG dydžiai patenka į viešąjį aplanką arba bet kurį pasiekiamą kelią. Skiltyje <head> pridėkite HTML nuorodų žymas, nukreipiančias į kiekvieną failo vietą.
Kodėl mano mėgstamiausia piktograma neatnaujinama naršyklėje?
Naršyklės agresyviai talpina faviconus. Išvalykite naršyklės talpyklą, pabandykite atidaryti inkognito lange arba pridėkite versijos užklausos eilutę (?v=2) prie favicon URL, kad priverstumėte atnaujinti.
Kodėl mano mėgstamiausia piktograma neatnaujinama?
Naršyklės agresyviai talpina faviconus, kartais kelias dienas. Priverskite atnaujinti išvalydami talpyklą, tiesiogiai atidarydami piktogramos URL arba prie nuorodos žymos pridėdami versijos užklausos parametrą.
Ar mano vaizdas įkeltas į serverį?
Ne. Generacija vyksta jūsų naršyklėje.
Ar turėčiau naudoti SVG ar PNG?
SVG šaltiniui (nepriklausomai nuo skiriamosios gebos). Generatorius išveda tam tikro dydžio PNG; šiuolaikinės naršyklės taip pat palaiko SVG favicons per nuorodą rel=icon type=image/svg+xml.
Kas yra site.webmanifest?
JSON manifestas, skirtas progresyvioms žiniatinklio programoms, apibūdinančioms piktogramas, spalvas ir kitus metaduomenis. Reikalingas įdiegiamoms žiniatinklio programoms; nekenksmingas įtraukti net į standartines svetaines.