Məzmun Marketinq

Veb saytınız üçün Favikonun tətbiqi üçün ən yaxşı təcrübələr

Onlar ilk dəfə təqdim edildikdə, favicon istifadəçilər saxladıqda göstəriləcək bir şəkil təyin etdi a URL masaüstündəki qısayol. Bu gün veb saytınızın favikonu brauzer nişanlarında, e-poçt müştərilərində, sosial media paylaşımlarında və axtarış nəticələrində göstərilə bilər.

Favikon indi hər bir veb-saytın zəruri brendinq elementidir, lakin çox vaxt diqqətdən kənarda qalır... olmamalıdır. Favikonlar adətən istifadəçilərə veb-saytları müəyyən etmək və əlfəcinlərə qeyd etməkdə kömək etmək üçün veb-brauzerlərin müxtəlif yerlərində göstərilir. Favikonlarla bağlı bəzi əsas məqamlar bunlardır:

  • Brauzer Nişanları: İstifadəçilər veb-brauzerdə veb-sayt açdıqda, favikon brauzer nişanında səhifənin başlığının yanında göstərilir. Bu, açıq tab üçün vizual identifikator təqdim edərək, istifadəçilərin birdən çox nişanı tapmasını və arasında keçidi asanlaşdırır.
  • Əlfəcinlər və Sevimlilər: İstifadəçilər veb-saytı favorit kimi qeyd etdikdə və ya yadda saxladıqda, favikon tez-tez əlfəcinlər və ya sevimlilər menyusunda veb-saytın adı ilə yanaşı göstərilir. Bu, istifadəçilərə saxlanmış veb saytlarını tez bir zamanda müəyyənləşdirməyə və daxil olmağa kömək edir.
  • Brauzer Ünvan Çubuğu: Bəzi brauzerlərdə istifadəçilər veb-sayta daxil olduqda, favikon brauzerin ünvan çubuğunda və ya omnibox-da göstərilir. Bu, veb-saytın URL-inə vizual element əlavə edir.
  • Axtarış nəticələri: Bəzi axtarış motorları axtarış nəticələrinin yanında favikonları göstərə bilər ki, bu da istifadəçilərə axtarış siyahılarında vebsaytları asanlıqla müəyyən etməyə kömək edir.

Favikon veb-brauzerlərdə veb-saytın identifikasiyası, əlfəcin qoyulması və tabların idarə edilməsi üçün vizual göstərişlər təqdim etməklə istifadəçi təcrübəsini artıran veb-saytın kiçik, simvolik təsviridir. Bu veb dizayn və brendinqin vacib elementidir.

Simge fayl növləri

Əvvəlcə onlar tələb edirdilər MDB fayl, lakin göstərə bilən bir çox platforma ilə inkişaf etmişdir PNGSVG fayllar. ICO faylları birdən çox ikon şəkillərinin bir faylda yığılması hesab edilə bilər. Bir ICO faylı yaratdığınız zaman, müxtəlif ölçülü və rəng dərinliklərində müxtəlif ikon şəkillərini müəyyən bir quruluşa malik bir faylda tərtib edirsiniz. ICO faylı necə işləyir:

  1. Çoxlu Simge Şəkilləri: ICO faylı adətən müxtəlif ölçülərə və rəng dərinliyinə malik birdən çox ikon şəklini ehtiva edir. Bu şəkillər eyni simvolu təmsil edir, lakin keyfiyyətini itirmədən müxtəlif ölçülərdə göstərilmək üçün nəzərdə tutulub.
  2. Icon Directory: ICO faylında ölçüsü, rəng dərinliyi və fayl daxilində yerləşdiyi yer daxil olmaqla, hər bir ikon şəklinin atributlarını təyin edən ikon kataloqu var.
  3. Başlıq Məlumatı: ICO faylı həmçinin faylda saxlanılan ikon şəkillərinin sayı kimi fayl haqqında əsas təfərrüatları təmin edən başlıq məlumatını ehtiva edir.
  4. Şəkil Məlumatı: ICO faylındakı hər bir ikon şəkli sıxılmadan xam şəkil məlumatı kimi saxlanılır. Bu, ayrı-ayrı ikon şəkillərinə tez bir zamanda daxil olmağa və proqram təminatı tərəfindən göstərilməyə imkan verir.
  5. İkonun axtarışı: Tətbiq və ya əməliyyat sistemi fayl, qovluq, qısayol və ya proqramla əlaqəli simvolu göstərməli olduqda, o, istədiyiniz ölçü və rəng dərinliyinə əsasən ICO faylından müvafiq ikon şəklini ala bilər.

