Favicon-gerðAllar stærðirnar, og head-blokkin sem fylgir.
Slepptu inn merki og fáðu alvöru favicon.ico með mörgum upplausnum, PNG-stærðirnar sem vafrarnir biðja um, apple touch icon, maskable-tákn fyrir Android og útfyllta site.webmanifest. Allt verður til í þessum flipa, myndinni þinni er aldrei hlaðið upp.
Slepptu merkinu þínu hér
Eða ýttu til að velja skrá. Ferningslaga mynd, 512 px eða stærri, gefur bestu útkomuna.
PNG, JPG, WebP, SVG, ICO eða GIF
Myndin þín er lesin, minnkuð og pökkuð inni í þessum flipa. Henni er aldrei hlaðið upp, og enginn þjónn kemur nálægt neinu skrefi.
Hvaða favicon-stærðir þarftu í raun árið 2026?
Miklu færri en tuttugu skráa pakkarnir sem flestar favicon-síður afhenda enn. Fimm birtingarstaðir ná yfir alla vafra og öll stýrikerfi sem máli skipta, og allt umfram það er þyngd í <head> án nokkurs ávinnings.
favicon.ico, 16 og 32 og 48
Enn skráin sem vafri leitar að í rót lénsins áður en hann hefur lesið eina einustu línu af HTML. Ein umbúð geymir allar þrjár stærðirnar, og þess vegna smíðar þetta favicon-verkfæri alvöru .ico í stað þess að endurnefna PNG. 16 px er flipinn, 32 px er retina-flipinn og bókamerkjastikan, 48 px eru flýtileiðir í Windows.
favicon.svg, ef þú átt vigurskrá
Favicon í vigurformi er skarpt í öllum stærðum og getur meira að segja brugðist við dökku þema kerfisins með media query inni í skránni. Vafrar sem skilja hana taka hana fram yfir .ico. Ef þú hleður SVG inn hér helst hún vigur, henni er aldrei breytt í punktamynd og skilað sem eftirlíkingu.
apple-touch-icon.png, 180×180
Táknið sem iOS notar þegar einhver bætir vefnum þínum á heimaskjáinn. Ein skrá dugar: iOS hefur minnkað eitt 180 px tákn sjálft frá og með iOS 8, svo gamli staflinn frá apple-touch-icon-57x57 upp í 152x152 er dauð þyngd. Þetta verkfæri skrifar eitt slíkt, og gerir það ógagnsætt.
android-chrome 192 og 512, ásamt maskable
Vísað er í þau úr site.webmanifest en ekki úr link-merki. 192 px er heimaskjárinn, 512 px er ræsiskjárinn og uppsetningarkvaðningin. Maskable-útgáfan er sú sem Android klippir í hvaða lögun sem ræsirinn notar, svo merkið þar þarf alvöru spássíu.
mstile-150x150.png, ódýrt að halda
Vefir sem festir eru í Windows lesa hana enn. Hún kostar eina litla PNG og tvö meta-merki, svo hún fylgir með, en ekkert brotnar þótt þú eyðir henni. Það er heiðarlega svarið, og þess vegna er hún síðust á listanum í stað þess að vera kynnt sem nauðsyn.
Af hverju geymir ein .ico-skrá margar myndir?
Því .ico er umbúðasnið en ekki myndsnið. Að skilja það er munurinn á favicon sem birtist alls staðar og favicon sem klikkar hljóðlega í Windows og í straumlesurum.
Fyrst skrá yfir efnið, svo myndirnar
Skráin byrjar á sex bæta haus sem segir hve margar myndir fylgja, þá kemur sextán bæta færsla fyrir hverja mynd með breidd, hæð, lengd í bætum og staðsetningu í skránni, og fyrst þá sjálf myndgögnin. Allt er little-endian. Þessi uppbygging er ástæðan fyrir því að PNG sem þú endurnefnir í .ico er ekki .ico.
Sá sem les velur stærðina
Vafri sem teiknar 16 px flipa les yfirlitið, finnur 16 px færsluna og afkóðar aðeins hana. Gefurðu honum eina 512 px mynd minnkar hann hana við teikningu, með ódýrri sýnatöku og óskýrri útkomu. Gefurðu honum 16 px sem er gerð fyrir tilefnið notar hann hana.
Gögnin mega vera PNG
Upprunalega sniðið setti inn BMP með öfugri pixlaröð og sérstakri eins bita gagnsæisgrímu. Allir vafrar og allar Windows-útgáfur frá Vista taka líka við PNG inni í umbúðunum, og það er það sem þetta ico-verkfæri skrifar: minni skrár, alvöru alfa, enginn úreltur kóðari.
Í 16 px sést gæðamunurinn
Að minnka 1024 px merki beint niður í 16 px tekur sýni af of fáum upprunapixlum og skilar gráum kekki. Þetta verkfæri helmingar myndina á millistigum, 1024 í 512 í 256 og svo framvegis, svo hver pixill leggi sitt af mörkum. Það er eina ástæðan fyrir því að lítið favicon helst læsilegt.
Þarf ég enn apple-touch-icon?
Já, og það er eina skráin þar sem reglurnar eru aðrar en fyrir öll hin táknin í pakkanum. Tvennt er gott að vita, hvort tveggja þegar leyst fyrir þig hér að ofan.
iOS hendir gagnsæinu þínu
Safari setur heimaskjástáknið á svartan grunn en ekki á veggfóðrið, svo merki sem þú fluttir vandlega út með gagnsæjum bakgrunni birtist sem form á svartri flís. Þess vegna skrifar verkfærið apple-touch-icon alltaf með ógagnsæjum bakgrunni, hvítum sjálfgefið, líka þótt þú hafir valið gagnsætt fyrir allt annað. iOS setur heldur ekki lengur sinn eigin gljáa yfir frá og með iOS 7, svo það sem þú skilar er það sem fólk sér.
Android klippir, það bætir ekki við spássíu
Android-ræsir tekur maskable-tákn og klippir það í sína eigin lögun, hring, squircle eða rúnnaðan ferning eftir símanum. Aðeins miðjan, 80 %, er tryggð, svo merki sem fyllir flötinn út í kant missir ystu hlutana. Hér heldur maskable-skráin 20 % spássíu sama hvað þú stillir sleðann á, og hringlaga forskoðunin sýnir nákvæmlega hvað ræsirinn heldur eftir.
Hvernig bæti ég favicon á vefinn minn?
Tvö skref, og það er í því seinna sem flest mistökin gerast. Afritaðu blokkina sem verkfærið býr til í stað þess að skrifa hana eftir minni.
Settu skrárnar í rótina
Leggðu favicon.ico og hinar við hliðina á index.html, svo þær svari á vefurinnthinn.is/favicon.ico. Vafrar biðja um nákvæmlega þá slóð upp á eigin spýtur, án þess að nokkur segi þeim það, og þess vegna skiptir staðsetningin meira máli en link-merkið.
Límdu head-blokkina á allar síður
Ekki bara á forsíðuna. Sá sem lendir á undirsíðu og bókamerkir hana á að fá rétta táknið. Ef vefurinn þinn keyrir á sniðmáti eða ramma á blokkin heima í sameiginlega útlitinu.
Skilgreindu .ico án stærðar
Notaðu rel="icon" href="/favicon.ico" sizes="any". Stærðirnar eru þegar inni í umbúðunum, og að harðkóða eina þeirra í kóðann kemur í veg fyrir að vafrinn sæki hinar. SVG-línan kemur fyrst svo vafrar sem skilja vigur velji hana.
Svo hörð endurhleðsla, tvisvar
Favicon eru sett í skyndiminni af hörku og aðskilin frá síðunni, svo gamla táknið þitt getur lifað af venjulega endurhleðslu dögum saman. Opnaðu skrána beint á vefurinnthinn.is/favicon.ico til að staðfesta að nýja skráin sé raunverulega afhent áður en þú ályktar að eitthvað sé bilað.
Viltu athuga hvert QR-kóði eða styttur hlekkur sem þegar er til vísar í raun? Lestu úr honum með QR-kóðalesaranum
Vantar þig stuttan hlekk með nýja vefnum? Búðu til einn með ókeypis hlekkjastyttingunni
Táknið er minni helmingurinn af fyrstu kynnum.
Favicon er það sem fólk sér þegar það er þegar komið inn á vefinn þinn. Erfiðara verkið vinnur hlekkurinn sem kom því þangað, og það er yfirleitt hlutinn sem enginn mælir. Ef það nýtist þér er LinkScale það sem við smíðum.
Sjáðu hvaðan heimsóknin kom
Smellir, lönd, tæki og hvað gerðist næst, fyrir hvern hlekk sem þú deilir, í stað einnar tölu á mælaborði einhvers annars.
Breyttu áfangastaðnum seinna
Beindu prentuðum eða birtum hlekk annað eftir á, án þess að biðja nokkurn um að uppfæra það sem hann vistaði.
Ein síða fyrir allt
Link in bio-síða sem heldur utan um búðina, bókunarformið og samfélagsmiðlana, svo eini hlekkurinn sem þú kemur að nái lengra.
Spurningar um favicon-gerðina
Ertu með fleiri spurningar?
Á netinuAlvöru fólk, svarar yfirleitt innan fárra mínútna.
Hún er ókeypis, án aðgangs, án vatnsmerkis og án takmarkana á fjölda skráa sem þú býrð til. Myndinni þinni er aldrei hlaðið upp: hún er lesin með FileReader vafrans, teiknuð á canvas og pökkuð í Blob, allt inni á síðunni. Það er ekkert endapunktsviðmót á bak við verkfærið, svo það er ekkert til að senda hana á. Þú getur staðfest þetta með því að opna netflipa vafrans á meðan þú notar hana, eða með því að aftengja netið eftir að síðan hefur hlaðist.
Komdu lengra með LinkScale
Faviconið er klárt. Hlekkurinn sem sækir fólkið er hinn helmingurinn.
LinkScale er kerfi fyrir hlekkjastjórnun handa þeim sem vilja vita hvað gerist eftir smellinn, og breyta áfangastaðnum án þess að prenta neitt upp á nýtt.
Free 14-day trial on every plan