Hvaða favicon-stærðir þarftu árið 2026? Tilvalið skráasett

Árið 2026 er tilvalið favicon-skráasett þetta: favicon.ico sem inniheldur 16, 32 og 48 px myndir, 96x96 PNG (fyrir Google-leit), valfrjáls SVG-favicon, 180x180 apple-touch-icon.png, og 192x192 og 512x512 PNG (auk maskable 512) sem eru skilgreind í web app manifest. Windows-flísar og eldri Apple-stærðir þarf aðeins ef þú verður að styðja mjög gömul tæki. Hér fyrir neðan er útskýrt hvers vegna, með stærðartöflu, tilbúnu HTML og algengum mistökum sem ber að forðast.

Favicon-landslagið var áður í óreiðu: hver vafri og hvert stýrikerfi bað um sína eigin stærð, sem leiddi til hinna alræmdu 20 lína <head>-blokka. Í dag er mestallt þetta úrelt. Nútímavafrar skala eitt gott tákn, iOS vill eina stærð og Android les manifestið. Þessi grein aðgreinir það sem er í raun nauðsynlegt frá því sem er einungis gott að hafa.

Stutta svarið: tilvalið skráasett fyrir favicon

• favicon.ico (16, 32, 48 px í einni skrá) í rótarmöppu vefsins. Vafrar, fréttaveitulesarar og mörg verkfæri biðja enn sjálfkrafa um /favicon.ico.
• favicon.svg (valfrjálst en mælt með) fyrir skarpa birtingu í hvaða stærð sem er og stuðning við dökka stillingu.
• PNG 16x16, 32x32 og 96x96 sem skýrar varaleiðir. 96 px útgáfan hjálpar í Google-leit, sem krefst margfeldis af 48 px.
• apple-touch-icon.png í 180x180, ógegnsætt, án gegnsæis.
• 192x192 og 512x512 PNG í manifest.json, auk maskable 512x512 tákns fyrir Android.
• theme-color meta-tagg til að lita viðmót vafrans í farsímum.
• Windows-flísar (70, 150, 310 px) með browserconfig.xml aðeins fyrir eldri Windows og fest vefsvæði í IE11.

Tafla yfir favicon-stærðir: tilgangur, skráarheiti og forgangur

Notaðu þessa töflu sem gátlista. „Nauðsynlegt“ þýðir að venjulegur vefur lítur út fyrir að vera bilaður eða ókláraður án þess; „Mælt með“ þýðir greinilegur gæðaauki; „Valfrjálst“ þýðir sérhæfða eða eldri notkun.

favicon.ico: 16, 32 og 48 px í einni skrá

