Favicon pamācības
Skaidras atbildes uz jautājumiem, kas rodas, veidojot favicon: kādi izmēri, kādi formāti un kāds kods jāievieto.
Favicon izmēri: formāti un lietojums
Meklējot “favicon izmērs”, joprojām atrodami piecpadsmit failu saraksti no 2014. gada. Praksē tagad pietiek ar sešiem izmēriem, lai aptvertu pārlūka cilnes, meklēšanas rezultātus, iOS, Android un PWA. Apskatīsim tos un to nozīmi.
Lasīt pamācībuPārveidojiet PNG par ICO bez maksas
.ico joprojām ir vietnes saknē sagaidāmais formāts, bet vairums tiešsaistes pārveidotāju lūdz augšupielādēt attēlu serverī. Lūk, kā no PNG iegūt pareizu favicon.ico ar vairākiem izmēriem, neko neaugšupielādējot.
Lasīt pamācībuapple-touch-icon: izmērs, formāts un kods
Apple Touch ikona skaidri norāda attēlu, kas jāizmanto, kad apmeklētājs pievieno vietni iPhone sākuma ekrānam. Tā ir atsevišķa no pārlūka cilnes favicon un tīmekļa lietotnes manifestā norādītajām ikonām.
Lasīt pamācībuTumšā režīma favicon ar SVG
Melns logotips uz caurspīdīga fona gaišā cilnē izskatās lieliski, bet tumšā pazūd. ICO formāts nevar pielāgoties, taču SVG favicon to spēj: tajā ir CSS noteikums, kas maina krāsas atbilstoši pārlūka motīvam.
Lasīt pamācībuFavicon pievienošana HTML vietnei
Uzticams HTML favicon nebalstās uz vienu maģisku tagu. Tas izmanto nelielu sasniedzamu failu komplektu un saites sadaļā head. Šī procedūra aptver modernās cilnes, vecākus klientus un mobilo ierīču saīsnes bez daudziem vēsturiskiem variantiem.
Lasīt pamācībuFavicon nav redzams vai neatjauninās
Ja favicon nav redzams, problēma ne vienmēr ir failā. Pārlūks, CDN, service worker un meklētājs katrs var glabāt citu versiju. Secīga diagnostika palīdz nemainīt vairākus apstākļus vienlaikus.
Lasīt pamācībuFavicon Next.js App Router lietotnē
App Router var izveidot ikonu elementus no ierastiem failu nosaukumiem vai metadata objekta. Abas pieejas ir derīgas, taču to jaukšana bez skaidra principa var viegli radīt savstarpēji konkurējošas deklarācijas.
Lasīt pamācībuSVG favicon pamācība
SVG saglabā asas malas jebkurā pikseļu blīvumā un var pielāgot krāsas motīvam. Šai elastībai ir viens nosacījums: failam jāpaliek patstāvīgam, vienkāršam un salasāmam ļoti mazā laukumā.
Lasīt pamācību