Kas ir favicon un kāpēc tas ir svarīgs jūsu vietnei?

Favicon (saīsinājums no „favorite icon”, latviski – „izlases ikona”) ir mazs kvadrātveida attēls, kas pārstāv vietni pārlūka cilnēs, grāmatzīmēs, vēstures sarakstos, Google meklēšanas rezultātos, tālruņu sākuma ekrānos un instalētās tīmekļa lietotnēs. Tas ir svarīgi, jo piešķir jūsu vietnei atpazīstamu seju jau no pirmā acu uzmetiena, atvieglo tās atrašanu starp daudzām atvērtām cilnēm, liecina par profesionalitāti un uzticamību, un tagad tiek rādīts blakus jūsu vietnes nosaukumam Google rezultātos. Ja favicon nav, apmeklētāji redz vispārēju globusa vai tukšas lapas ikonu, bet jūsu serveris savos žurnālos uzkrāj 404 kļūdas. Pilnu favicon komplektu varat izveidot bez maksas ar MakeFav favicon ģeneratoru.

Kas ir favicon?

Favicon ir sīka zīmola grafika, parasti vienkāršota logotipa versija vai viens burts vai simbols, ko pārlūkprogrammas un cita programmatūra ielādē no jūsu vietnes un attēlo visur, kur nepieciešams kompakts vizuāls identifikators. Darbvirsmas pārlūkā tā parasti tiek zīmēta 16 × 16 CSS pikseļu izmērā, taču pašam failam jābūt lielākam, lai tas paliktu skaidrs augsta blīvuma ekrānos.

Tehniski favicon ir vienkārši attēla fails, uz kuru atsaucas jūsu HTML (vai kas atrodas noklusējuma vietā) un ko lietotāja aģenti lejupielādē atsevišķi no lapas satura. Mūsdienās „favicon” reti ir viens fails. Moderna vietne parasti piegādā vairākas vienas ikonas versijas, lai pārlūkprogrammas, meklētājprogrammas, iOS un Android saņemtu sev piemērotu formātu un izmēru.

Favicon īsā vēsture

Favicon aizsākās 1999. gada martā, kad Microsoft izlaida Internet Explorer 5. Pārlūks ļāva lietotājiem saglabāt lapas sarakstā „Favorites”, kā arī meklēja mazu ikonas failu ar nosaukumu favicon.ico vietnes saknē, lai parādītu to blakus katram saglabātajam ierakstam. Ideja bija vienkārša: ja vietne nodrošināja /favicon.ico, ikona parādījās blakus grāmatzīmei.

Drīz šo funkciju pārņēma arī citi pārlūki, un cilņu izmantošana to padarīja daudz noderīgāku. Kad cilnes kļuva par galveno navigācijas veidu, favicon no grāmatzīmes rotājuma pārtapa par būtisku navigācijas palīglīdzekli. Gadu gaitā pieeja attīstījās:

• 2000. gadu sākums: elements <link rel="icon"> ļāva vietnēm norādīt ikonu jebkurā URL, nevis tikai saknē, un pārlūki, kas nav IE, sāka pieņemt PNG un GIF failus.
• 2010. gadi: Apple ieviesa apple-touch-icon iOS sākuma ekrāniem, bet Android un Windows pievienoja savas konvencijas, piemēram, manifesta ikonas un flīžu attēlus.
• Šodien: SVG favicon, tīmekļa lietotņu manifesti, ikonas, kas pielāgojas tumšajam režīmam, un Google prasības favicon meklēšanas rezultātos ir padarījušas favicon par nelielu, bet reālu vietnes tehniskās konfigurācijas daļu.

Kur favicon parādās šodien

Jūsu favicon tiek rādīts daudz vairāk vietās nekā tikai pārlūka cilnē. Galvenās no tām ir:

• Pārlūka cilnes: redzamākā vieta, kur ikona bieži ir vienīgais, ko var saskatīt, kad ir atvērtas daudzas cilnes.
• Grāmatzīmes un izlase: ikona atrodas blakus lapas nosaukumam grāmatzīmju joslās un izvēlnēs.
• Vēsture un visbiežāk apmeklētās lapas: pārlūki rāda favicon vēstures sarakstos un jaunās cilnes lapās.
• Google meklēšanas rezultāti: gan mobilajās ierīcēs, gan datoros Google blakus vietnes nosaukumam un URL rāda vietnes favicon.
• Sākuma ekrāni: kad apmeklētājs pievieno jūsu vietni sākuma ekrānam iOS vai Android ierīcē, touch ikona vai manifesta ikona kļūst par lietotnei līdzīgu saīsni.
• Instalētas PWA: progresīvā tīmekļa lietotne izmanto savā tīmekļa lietotnes manifestā norādītās ikonas palaišanas ikonai, sākuma ekrānam un uzdevumu pārslēdzējam.
• Windows flīzes un piespraustās vietnes: vecākas Windows un Edge versijas izmantoja piespraustajām vietnēm definētus flīžu attēlus; modernās lielākoties izmanto jūsu standarta ikonas.
• Saišu priekšskatījumi dažās lietotnēs: atsevišķi tērzēšanas un produktivitātes rīki (labi zināms piemērs ir Slack) rāda vietnes favicon blakus izvērstai saitei. Lielākā daļa priekšskatījumu galvenokārt balstās uz Open Graph attēliem, taču favicon bieži nodrošina mazo zīmola zīmi.

Kāpēc favicon ir svarīgs jūsu vietnei

Zīmola atpazīstamība

Cilvēki krāsas un formas atpazīst ātrāk, nekā lasa tekstu. Konsekventa ikona, kas atkārtojas cilnēs, grāmatzīmēs un meklēšanas rezultātos, veido pazīstamību katru reizi, kad kāds to ierauga, un tā ir bezmaksas zīmola redzamība katrā apmeklējumā.

Uzticēšanās un ticamība

Favicon trūkums liek vietnei izskatīties nepabeigtai. Tīra, pareizi attēlota ikona ir neliels signāls, ka kāds rūpējas par detaļām, un tas veicina priekšstatu, ka vietne ir likumīga. Tā nav drošības funkcija, un pikšķerēšanas vietnes var kopēt ikonas, taču tukša noklusējuma ikona reti palīdz uzņēmumam izskatīties stabilam.

Klikšķu skaits meklēšanas rezultātos

Tā kā Google rāda favicon blakus jūsu ierakstam, tā kļūst par daļu no tā, kā jūsu rezultāts izskatās blakus konkurentiem. Google nepublicē favicon ietekmi uz rangu, un nevajadzētu gaidīt pozīciju uzlabojumu. Ieguvums ir saistīts ar vizuālo atpazīstamību: lietotāji, kas pazīst jūsu ikonu, biežāk pamanīs un izvēlēsies jūsu rezultātu, īpaši mobilajās ierīcēs, kur rezultāti ir kompakti.

Lietojamība ar daudzām atvērtām cilnēm

Kad pārlūkā ir atvērtas divdesmit cilnes, nosaukumi tiek saīsināti līdz nullei un paliek tikai favicon. Atšķirīga ikona ļauj cilvēkiem uzreiz atrast jūsu cilni un atgriezties pie tās, nevis atvērt dublikātu vai aizmirst par to.

Profesionāls iespaids

Labi izstrādāts favicon liecina par tādu pašu uzmanību detaļām kā pārējā jūsu vietne. Gan produktu lapām, dokumentācijai, blogiem, gan tīmekļa lietotnēm tas ir viens no lētākajiem veidiem, kā pievienot nepieciešamo noslīpējumu.

Cilnes atrašanas pieejamība

Ikonas palīdz lietotājiem, kuri pārlūko vizuāli, nevis lasa, tostarp cilvēkiem ar disleksiju vai kognitīvām atšķirībām, kā arī ikvienam, kas ātri pārslēdzas starp uzdevumiem. Augsta kontrasta ikonu ar vienkāršu formu ir vieglāk izšķirt. Tomēr atcerieties, ka favicon ir papildinājums: tas neaizstāj skaidru lapas nosaukumu, uz kuru paļaujas ekrāna lasītāji un palīgtehnoloģijas.

Kas notiek, ja jums nav favicon

Pārlūki automātiski pieprasa /favicon.ico no jūsu domēna saknes, pat ja jūsu HTML to neminē. Ja fails neeksistē, notiek vairāki procesi:

• Vispārēja ikona: apmeklētāji cilnē un grāmatzīmēs redz noklusējuma globusa, dokumenta vai tukšu ikonu, kas izskatās anonīma.
• 404 kļūdas jūsu žurnālos: katrs pārlūks, kas pieprasa failu, rada neveiksmīgu pieprasījumu. Noslogotās vietnēs tas pievieno troksni piekļuves žurnāliem, kļūdu uzraudzībai un analītikai un var noslēpt reālas problēmas.
• Nav ikonas Google rezultātos: bez derīga, pārmeklējama favicon Google blakus jūsu ierakstam rāda savu noklusējuma vietturi.
• Veltīgi pieprasījumi: pārlūki var mēģināt vēlreiz, radot nelielu, bet bezjēdzīgu slodzi jūsu serverim.

Pat ļoti vienkārša ikona ir labāka par neko, jo tā novērš 404 kļūdas un dod lietotājiem kaut ko atpazīstamu.

Favicon formāti paskaidroti

Neviens formāts neaptver visas platformas, tāpēc lielākā daļa vietņu izmanto nelielu failu kopu.

Vecie Windows flīžu attēli (konfigurēti ar browserconfig.xml) bija nepieciešami Internet Explorer 11 un vecajam Edge. Tagad tie reti ir vajadzīgi, ja vien jums nav jāatbalsta šīs vides.

Google favicon vadlīnijas meklēšanas rezultātiem

Ja vēlaties, lai jūsu ikona parādītos Google meklēšanā, ievērojiet Google publicētās prasības:

• Izmērs: attēlam jābūt kvadrātveida (1:1) un 48 pikseļu daudzkārtnim, piemēram, 48x48, 96x96 vai 144x144. Tad Google to samazina līdz 16x16 attēlošanai. Minimālais atbalstītais izmērs ir 8x8, taču ieteicams 48x48 vai lielāks.
• Formāti: der jebkurš pārlūku atbalstīts formāts, tostarp ICO, PNG un SVG.
• Stabils URL: nemainiet favicon URL bieži. Stabila adrese palīdz Google uzturēt jūsu ikonu aktuālu.
• Pārmeklējams: gan favicon failam, gan jūsu sākumlapai jābūt pieejamiem Googlebot. Nebloķējiet tos failā robots.txt un neslēpiet aiz pieteikšanās.
• Viena deklarācija vietnei: ikona ir piesaistīta vietnes sākumlapai, tāpēc ievietojiet <link> tagu savas sākumlapas head sadaļā.
• Reprezentatīva un piemērota: ikonai jāatspoguļo jūsu zīmols, un Google var aizstāt aizvainojošu vai maldinošu ikonu ar savu noklusējuma ikonu.

Pēc favicon publicēšanas vai maiņas Google var būt vajadzīgas dienas vai nedēļas, lai to atkārtoti pārmeklētu un atjauninātu, tāpēc negaidiet tūlītējas izmaiņas.

Kā ātri izveidot favicon ar MakeFav

Jums nav vajadzīga dizaina programmatūra vai komandrinda. MakeFav ģenerators pārvērš vienu avota attēlu augstāk aprakstītajos failos.

1. Sagatavojiet savu grafiku. Izmantojiet kvadrātveida logotipu vai simbolu 512 x 512 px vai lielākā izmērā. Vienkāršas formas darbojas vislabāk, jo ikona tiks redzama 16 px izmērā.
2. Augšupielādējiet to MakeFav sākumlapā vai atveriet redaktoru, lai pirms eksportēšanas pielāgotu attēlu, fonu un atstarpes.
3. Apskatiet priekšskatījumu mazos izmēros un uz gaiša un tumša fona, lai pārliecinātos, ka ikona paliek salasāma.
4. Lejupielādējiet komplektu. Tajā ir ICO, PNG izmēri, Apple touch icon, manifesta ikonas un HTML fragments, ko ielīmēt.
5. Augšupielādējiet failus savas vietnes saknē, lai tie būtu pieejami ceļos, piemēram, /favicon.ico.
6. Pievienojiet HTML katras lapas <head> sadaļai vai savam kopīgajam izkārtojumam vai veidnei.
7. Pārbaudiet ar favicon pārbaudītāju, pēc tam notīriet pārlūka kešatmiņu un pārlādējiet lapu, lai redzētu jauno ikonu.

HTML fragmenta piemērs

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

