Utilia
Flokkar ▾
Tungumál: is ▾

Favicon-framleiðandi

Búðu til favicon.ico, PNG-tákn, apple-touch-icon og site.webmanifest úr einni mynd eða emoji, með HTML-merkjum tilbúnum til að líma. ZIP, engin upphleðsla.

Uppruni

Aðlögun
site.webmanifest

Hvernig býrð þú til favicon

  1. Undir Uppruni skaltu velja Mynd eða Texti eða emoji. - Mynd: slepptu PNG, JPG, WebP eða SVG. Ferningslaga lógó, að minnsta kosti 512 × 512 px, virkar best. Veldu Öll myndin til að láta hana passa inni í tákninu, eða Fylla og klippa til að þekja ferninginn. - Texti eða emoji: sláðu inn bókstaf, upphafsstafi eða emoji og veldu síðan Leturgerð, Feitletrað og Litur texta.
  2. Stilltu Bakgrunnslitur, eða hakaðu við Gegnsær bakgrunnur. Veldu Lögun (Ferningur, Ávalur eða Hringur) og Fylling (%) til að skilja eftir pláss í kringum innihaldið.
  3. Opnaðu valfrjálst site.webmanifest til að slá inn Heiti forrits (web manifest), Stutt heiti, Þemalitur og Vefslóð möppu með táknunum (haltu / ef skrárnar fara í rót vefsins þíns).
  4. Smelltu á Búa til favicon. Táknin birtast í raunstærð, við hlið eftirlíkingar af vafraflipa. Eftir það uppfærast þau samstundis við hverja breytingu.
  5. Smelltu á Sækja ZIP, hladdu skránum upp á vefinn þinn, smelltu svo á Afrita merki og límdu þau inn í <head> síðnanna þinna.

Hvað er í ZIP-skránni

Skrá Stærð Notað af
favicon.ico 16, 32 og 48 px Vafraflipar, bókamerki, eldri vafrar, Windows
favicon-16x16.png 16 × 16 Vafraflipar
favicon-32x32.png 32 × 32 Flipar á skjám með háa punktaþéttni, flýtivísar á verkstiku
apple-touch-icon.png 180 × 180 Heimaskjár iPhone og iPad
android-chrome-192x192.png 192 × 192 Heimaskjár Android (web manifest)
android-chrome-512x512.png 512 × 512 Opnunarskjáir við uppsetningu (web manifest)
site.webmanifest — Heiti, litir og tákn uppsetjanlegs vefs
favicon-tags.html — HTML-merkin, til viðmiðunar

ICO-skráin geymir þrjár PNG-myndir, snið sem Windows (frá Vista) og allir núverandi vafrar lesa. Apple-touch-icon er alltaf vistað á heilum bakgrunni, því iOS sýnir gegnsæja mynddíla sem svarta; með gegnsæjum bakgrunni er hvítur notaður.

HTML-merkin

Merkin sem búin eru til líta svona út (með vefslóð möppunnar þinnar):

<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#ffffff">

Vafrar biðja líka sjálfkrafa um /favicon.ico í rót lénsins þíns, svo það hjálpar að hafa hana þar, jafnvel á síðum án merkjanna.

Hönnunarráð

  • Hafðu það einfalt. Í 16 × 16 px hverfa smáatriði. Einn bókstafur, feitt tákn eða einfaldasta útgáfa lógósins les best.
  • Skoðaðu forskoðunina í raunstærð. 16 px táknið í eftirlíkingu flipans er það sem gestir sjá í raun.
  • Mundu eftir dökkum ham. Dökkt lógó á gegnsæjum bakgrunni getur horfið í dökkum vafraþemum; litaður bakgrunnur eða smá fylling hjálpar.
  • Emoji líta öðruvísi út á hverju kerfi, því hver vettvangur teiknar emoji í sínum eigin stíl. PNG-skrárnar halda útliti tækisins þíns.

Algengar spurningar

Hvaða stærðir þarf favicon?

Í reynd: favicon.ico með 16, 32 og 48 px, 180 px apple-touch-icon og 192 og 512 px PNG-skrár fyrir web manifest. Þetta verkfæri býr til þær allar úr einum uppruna.

Get ég notað SVG-lógó?

Já. SVG-skrár eru teiknaðar í hárri upplausn áður en táknin eru búin til. SVG-skráin er birt sem venjuleg mynd, svo skriftur í henni keyra aldrei.

Hvernig bý ég til emoji-favicon?

Veldu Texti eða emoji, sláðu inn eða límdu emoji, veldu bakgrunn eða hafðu hann gegnsæjan og búðu til. Niðurstaðan er raunveruleg PNG og ICO, svo hún virkar í öllum vöfrum.

Af hverju birtist nýja favicon-ið mitt ekki?

Vafrar geyma favicon-tákn mjög ákaft í skyndiminni. Endurhlaðaðu með tæmdu skyndiminni, opnaðu vefinn í huliðsglugga, eða bættu útgáfu við vefslóðina, eins og /favicon.ico?v=2.

Er myndinni minni hlaðið upp?

Nei. Táknin, ZIP-skráin og manifestið eru búin til í vafranum þínum; ekkert fer úr tækinu þínu.

Tengd verkfæri