MDB

Üstünlüklər:

  • Geniş Dəstək: ICO köhnə versiyalar da daxil olmaqla müxtəlif veb brauzerlər tərəfindən geniş şəkildə dəstəklənən ənənəvi favikon formatıdır. Uyğunluğu təmin etmək üçün təhlükəsiz seçimdir.
  • Çoxsaylı Ölçülər və Rəng Dərinlikləri: ICO faylları favikonun müxtəlif kontekstlərdə yaxşı göstərilməsinə imkan verən müxtəlif ölçülü və rəng dərinliklərində birdən çox ikon şəkillərini ehtiva edə bilər.

Dezavantajları:

  • Məhdud Ölçmə qabiliyyəti: ICO nişanları SVG kimi vektor formatları kimi ölçülənmir. Qeyri-standart ölçülərdə göstərildikdə, ICO nişanları pikselli görünə bilər.

PNG

Üstünlüklər:

  • İtkisiz Sıxılma: PNG favikonları itkisiz sıxılma təklif edir, kiçik fayl ölçüləri ilə yüksək görüntü keyfiyyətini təmin edir. Bu, xüsusilə kəskin və ətraflı nişanlar üçün faydalıdır.
  • Şəffaflıq: PNG alfa şəffaflığını dəstəkləyir, fonla mükəmməl qarışan mürəkkəb və yarı şəffaf dizaynlara imkan verir.
  • Müasir brauzerlərdə dəstək: PNG müasir veb brauzerlər tərəfindən yaxşı dəstəklənir və yaxşı uyğunluq təklif edir.

Dezavantajları:

  • Çoxlu Fayllar: Müxtəlif ölçüləri və qətnamələri əhatə etmək üçün HTTP sorğularının sayını artıra biləcək müxtəlif ölçülərdə çoxlu PNG faylları təqdim etməli ola bilərsiniz.
  • Vektor dəstəyinin olmaması: PNG rastr formatıdır, ona görə də SVG kimi vektor formatları qədər zərif şəkildə miqyaslanmır.

SVG

Üstünlüklər:

  • Vektor əsaslı: SVG vektor formatıdır, yəni keyfiyyətini itirmədən miqyaslana bilər. İstənilən ölçüdə xırtıldayan, yüksək keyfiyyətli nişanlar yaratmaq üçün idealdır.
  • Kiçik Fayl Ölçüsü: SVG faylları rastr analoqları ilə müqayisədə çox vaxt daha kiçik ölçülüdür və bu onları vebdən istifadə üçün səmərəli edir.
  • Versatility: SVG çox rəngli nişanlar, gradientlər və mürəkkəb formalar daxil olmaqla mürəkkəb və bədii dizaynlara imkan verir.
  • CSS üslubu: SVG favikonları daha çox dizayn çevikliyi təklif edərək, CSS-dən istifadə etməklə asanlıqla tərtib edilə bilər.

Dezavantajları:

  • Brauzer uyğunluğu: Müasir brauzerlər SVG favikonlarını dəstəkləsə də, köhnə brauzerlərin dəstəyi məhdud ola bilər və ya heç olmaya bilər. Daha geniş uyğunluq üçün ICO və ya PNG kimi ehtiyat formatları təmin etmək vacibdir.
  • Mürəkkəblik: SVG ikonalarının dizaynı daha mürəkkəb ola bilər, xüsusən vektor qrafikası proqramı ilə tanış olmayanlar üçün.