Atribūts sizes="48x48" ICO saitei palīdz pārlūkiem dot priekšroku SVG, ja tie to atbalsta, vienlaikus saglabājot ICO kā rezerves variantu. 96 px PNG atbilst Google 48 daudzkārtņa noteikumam.

Tīmekļa lietotnes manifesta piemērs

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

Ja strādājat ar būvēšanas procesiem vai vēlaties automatizēt ikonu izveidi, skatiet izstrādātāju resursus.

Dizaina padomi favicon, kas darbojas

• Saglabājiet vienkāršību. Viena forma, viens burts vai izteikta monogramma ir labāka par detalizētu logotipu, kas 16 px izmērā pārvēršas putrā.
• Izmantojiet spēcīgu kontrastu. Pārliecinieties, ka ikona ir redzama gan gaišajās, gan tumšajās pārlūka tēmās. Krāsains fona laukums palīdz.
• Izvairieties no teksta. Viens iniciālis ir pieņemams; vārdi šajā izmērā nav salasāmi.
• Atstājiet nelielu atstarpi maskable un noapaļotu stūru ikonām, lai nekas svarīgs netiktu apcirsts.
• Esiet konsekvents ar savu logotipu un zīmola krāsām, lai favicon stiprinātu atpazīstamību.
• Testējiet reālās ierīcēs un pārbaudiet, kā tas izskatās cilnē, grāmatzīmē un Google rezultātā.

Biežākās favicon problēmas

Ja jūsu ikona neparādās, parastie iemesli ir kešatmiņa, nepareizi ceļi un bloķēti faili. Pārlūki favicon kešo agresīvi, tāpēc bieži pietiek ar pilnu atsvaidzināšanu vai jaunu privāto logu, lai redzētu izmaiņas. Pārbaudiet, vai faila URL atgriež 200 statusu un pareizu satura tipu un vai <link> tags atrodas sadaļā <head>. Meklēšanai pārliecinieties, ka robots.txt nebloķē ikonu vai sākumlapu. MakeFav pārbaudītājs var palīdzēt ātri atrast šīs problēmas.

Bieži uzdotie jautājumi

Ko nozīmē favicon?

Favicon ir saīsinājums no „favorite icon”. Nosaukums nāk no Internet Explorer 5, kas 1999. gadā pirmo reizi izmantoja nelielu ikonas failu, lai rotātu ierakstus pārlūka izlases sarakstā. Termins saglabājās, kaut arī ikona tagad parādās daudzās citās vietās.

Vai favicon palīdz SEO?

Favicon nav tiešs ranga faktors. Tomēr tas parādās blakus jūsu vietnes nosaukumam Google rezultātos mobilajās ierīcēs un datoros, tāpēc var uzlabot zīmola atpazīstamību un jūsu ieraksta vizuālo pievilcību, kas var netieši veicināt klikšķus. Google vadlīniju ievērošana ir tas, kas padara ikonu piemērotu attēlošanai.

Kāda izmēra jābūt favicon?

Google meklēšanai izmantojiet kvadrātveida attēlu, kura izmērs ir 48 pikseļu daudzkārtnis, piemēram, 48x48 vai 96x96. Plašākai aptverei nodrošiniet arī ICO failu, 180x180 Apple touch icon un 192x192 un 512x512 manifesta ikonas. SVG ir labs papildinājums mērogojamībai.

Vai man joprojām vajag favicon.ico, ja izmantoju PNG vai SVG?

Tā joprojām ir laba ideja. Pārlūki un daži rīki pēc noklusējuma pieprasa /favicon.ico, un vecāka programmatūra uz to paļaujas. ICO faila turēšana vietnes saknē novērš 404 kļūdas un nodrošina drošu rezerves variantu, ja SVG vai PNG netiek atbalstīts.

Kāpēc mans favicon neatjaunojas?

Pārlūki un meklētājprogrammas favicon kešo ilgu laiku. Mēģiniet veikt pilnu atsvaidzināšanu, izmantot privāto logu vai notīrīt kešatmiņu. Pārliecinieties, ka faila ceļš ir pareizs un jaunais fails tiek piegādāts. Google meklēšanā mainītas ikonas atkārtotai pārmeklēšanai un atjaunināšanai var būt vajadzīgas dienas vai nedēļas.