ICO-skrá er gámur sem geymir nokkrar bitamyndir. Góð favicon.ico inniheldur 16x16, 32x32 og 48x48 myndir svo að vafrinn eða stýrikerfið geti valið þá sem passar best. Settu hana í rót lénsins (https://example.com/favicon.ico). Jafnvel þótt HTML-ið þitt vísi annað biðja margir leitarvélaskriðlar, RSS-lesarar og eldri vafrar enn um nákvæmlega þessa slóð, svo að með því að hafa hana losnarðu við 404-suð í annálunum þínum.

Ekki endurnefna PNG-skrá einfaldlega í .ico. Flestir vafrar þola það, en sum verkfæri hafna því og þú missir ávinninginn af mörgum upplausnum. Fluttu út raunverulega ICO-skrá.

PNG-favicon: 16, 32 og 96 px

PNG-tenglar með skýru sizes leyfa vafranum að velja bestu bitamyndina án þess að þurfa að lesa ICO-skrána. Í reynd nær 32x32 yfir flipa með háa pixlaþéttni og 16x16 er nær óþörf í dag. Það er þess virði að bæta við stærðinni 96x96 því Google-leit birtir favicon við hlið niðurstaðna og krefst ferningslaga tákns þar sem stærðin er margfeldi af 48 px (48x48, 96x96, 144x144 og svo framvegis). 96 px skrá gefur Google skarpari upprunamynd en 48 px skrá þegar hún er smækkuð fyrir farsímaniðurstöður.

Hönnunarráð: í 16 px hverfa fíngerð smáatriði. Notaðu djarft, einfalt form, mikla birtuskil og lítinn eða engan texta. Þú getur fínstillt og forskoðað táknið þitt í MakeFav-ritlinum áður en þú flytur það út.

SVG-favicon og dökk stilling

SVG-favicon er ein örlítil skrá sem helst skörp á hvaða skjáþéttni sem er. Vafrar byggðir á Chromium og Firefox styðja hana. Stuðningur Safari hefur í gegnum tíðina verið takmarkaður, svo treystu aldrei á SVG eitt og sér: haltu ICO og PNG sem varaleiðum.

Stærsti kosturinn er þemun. Þar sem SVG getur innihaldið CSS geturðu aðlagað táknið að litastillingu notandans með prefers-color-scheme:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    .bg { fill: #0f172a; }
    .fg { fill: #ffffff; }
    @media (prefers-color-scheme: dark) {
      .bg { fill: #ffffff; }
      .fg { fill: #0f172a; }
    }
  </style>
  <rect class="bg" width="32" height="32" rx="6"/>
  <circle class="fg" cx="16" cy="16" r="8"/>
</svg>

Athugaðu að fyrirspurnin (media query) endurspeglar þema vafrans eða stýrikerfisins, sem er það sem flipastikan notar. Hún fylgir ekki þemaskiptum á þínum eigin vef.

Ein þekkt sérviska: þegar bæði ICO og SVG eru skráð getur Chrome valið ICO. Ef ICO er skilgreind með sizes="32x32" og SVG skráð á eftir velur Chrome frekar SVG, eins og sýnt er í kóðanum hér að neðan.

Apple touch icon: 180x180 og eldri stærðir

Þegar notandi bætir vefnum þínum á heimaskjá iOS eða iPadOS notar Safari apple-touch-icon. Í dag nægir ein 180x180 px PNG-skrá: iOS smækkar hana fyrir eldri tæki og iPada. Nefndu hana apple-touch-icon.png og settu í rótina; iOS leitar meira að segja að þeirri skrá sjálfgefið ef enginn link-tagg er til staðar.

Reglur fyrir Apple-táknið:

• Ekkert gegnsæi. iOS fyllir gegnsæja díla með svörtu, svo gegnsætt lógó breytist oft í svartan blett. Bættu við heilsteyptum bakgrunnslit.
• Engin ávöl horn. iOS beitir sinni eigin ávölu grímu. Skilaðu fullum ferningi.
• Haltu mikilvægu efni frá allra yztu brúnum, þar sem hornin eru klippt af.

Hvenær þarftu eldri stærðirnar (57, 72, 76, 114, 120, 144, 152, 167)? Aðeins ef þú styður iOS 6 eða eldra, eða vilt nákvæma pixlastjórn fyrir hvert tæki fyrir iPad Pro (167 px) og iPad (152 px). Fyrir nánast alla vefi árið 2026 nægir 180x180 skráin ein og sér. Uppsetningin með hámarkssamhæfi hér að neðan inniheldur nokkrar til fullnustu.

Android- og PWA-tákn: 192, 512 og maskable

Chrome á Android og aðrir vafrar sem styðja PWA lesa tákn úr web app manifest, ekki úr <link rel="icon">. Til að hægt sé að setja vefinn upp þarftu að minnsta kosti 192x192 og 512x512 PNG. 192 px táknið er notað á heimaskjánum og í forritaskránni; 512 px táknið birtist á ræsiskjám og í uppsetningargluggum.

Maskable-tákn og öryggissvæðið

Aðlögunarhæf Android-tákn geta verið klippt í hring, squircle eða annað form eftir tækinu. Maskable-tákn er hannað til að vera klippt á öruggan hátt: mikilvæga efnið verður að vera innan öryggissvæðisins, miðjusetts hrings með þvermál sem er 80% af myndinni (radíus jafngildir 40% af hliðinni). Fyrir 512x512 skrá þýðir það að halda lógóinu innan hrings sem er um 410 px í þvermál og láta bakgrunnslitinn ná út í allar fjórar brúnirnar svo engar eyður sjáist eftir að gríman er sett á.

Skilgreindu maskable-táknið sem sérstaka færslu með "purpose": "maskable". Forðastu "any maskable" á einni skrá: fyllingin sem þarf fyrir grímuna lítur of lítil út þegar táknið er sýnt án grímu.

Dæmi um manifest.json

{
  "name": "Example App",
  "short_name": "Example",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#0f172a",
  "icons": [
    {
      "src": "/web-app-manifest-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/web-app-manifest-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/maskable-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
  ]
}

Bjóddu skrána fram sem application/manifest+json (eða application/json) og tengdu hana á hverri síðu með <link rel="manifest" href="/manifest.json">. Sum verkefni nefna hana site.webmanifest; nafnið skiptir ekki máli, tengillinn gerir það.

Windows-flísar og browserconfig.xml

Windows 8.1 og 10 leyfa notendum að festa vef í Start-valmyndina, og IE11 og eldri Edge lesa flísamyndir úr browserconfig.xml. Algengu stærðirnar eru 70x70 (lítil), 150x150 (miðlungs), 310x150 (breið) og 310x310 (stór). Edge byggður á Chromium notar manifestið og venjuleg favicon í staðinn, svo þetta er eldri eiginleiki. Hafðu það aðeins með ef áhorfendur þínir innihalda enn eldri Windows-uppsetningar, til dæmis í fyrirtækjaumhverfi.

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
  <msapplication>
    <tile>
      <square70x70logo src="/mstile-70x70.png"/>
      <square150x150logo src="/mstile-150x150.png"/>
      <wide310x150logo src="/mstile-310x150.png"/>
      <square310x310logo src="/mstile-310x310.png"/>
      <TileColor>#0f172a</TileColor>
    </tile>
  </msapplication>
</browserconfig>

theme-color: að lita viðmót vafrans

Meta-taggið theme-color segir farsímavöfrum (og sumum skjáborðsvöfrum) hvaða lit á að nota fyrir veffangastikuna eða titilstikuna. Það er ekki favicon, en tilheyrir sama vörumerkjasetti. Þú getur gefið upp aðskilin gildi fyrir ljósa og dökka stillingu:

<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#0f172a" media="(prefers-color-scheme: dark)">

Lágmarks nútímaleg uppsetning á móti hámarkssamhæfi

Lágmarks nútímaleg uppsetning (mælt með fyrir flesta vefi)

Fimm skrár ná yfir meira en 99% raunverulegrar notkunar: favicon.ico, favicon.svg, apple-touch-icon.png (180x180) og tvö manifest-tákn (192 og 512). Bættu við 96x96 PNG ef sýnileiki í Google-leit skiptir máli, og maskable-tákni ef þú gefur út PWA.

<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.json">

Uppsetning með hámarkssamhæfi

Veldu þessa leið þegar þú þjónar breiðum hópi eða fyrirtækjum, eða vilt ná yfir öll möguleg forrit. Hún bætir við skýrum PNG-stærðum, eldri Apple-stærðum, Windows-flísum og þemalitum.

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Classic and modern browser icons -->
  <link rel="icon" href="/favicon.ico" sizes="32x32">
  <link rel="icon" href="/favicon.svg" type="image/svg+xml">
  <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">

  <!-- Apple -->
  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
  <link rel="apple-touch-icon" sizes="167x167" href="/apple-touch-icon-167x167.png">
  <link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
  <link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">

  <!-- Android / PWA -->
  <link rel="manifest" href="/manifest.json">
  <meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
  <meta name="theme-color" content="#0f172a" media="(prefers-color-scheme: dark)">

  <!-- Windows (legacy) -->
  <meta name="msapplication-config" content="/browserconfig.xml">
  <meta name="msapplication-TileColor" content="#0f172a">

  <title>Example</title>
</head>

Taktu eftir slóðunum miðað við rót sem byrja á /. Þær virka á hvaða dýpt síðu sem er, sem leiðir okkur að algengustu mistökunum.

Algeng favicon-mistök og hvernig á að laga þau

1. Rangar slóðir

Tengill eins og href="favicon.ico" er leystur miðað við núverandi slóð, svo hann virkar á / en bilar á /blog/post/. Notaðu slóðir miðað við rót (/favicon.ico) eða algildar slóðir. Athugaðu líka að skrárnar séu raunverulega til: opnaðu hverja slóð beint í vafranum og gakktu úr skugga um að hún skili HTTP 200, ekki tilvísun á 404-síðu eða innskráningarvegg.

2. Vantar sizes-eigindina eða hún röng

Án sizes þurfa vafrar að sækja táknin til að skoða þau og geta valið rangt. Skilgreindu alltaf sizes á PNG-tenglum og vertu viss um að það passi við raunverulegar pixlastærðir. Skrá merkt 32x32 sem er í raun 64x64 veldur ósamræmi í niðurstöðum.

3. Of árásargjörn skyndiminnisvistun

Vafrar vista favicon í skyndiminni í langan tíma, oft óháð skyndiminni síðunnar. Eftir endurmörkun getur gamla táknið setið eftir dögum saman. Breyttu skráarheitinu eða bættu við útgáfustreng í fyrirspurn (/favicon.ico?v=2) og uppfærðu link-taggana. Hörð endurhleðsla uppfærir oft ekki flipatáknið; að opna slóð táknsins beint og endurhlaða hana gerir það yfirleitt.

4. Myndir sem eru ekki ferningslaga

Favicon verða að vera ferningslaga. Ferhyrnt lógó er teygt, klippt eða fær svartar rendur á ófyrirsjáanlegan hátt. Hannaðu sérstakt ferningslaga merki, eins og upphafsstaf eða tákn, í stað þess að minnka breitt orðmerki.

5. Gegnsæ Apple touch icon sem verða svört

iOS fyllir gegnsæi með svörtu. Gefðu 180x180 tákninu ógegnsæjan bakgrunn og ekki rúnna hornin fyrirfram.

6. Maskable-tákn án öryggissvæðis

Ef lógóið snertir brúnir maskable-tákns klippir Android það af. Haltu því innan miðjuhringsins sem er 80% og fylltu allan strigann með bakgrunnslitnum.

7. Að loka á tákn fyrir skriðlum

Ef robots.txt bannar slóð favicon-sins þíns getur Google ekki sótt það og sýnir almennt hnattartákn í leitarniðurstöðum. Mundu líka að Google þarf favicon á sama hýsli og síðan og uppfærir það aðeins af og til, svo breytingar geta tekið daga eða vikur að birtast.

8. Að gleyma manifest-tenglinum eða purpose-gildum

Manifest sem er ekki tengt, eða skortir 192 og 512 px tákn, kemur í veg fyrir uppsetningarboð í Chrome. Staðfestu það í þróunarverkfærum vafrans undir Application-flipanum.

Búðu til allt settið með einum smelli

Að búa til tugi skráa í höndunum í myndritli, umbreyta svo í ICO og skrifa manifestið, er leiðinlegt og villuhætt. MakeFav býr til allar skrárnar hér að ofan úr einni mynd, texta eða emoji: favicon.ico með mörgum stærðum, PNG, SVG, Apple touch icon, 192/512 PNG, maskable-tákn, Windows-flísar, manifest.json og browserconfig.xml, ásamt HTML-bút tilbúnum til að líma inn, allt í einu ZIP-niðurhali. Þú getur fínstillt bakgrunn, fyllingu og lögun í ritlinum, athugað núverandi vef með favicon-prófaranum og sjálfvirknivætt gerð táknanna í gegnum forritaraúrræðin.

Gátlisti fyrir uppsetningu

1. Hladdu öllum skrám upp í rót vefsins þíns.
2. Límdu HTML-bútinn inn í <head> á hverri síðu (eða í sameiginlega útlitsskrá).
3. Gakktu úr skugga um að slóðir séu miðaðar við rót og skili HTTP 200.
4. Athugaðu ljósa og dökka stillingu, uppsetningu á heimaskjá iOS og uppsetningu á Android.
5. Keyrðu prófarann til að finna stærðir sem vantar eða passa ekki.
6. Hreinsaðu skyndiminni með útgáfustreng ef þú skiptir út gömlu tákni.

Algengar spurningar

Þarf ég enn favicon.ico árið 2026?

Já. Þótt nútímavafrar taki við PNG og SVG biðja margir skriðlar, fréttaveitulesarar, tölvupóstforrit og eldri vafrar enn beint um /favicon.ico. ICO með mörgum stærðum, 16, 32 og 48 px myndum, er lítil skrá sem kemur í veg fyrir tákn sem vantar og 404-villur.

Hvaða stærð ætti favicon að vera fyrir Google-leit?

Google krefst ferningslaga favicon þar sem stærðin er margfeldi af 48 px, að minnsta kosti 48x48. 96x96 PNG er öruggt val og SVG er einnig stutt. Google þarf líka að geta skriðið skrána, svo ekki loka á hana í robots.txt. Uppfærslur geta tekið daga eða vikur að birtast.

Er 180x180 nóg fyrir Apple touch icon?

Fyrir nánast alla vefi, já. iOS og iPadOS smækka 180x180 PNG fyrir öll núverandi tæki. Eldri stærðirnar (57 til 152 px) skipta aðeins máli fyrir mjög gamlar iOS-útgáfur. Mundu að nota ógegnsæjan bakgrunn svo táknið verði ekki svart.

Hvað er maskable-tákn og þarf ég slíkt?

Maskable-tákn er 512x512 PNG hannað fyrir aðlögunarhæf táknlögun Android. Mikilvægt efni þess er innan hrings með 80% þvermáli í miðjunni og bakgrunnurinn fyllir allan ferninginn. Þú þarft það aðeins ef þú býður upp á PWA sem hægt er að setja upp, en það lætur táknið líta út fyrir að vera eðlilegt í kerfinu í stað þess að sitja í hvítum hring.

Af hverju birtist gamla favicon-ið mitt enn eftir að ég breytti því?

Vafrar vista favicon sérstaklega í skyndiminni og í langan tíma. Endurnefndu skrána eða bættu við útgáfustreng í fyrirspurn eins og ?v=2, uppfærðu link-taggana og opnaðu síðan slóð táknsins beint og endurhlaðaðu hana. Leitarvélar gætu þurft lengri tíma til að uppfæra sitt eigið afrit.