Favicon-sarja, joka toimii kaikkialla vuonna 2026
Kuusi kokoa, yksi .ico, yksi manifest — kaikki mitä tarvitset favicon-kuvakkeen toimittamiseen, joka näyttää oikealta jokaisessa selaimessa, iOS-aloitusnäytössä ja Windows-tehtäväpalkissa vuonna 2026.
Faviconit näyttävät triviaalisilta. Kun lähetät yhden, sadan reunatapauksen näyttävät ilmenevän: iOS-aloitusnäytön kuvake on sumea, Android Chrome -välilehti on väärä väri, Windows-painikkeet näyttävät epäterävät 16×16. Tämä opas selkeyttää sekaannusta ja kattaa täsmälleen mitä tarvitset vuonna 2026 — ei enempää, ei vähemmän.
Minimaaliset tarvittavat tiedostot
Kuusi resurssia kattavat jokaisen pinnan, joka näyttää sivustosi kuvakkeen:
favicon.ico— monitasoinen säilö, joka sisältää 16×16, 32×32, 48×48 (vanhat selaimet, Windows Explorer, kiinnitetyt välilehdet).favicon-16x16.png,favicon-32x32.png— modernin selaimen välilehdet.apple-touch-icon.png(180×180) — iOS-aloitusnäyttö, Safarin lukulista.android-chrome-192x192.png,android-chrome-512x512.png— Android-aloitusnäyttö, PWA-asennuskehotukset.site.webmanifest— PWA-konfiguraatio, joka osoittaa Android-kuvakkeisiin ja määrittää teeman värin.
Se on kaikki. Kaikki muu (Safari kiinnitetyn välilehden SVG, vanhat Apple touch -variantit, Windows-laattakuvat) on vanha teknologia. Modernit selaimet palautuvat helposti 192 tai 512 PNG:hen.
Miksi .ico lähetetään edelleen vuonna 2026
.ico-tiedosto on binaarinen säilö, joka voi sisältää useita PNG-kuvia eri kokoisina. Kun selain pyytää /favicon.ico-tiedostoa (jotkut tekevät niin oletuksena), se saa kaikki kolme kokoa yhdessä pyynnössä. Renderöijä valitsee sen, joka sopii parhaiten nykyiselle pinnalle — 48×48 Windows Explorerille, 16×16 selaimen välilehdelle.
PNG uudelleen nimetty .ico:ksi sisältää vain yhden koon. Se enimmäkseen toimii, koska selaimet ovat anteeksiantavia, mutta Windows Explorer ja jotkut sähköpostiohjelmistot joko näyttävät sen epäterävänä tai kieltäytyvät näyttämästä sen. Lähetä todellinen .ico, jos haluat johdonmukaisuutta.
Mitä site.webmanifest tekee
Kun käyttäjä lisää sivustosi Android-aloitusnäyttöön tai asentaa sen PWA:ksi, selain lukee site.webmanifest-tiedoston selvittääkseen, miten asennettu sovellus pitäisi näyttää. Se määrittää:
name/short_name— kuvakkeen alla oleva nimiö.icons— mitkä PNG-kuvat käyttää missä koossa.theme_color— tilapalkin väri, kun sovellus on auki.background_color— käynnistysruudun tausta käynnistyksen aikana.display— yleensästandaloneniin, että sovellus avautuu ilman selaimen chrome-elementtejä.
Ilman manifestia Android palautuu apple-touch-icon:iin ja näyttää sivustosi selaimen ikkunassa. Sen avulla se näyttää alkuperäiseltä sovellukselta.
HTML-koodinpätkä
Jokainen tiedosto sijaitsee web-juuressasi. Jokainen sivusto tarvitsee tämän lohkon <head>-osassa:
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<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="#YOUR_HEX">Suunnittelu 16×16:lle
Sinun kaunis yksityiskohtainen logo kuolee 16 pikselillä. Säännöt favicon-kuvakkeesta, joka luetaan selvästi siinä koossa:
- Yksi muoto. Ympyrä, neliö tai vahva monogrammi. Vältä yhdistettyjä muotoja.
- Korkea kontrasti. Edustan ja taustan on oltava vähintään WCAG AA eroteltu. Hienovaraiset värigradientin häivytetään.
- Turvallinen marginaali. Jätä 10–20 % täyte. Selaimet lisäävät usein 1 pikselin rajan oman puoleltaan.
- Teksti? Yksittäinen lihavoitu kirjain toimii paremmin kuin koko sana 16 pikselissä.
aukimi Favicon Generator tuottaa kaikki kuusi tiedostoa ja HTML-koodinpätkän yhdestä kuvasta tai kirjaimesta alle 30 sekunnissa. Se luo todellisen monitasoisen .ico-tiedoston (Microsoft ICONDIR -spesifikaation mukaisesti), ei uudelleennimettyä PNG:tä. Lataa, valitse koot, lataa zip-vapaa nippu, liitä koodinpätkä — valmis.
Yleiset virheet
- .ico:n palveleminen CDN:stä ilman välimuistikäskyjä. Selaimet välimuistavat faviconit aggressiivisesti. Käytä versioitua URL:ia (
?v=2) päivittämisen jälkeen pakottamaan päivitys. - Eri kuvakkeet alitunnusta kohti. Yksittäinen
favicon.icoapex-tasolla on yleensä mitä käyttäjät odottavat — älä jaa identiteettiäsi. - Unohtaminen
theme-colormetasta. Mobile Chrome väritää selaimen chrome-elementit tälle arvolle. Sen ohittaminen jättää sinut oletusharmaan kanssa.
Hyvä favicon on tylsä parhaalla tavalla — käyttäjät huomaavat kun se puuttuu tai on väärä, eivät koskaan kun se on oikea. Lähetä kuusi tiedostoa ja siirry eteenpäin.
Piditkö tästä artikkelista?
Aiheeseen liittyvät artikkelit
Luova pino romahti: Yksi viikko AI-työkaluista, huhtikuun loppu 2026
27. huhtikuuta – 4. toukokuuta 2026 välisenä aikana Adobe, Luma, Novi, fal, Figma, Canva, HeyGen ja Anthropic ylittivät saman kynnyksen kahdeksassa päivässä. Tässä on mitä julkaistiin, mitä se tarkoittaa, ja mihin se jättää selainpohjaiset luovien sovellusten paketit, jotka yrittävät integroida kaiken.
AI-musiikki ja SFX vuonna 2026: Mikä todella toimii indie-pelien äänityössä
Kolme vuotta sitten indie-pelien ääni tuli joko rojaltivapaista kirjastoista (halpa, generik, jokainen peli kuulostaa samalta) tai palkatussa säveltäjältä (hyvä, kallis). Vuonna 2026 tekoäly tuottaa julkaisukelpoista musiikkia. Tässä on mitkä työkalut toimivat — ja missä ihmissäveltäjä voittaa.
AI-pohjainen mesh-generointi 2026: Mitä todellisuudessa toimitetaan peliputkiin
Image-to-3D siirtyi "kammottavasta demosta" "indie-projekteihin toimitetuksi" 18 kuukaudessa. Tässä on, mitä Tripo, Meshy, Rodin ja Hyper3D todella tekevät tuotannossa — ja missä 3D-taiteilija voittaa mallin joka kerta.