Favikon formatının seçimi dizayn tələblərinizdən və nail olmaq istədiyiniz uyğunluq səviyyəsindən asılıdır. ICO daha geniş uyğunluq üçün təhlükəsiz seçimdir, PNG itkisiz keyfiyyət və şəffaflıq təklif edir və SVG miqyaslılıq və mürəkkəb dizaynlar üçün idealdır, lakin brauzer dəstəyi və ehtiyat hissələrinin diqqətlə nəzərdən keçirilməsini tələb edir. Aşağıdakı nümunələrdə göstərildiyi kimi formatların birləşməsindən istifadə vebsaytınızın favikonunun maksimum uyğunluğunu və keyfiyyətini təmin edə bilər.

ICO faylını necə yaratmaq olar

Mənim fikrimcə, Adobe Illustrator və Photoshop-un standart olaraq .ICO faylları yaratmaması olduqca qəribədir (pluginlər mövcuddur). Siz onlardan istifadə edərək müxtəlif şəkil ölçülərinin hər birini çıxara bilərsiniz... və sonra aşağıdakı üsullardan hər hansı birini istifadə edərək onları yarada bilərsiniz:

  • GIMP yerli olaraq ICO fayllarını dəstəkləyir. Bu, bütün əməliyyat sistemləri üçün mövcud olan pulsuz, açıq mənbəli platformadır.
  • ImageMagick PC və ya Mac-a yükləyə biləcəyiniz pulsuz, açıq mənbəli xidmətdir və birdən çox faylı ICO faylında birləşdirməyə imkan verir. Nümunə əmr:
convert image1.png image2.png image3.png favicon.ico
  • .ICO faylı yaratmağınıza kömək edə biləcək onlayn alətlər də var, lakin siz diqqətlə seçmək istərdiniz. Çoxları tək yüklənmiş şəkil faylının ölçüsünü dəyişir və hər birini zəif sıxışdırır. Favicon.io ICO faylınızı yükləməyə və qurmağa imkan verən pulsuz onlayn saytdır. Platformadan istifadə edərkən həmişə ən böyük fayl ölçüsünü və təsvir ölçüsünü istifadə edin, çünki o, avtomatik olaraq daha kiçik təsvir ölçülərini yaradacaq.

ICO faylınızla sınaqdan keçirmək istəyəcəksiniz. Loqotipinizi sadəcə olaraq 16px kvadrat olan bir ikonaya endirmək onu fərqlənməz edə bilər. Siz hətta görəcəksiniz ki, bizimki bütün loqotipimiz deyil, sadəcə loqotipimizdir M logomuzdan.

Veb saytınızın Favikonunu yoxlayın

Favicon HTML Ən Yaxşı Təcrübələri

Brauzerlər bir neçə amil, o cümlədən format, ölçü və xüsusi bəyannamələrin mövcudluğu əsasında favikonların seçilməsinə üstünlük verirlər. Brauzerlər adətən favikonları necə prioritetləşdirir və seçir:

  1. Fayl Formatının Prioriteti: Brauzerlər adətən mövcud olduqda .ico fayllarına üstünlük verirlər, çünki bu, ənənəvi favikon formatıdır. Əgər istifadə edərək .ico favicon təqdim etsəniz <link rel="icon" type="image/x-icon" href="favicon.ico">, çox vaxt digər formatlardan üstün olacaq.
  2. Ölçü prioriteti: Brauzerlər kontekst üçün ən uyğun favikonu seçmək üçün ölçü atributunu da nəzərə alır. .png və ya .svg favikonları üçün müxtəlif ölçüləri göstərsəniz, brauzer cihazın ekran tələblərinə ən yaxşı uyğun gələni seçəcək.
  3. SVG "istənilən" Ölçü: "hər hansı" dəyərindən istifadə etdiyiniz zaman sizes SVG favikon bəyannaməsində atribut (sizes="any"), SVG-nin istənilən ölçüyə uyğunlaşa biləcəyini göstərir. Brauzerlər SVG-nin müxtəlif ekran qətnamələrinə uyğunlaşmasını təmin etmək üçün “istənilən” ölçüyə üstünlük verə bilər.
  4. Son Bəyannaməyə üstünlük verilir: Eyni formatda və ölçüdə bir neçə favikon bəyannaməsi təqdim etsəniz, brauzer adətən HTML-də qarşılaşdığı sonuncu bəyannaməni seçir. Buna görə də, sizin sifariş <link> elementləri önəmlidir. Sonuncu tapılana üstünlük veriləcək.
  5. Defolt Simgeyə qayıt: Göstərilən favikonlardan heç biri brauzerin meyarlarına uyğun gəlmirsə və ya heç bir favikon bəyannaməsi yoxdursa, brauzer standart işarədən (məsələn, brauzerin işarəsi) və ya heç bir ikonadan istifadə edə bilər.
  6. İstifadəçi üstünlükləri: Bəzi brauzerlər istifadəçilərə favikonlar üçün öz seçimlərini təyin etməyə imkan verir. Belə hallarda istifadəçinin seçimi vebsaytın müəyyən edilmiş favikonunu ləğv edə bilər.

