Dokumentacija

Dodajte favicon

Dodajte favicon

Favicon je majhna ikona v zavihku brskalnika, med zaznamki, na domačem zaslonu telefona in ob vaši strani v Googlovih rezultatih na mobilnih napravah. Brez nje brskalnik pokaže prazen simbol strani, Google pa splošen globus. Je malenkost, a ljudje po njej najprej najdejo vaš zavihek med dvajsetimi drugimi, stran brez ikone pa deluje nedokončano.

Kontrolni seznam strani na domači strani išče oznako <link rel="icon"> ali datoteko na /favicon.ico in opozori, kadar ne najde ničesar od tega.

Katere datoteke potrebujete

Začnite z eno kvadratno sliko, veliko vsaj 512 × 512 px, s preprosto obliko, ki je berljiva tudi pri 16 px. Iz nje potrebujete:

Datoteka Velikost Kdo jo uporablja
/favicon.ico 32 × 32 (lahko vsebuje tudi 16 × 16) vsi brskalniki; zahtevajo jo samodejno, tudi brez oznake
icon.svg ali icon.png SVG ali PNG 48 × 48 ali več sodobni brskalniki, Googlovi rezultati
apple-touch-icon.png 180 × 180 domači zaslon iPhona in iPada
PNG 192 × 192 in 512 × 512 v manifestu spletne aplikacije domači zaslon Androida, strani, ki jih je mogoče namestiti

Google favicon v rezultatih pokaže samo, če ga domača stran poveže z oznako, je ikona kvadratna in velika vsaj 8 × 8 px (Google priporoča več kot 48 × 48) in je robots.txt ne blokira. Datoteka na /favicon.ico brskalnikom zadošča, Googlu pa ne vedno.

Preverite sami

Namesto example.com vpišite svojo stran:

curl -s https://example.com | grep -ioE '<link[^>]*rel="[^"]*icon[^"]*"[^>]*>'
curl -sI https://example.com/favicon.ico | grep -iE '^(HTTP|content-type|content-length):'

Prvi ukaz izpiše oznake ikon, drugi preveri klasično datoteko. Popravljeno pomeni vsaj eno oznako, datoteka, na katero kaže, pa odgovori s 200 in tipom slike (image/x-icon, image/vnd.microsoft.icon, image/png ali image/svg+xml).

Kako popraviti

Izberite, kako je vaša stran narejena. V CMS-ih in na gostovanih platformah naložite eno sliko, ostalo naredi platforma; v lastni kodi datoteke in oznake dodate sami.

WordPress

WordPress favicon imenuje Site Icon in iz ene naložene slike ustvari vse velikosti (32, 180, 192 in 270 px). Potrebuje kvadratno sliko, veliko vsaj 512 × 512 px.

  • Klasične teme: Appearance → Customize → Site Identity → Site Icon, naložite sliko in kliknite Publish.
  • Teme blokov: odprite Appearance → Editor, izberite blok Site Logo in v njegovih nastavitvah vklopite Use as Site Icon. Novejše različice WordPressa Site Icon pokažejo tudi pod Settings → General.

Če ste ikono nastavili, kontrolni seznam pa je še vedno ne najde, tema v glavi ne kliče wp_head(), kar pokvari tudi večino vtičnikov: zamenjajte jo z vzdrževano temo ali se obrnite na njenega razvijalca. Nato počistite predpomnilnik strani.

Node.js in Next.js

Next.js, App Router. Datoteke postavite v mapo app in Next.js oznake doda sam:

Datoteka v app/ Postane
favicon.ico <link rel="icon" href="/favicon.ico">
icon.png ali icon.svg <link rel="icon" …> s tipom in velikostjo
apple-icon.png <link rel="apple-touch-icon" …>

favicon.ico deluje samo neposredno v app/, ne v podmapi.

Next.js, Pages Router, in druge aplikacije Node.js. Datoteke postavite v public/ (ali svojo mapo s statičnimi datotekami) in oznake dodajte v glavo strani: v Next.js v pages/_document.js, v Expressu, Nuxtu, Astru ali SvelteKitu v glavno predlogo. Oznake so enake kot v zavihku Statični HTML.

Laravel

Novi projekti Laravel imajo public/favicon.ico, ki je v mnogih različicah prazna (0 bajtov). Odgovori z 200, zato preverjanje uspe, brskalniki pa ne pokažejo ničesar. Zamenjajte jo s pravo ikono in ostale datoteke dodajte v public/.

Nato jih povežite v glavni predlogi (na primer resources/views/layouts/app.blade.php), znotraj <head>:

<link rel="icon" href="{{ asset('favicon.ico') }}" sizes="32x32">
<link rel="icon" href="{{ asset('icon.svg') }}" type="image/svg+xml">
<link rel="apple-touch-icon" href="{{ asset('apple-touch-icon.png') }}">

Statični HTML

Datoteke postavite v koren strani in te vrstice dodajte znotraj <head> na vsaki strani (ali v osnovno predlogo generatorja strani):

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

Manifest ni obvezen in je potreben samo za domači zaslon Androida. Najmanjši, shranjen kot site.webmanifest:

{
    "name": "Example",
    "icons": [
        { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
        { "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" }
    ]
}

Za favicon.ico je dober vsak urejevalnik slik, ki zna izvoziti ICO, pa tudi številni brezplačni spletni generatorji faviconov, ki ustvarijo celoten nabor.

Shopify

Online Store → Themes → Customize, nato odprite Theme settings (ikona zobnika). Glede na temo je favicon pod Logo ali v svojem razdelku Favicon. Naložite kvadratno sliko (Shopify jo pomanjša na 32 × 32) in kliknite Save.

Wix

Odprite nadzorno ploščo strani in pojdite na Settings → Favicon. Naložite kvadratno sliko in shranite. Wix lasten favicon pokaže samo s paketom Premium in povezano domeno; brez tega pokaže ikono Wix.

Webflow

Site settings → General → Favicon: naložite PNG ali ICO velikosti 32 × 32. V istem razdelku je Webclip ikona za domači zaslon (256 × 256). Nato stran znova objavite.

Squarespace

Squarespace favicon imenuje browser icon. V nastavitvah strani poiščite "Browser icon" (mesto v meniju se je med različicami selilo), naložite kvadraten PNG (vsaj 300 × 300 px) in shranite.

Brskalniki favicone predpomnijo

Brskalniki favicone hranijo dolgo, pogosto dlje kot predpomnilnik strani. Če ste ikono zamenjali, pa se še vedno kaže stara (ali nobena), pred drugimi spremembami preverite v zasebnem oknu ali z ukazoma curl zgoraj. Google ikono v rezultatih posodobi, ko naslednjič prebere domačo stran, kar lahko traja od nekaj dni do nekaj tednov.

Potrdite popravek

Znova poženite oba ukaza curl iz razdelka Preverite sami, nato v PulseKeeperju odprite tarčo in na zavihku Kontrolni seznam kliknite Preveri zdaj. Postavka se v nekaj minutah obarva OK, ne šele ob naslednjem dnevnem preverjanju.