Posibnyk

Yak zrobyty ikonku dlya saytu, shchob vona spravdi vidobrazhalas

Korotkyy, praktychnyy posibnyk po favikonu: formaty, rozmiry, prosti HTML tehy, brauzerni nyuansy ta yak shvydko pereviryty, chy vse pratsyuye.

Zhovtyy paperovyy lyst z naroysom favicon na robochomu stoli.

Favikon vyhlyadaye yak drribnytsya, a inоdi zabyrayе bilshe chasu, nizh moment, koly maye vidobrazytysya na zakladtsi. Tsi notatky pokryvayut suchasnyy minimum: yaki fayly potribni, kudy yikh klasty, yaki tehy spravdi vykorystovuyut brauzeri, i yak pereviryty, chy vse zibralosya raznym i bez kesha.

Yaksho vy zaraz pratsyuyete nad zapuskom saytu, ti notatky zruchno chytayuts'ya razom z notatkamy pro favikon anhliyskoyu ta cheklistom pered zapuskom.

Shcho take favikon

Favikon - tse mala kartynka, yaku brauzer pokazuye na zakladtsi, v istoriyi, v PWA ikontsi i v deyakykh poshukovykh rezultatakh. Vona ne maye buty skladnym dyzaynom. Vona maye buty upiznavannoyu v rozmiri 16x16 pikseliv. Tse korotkyy test, yakyy filtruye bilshu chastynu rozporadzhuyuchykh idey.

Formaty ta rozmiry, yaki vystachayut

Suchasnyy minimum, yakyy pokryvaye praktychno vsi vypadky:

  • favicon.ico - klasychnyy, dlya starshykh brauzeriv ta zovnishnikh syinaliv.
  • icon-32.png - 32x32 PNG, yakyy dobre vyhlyadaye na zakladtsi.
  • icon-192.png i icon-512.png - dlya manifestu PWA.
  • apple-touch-icon.png - 180x180 PNG dlya iOS.
  • SVG variant z odniyeyu plaшoyu kolyrоvoyu liniyeyu - ne obov'yazkovo, ale dobre.

Bilshe formativ ne potribno. Bilshe rozmiriv ne pokrashchuye yakist. Voni tilky dodayut zapytiv i mozhlyvostey dlya pomylok.

HTML tehy, yaki spravdi vykorystovuyutsya

Brauzeri vidshukuyut favikon cherez kilka stykiv mekhanizmiv. Pershyy - tse standartnyy zapyt do /favicon.ico v korini saytu. Druhyy - tse <link rel="icon"> tehy v <head>. Tretiy - tse manifest.webmanifest dlya PWA. Korysnyy detalnyy reference po atributu rel zhyve na MDN - vono pokyrvaye nyusansy bez znudzhuvannya.

Minimalnyy nabir, yakyy pratsyuye:

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

Yak shvydko pereviryty, chy vse pratsyuye

  1. Vidkryyte sayt v inkohnito-vikni z chystym kesham.
  2. Perevirte zakladku - chy vidobrazhayetsya ikonka.
  3. Zaprosit /favicon.ico napryamu - status maye buty 200.
  4. Vidkryyte sayt na mobilnomu - perevirte iOS i Android okremo.
  5. Dodayte sayt na holovnyy ekran - perevirte velykyy variant ikonky.

Typovi pomylky

  • Favikon zavantazhuyetsya, ale brauzer kashuye staryy variant. Riszhennya: nove im'ya faylu.
  • SVG zaminyaye PNG ta vyhlyadaye nepravylno na deyakykh systemakh.
  • Apple touch ikonka vidsutnya - na iOS pokazuyetsya skrinshot saytu.
  • Manifest viklykaye console error cherez nepravylnyy start_url.
  • Favikon zaboroneny v robots.txt abo CDN.

Pov'yazani notatky

Dyvit'sya takozh notatky pro favikon anhliyskoyu, posibnyky ta storinku pidtrymky.