Əvvəlcə ICO favikon bəyannaməsini sadalasanız, lakin SVG-nin üstünlük verilən favikon kimi istifadə edilməsini istəyirsinizsə, o, həmişə nəzərdə tutulduğu kimi işləməyə bilər, çünki bəzi brauzerlər qarşılaşdıqları ilk etibarlı favikon bəyannaməsinə üstünlük verirlər. Bununla belə, siz yenə də SVG-nin ən son qeyd edərək və istifadə edərək üstünlük verilən favikon olduğuna əmin ola bilərsiniz hər ölçü atributu.

Bunu necə edə bilərsiniz:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Your Website Title</title>

    <!-- Favicon Declarations -->

    <!-- .ico Format (for maximum compatibility) -->
    <link rel="icon" type="image/x-icon" href="favicon.ico">

    <!-- .png Format (for modern browsers) -->
    <link rel="icon" type="image/png" href="favicon.png" sizes="32x32">

    <!-- .svg Format (preferred) -->
    <link rel="icon" type="image/svg+xml" href="favicon.svg" sizes="any">

    <!-- Alternative Text for Accessibility -->
    <link rel="icon" type="image/svg+xml" href="favicon.svg" sizes="any" alt="Your Website Favicon">

    <!-- Additional Sizes (optional) -->
    <link rel="icon" type="image/png" href="favicon-16x16.png" sizes="16x16">
    <link rel="icon" type="image/png" href="favicon-48x48.png" sizes="48x48">

    <!-- End of Favicon Declarations -->

    <!-- Your other meta tags, styles, and scripts go here -->

</head>
<body>
    <!-- Your website content goes here -->
</body>
</html>

Bu nümunədə maksimum uyğunluq üçün .ico formatı hələ də daxil edilmişdir, lakin SVG formatı sonuncu ilə müəyyən edilmişdir. hər ölçü atributu. Bu quraşdırma SVG formatına daha yüksək üstünlük verir, eyni zamanda .ico formatını ona üstünlük verən brauzerlər üçün ehtiyat kimi təqdim edir. Sonuncu ilə SVG-ni təyin etməklə hər size atributundan istifadə etsəniz, müasir brauzerlərin müxtəlif ölçülərə uyğunlaşa bildiyi üçün SVG-ni üstünlük verilən favikon formatı kimi seçmə ehtimalını artırırsınız.

Douglas Karr

Douglas Karr CMO-dur OpenINSIGHTS və təsisçisi Martech Zone. Duqlas onlarla uğurlu MarTech startapına kömək edib, Martech-in satınalmalarında və investisiyalarında 5 milyard dollardan çox dəyərində lazımi araşdırmaya kömək edib və şirkətlərə satış və marketinq strategiyalarının həyata keçirilməsində və avtomatlaşdırılmasında kömək etməyə davam edir. Duqlas beynəlxalq səviyyədə tanınan rəqəmsal transformasiya və MarTech eksperti və məruzəçisidir. Douglas həm də Dummie's guide və biznes liderliyi kitabının nəşr edilmiş müəllifidir.

əlaqəli məqalələr

Başa dön düyməsini basın
yaxın

Adblock Aşkarlandı

Martech Zone bu məzmunu heç bir ödəniş etmədən sizə təqdim edə bilir, çünki biz reklam gəlirləri, filial bağlantıları və sponsorluqlar vasitəsilə saytımızdan pul qazanırıq. Saytımıza baxarkən reklam blokerinizi silsəniz çox şad olarıq.