Мазмұн Маркетинг

Веб-сайтыңыз үшін фавиконды енгізудің ең жақсы тәжірибелері

Олар бастапқыда енгізілген кезде, вебторап таңбасы пайдаланушылар сақтаған кезде көрсетілетін суретті белгіледі a URL олардың жұмыс үстеліндегі төте жол. Бүгін сіздің веб-сайтыңыздың фавиконы браузер қойындыларында, электрондық пошта клиенттерінде, әлеуметтік медиа бөлісулерінде және іздеу нәтижелерінде көрсетілуі мүмкін.

Фавикон қазір әрбір веб-сайттың қажетті брендтік элементі болып табылады, бірақ жиі назардан тыс қалады... олай болмауы керек. Фавикондар әдетте пайдаланушыларға веб-сайттарды анықтауға және бетбелгілеуге көмектесу үшін веб-шолғыштардың әртүрлі орындарында көрсетіледі. Мұнда фавикондар туралы кейбір негізгі ойлар берілген:

  • Браузер қойындылары: Пайдаланушылар веб-браузерде веб-сайтты ашқанда, фавикон бет тақырыбының жанындағы шолғыш қойындысында көрсетіледі. Бұл ашық қойынды үшін көрнекі идентификаторды қамтамасыз етеді, бұл пайдаланушыларға бірнеше қойындыларды табуды және олардың арасында ауысуды жеңілдетеді.
  • Бетбелгілер және таңдаулылар: Пайдаланушылар веб-сайтты таңдаулы ретінде белгілегенде немесе сақтағанда, фавикон жиі бетбелгілерде немесе таңдаулылар мәзірінде веб-сайт атымен бірге көрсетіледі. Бұл пайдаланушыларға сақталған веб-сайттарды жылдам анықтауға және оларға қол жеткізуге көмектеседі.
  • Шолғыштың мекен-жайы: Кейбір браузерлерде пайдаланушылар веб-сайтқа кірген кезде фавикон браузердің мекенжай жолағында немесе омнибокста көрсетіледі. Бұл веб-сайттың URL мекенжайына көрнекі элемент қосады.
  • Іздеу нәтижелері: Кейбір іздеу жүйелері пайдаланушыларға іздеу тізімдеріндегі веб-сайттарды оңай анықтауға көмектесетін іздеу нәтижелерінің жанында фавикондарды көрсетуі мүмкін.

Фавикон — веб-браузерлердегі веб-сайтты сәйкестендіру, бетбелгі қою және қойындыларды басқару үшін көрнекі белгілерді қамтамасыз ету арқылы пайдаланушы тәжірибесін жақсартатын веб-сайттың шағын, белгішелік көрінісі. Бұл веб-дизайн мен брендингтің маңызды элементі.

Белгіше файлдарының түрлері

Бастапқыда олар талап етті ICO файл, бірақ көрсетуге қабілетті көптеген платформалармен дамыды PNG және SVG файлдар. ICO файлдарын бір файлға бірнеше белгіше кескіндерінің жинағы деп санауға болады. ICO файлын жасағанда, сіз белгілі бір құрылымы бар бір файлға әртүрлі өлшемдегі және түс тереңдіктегі әртүрлі белгіше кескіндерін құрастырасыз. ICO файлы қалай жұмыс істейді:

  1. Бірнеше белгіше кескіндері: ICO файлы әдетте әртүрлі өлшемдері мен түс тереңдігі бар бірнеше белгіше кескіндерін қамтиды. Бұл кескіндер бірдей белгішені білдіреді, бірақ сапасын жоғалтпай әртүрлі өлшемдерде көрсетуге арналған.
  2. Белгіше каталогы: ICO файлында өлшемін, түс тереңдігін және файлдағы орнын қоса алғанда, әрбір белгіше кескінінің атрибуттарын көрсететін белгішелер каталогы бар.
  3. Тақырып туралы ақпарат: ICO файлы сонымен қатар файлда сақталған белгіше кескіндерінің саны сияқты файл туралы маңызды мәліметтерді беретін тақырып ақпаратын қамтиды.
  4. Кескін деректері: ICO файлындағы әрбір белгіше кескіні қысылмай өңделмеген кескін деректері ретінде сақталады. Бұл бағдарламалық құрал арқылы жеке белгіше кескіндеріне жылдам қол жеткізуге және көрсетуге мүмкіндік береді.
  5. Белгішені іздеу: Қолданба немесе операциялық жүйе файлмен, қалтамен, таңбашамен немесе қолданбамен байланысты белгішені көрсету қажет болғанда, ол қажетті өлшем мен түс тереңдігіне негізделген ICO файлынан сәйкес белгіше кескінін шығарып ала алады.

ICO

артықшылықтары:

  • Кең таралған қолдау: ICO - әртүрлі веб-шолғыштар, соның ішінде ескі нұсқалары кеңінен қолдайтын дәстүрлі фавикон пішімі. Бұл үйлесімділікті қамтамасыз ету үшін қауіпсіз таңдау.
  • Бірнеше өлшемдер мен түс тереңдігі: ICO файлдары әртүрлі өлшемдегі және түс тереңдіктегі бірнеше белгіше кескіндерін қамтуы мүмкін, бұл фавиконның әртүрлі контексттерде жақсы көрсетілуіне мүмкіндік береді.

кемшіліктері:

  • Масштабтылығы шектеулі: ICO белгішелері SVG сияқты вектор пішімдері сияқты масштабталмайды. Стандартты емес өлшемдерде көрсетілгенде, ICO белгішелері пиксельді болып көрінуі мүмкін.

PNG

артықшылықтары:

  • Жоғалмайтын қысу: PNG фавикондары шағын файл өлшемдерімен жоғары кескін сапасын қамтамасыз ететін жоғалтпай қысуды ұсынады. Бұл әсіресе анық және егжей-тегжейлі белгішелер үшін пайдалы.
  • Ашықтық: PNG альфа мөлдірлігін қолдайды, бұл фонмен біркелкі араласатын күрделі және жартылай мөлдір дизайнға мүмкіндік береді.
  • Қазіргі браузерлерде қолдау: PNG заманауи веб-шолғыштармен жақсы қолдау көрсетеді және жақсы үйлесімділікті ұсынады.

кемшіліктері:

  • Бірнеше файлдар: Әртүрлі өлшемдер мен ажыратымдылықтарды қамту үшін HTTP сұрауларының санын көбейтетін әртүрлі өлшемдерде бірнеше PNG файлдарын беру қажет болуы мүмкін.
  • Векторлық қолдаудың болмауы: PNG растрлық пішім болып табылады, сондықтан ол SVG сияқты векторлық пішімдер сияқты әдемі масштабталмайды.

SVG

артықшылықтары:

  • Векторлық: SVG - векторлық пішім, яғни ол сапаны жоғалтпай масштабтауға болады. Ол кез келген өлшемдегі қытырлақ, жоғары сапалы белгішелерді жасауға өте ыңғайлы.
  • Шағын файл өлшемі: SVG файлдары растрлық аналогтарымен салыстырғанда жиі кішірек болады, бұл оларды вебте пайдалану үшін тиімді етеді.
  • Әдептілік: SVG күрделі және көркем дизайнға, соның ішінде көп түсті белгішелерге, градиенттерге және күрделі пішіндерге мүмкіндік береді.
  • CSS стилі: SVG фавикондарын CSS көмегімен оңай стильдеуге болады, бұл дизайн икемділігін ұсынады.

кемшіліктері:

  • Шолғыштың үйлесімділігі: Заманауи браузерлер SVG фавикондарын қолдағанымен, ескі браузерлерде қолдауы шектеулі немесе мүлдем болмауы мүмкін. Кеңірек үйлесімділік үшін ICO немесе PNG сияқты резервтік пішімдерді қамтамасыз ету өте маңызды.
  • Күрделілік: SVG белгішелерін жобалау әсіресе векторлық графика бағдарламалық құралымен таныс емес адамдар үшін күрделірек болуы мүмкін.

Фавикон пішімін таңдау дизайн талаптарыңызға және қол жеткізгіңіз келетін үйлесімділік деңгейіне байланысты. ICO кеңірек үйлесімділік үшін қауіпсіз таңдау болып табылады, PNG жоғалтпай сапа мен мөлдірлікті ұсынады, ал SVG масштабтауға және күрделі дизайнға өте ыңғайлы, бірақ шолғышты қолдау мен резервтік мүмкіндіктерді мұқият қарастыруды талап етеді. Келесі мысалдарда көрсетілгендей пішімдердің тіркесімін пайдалану веб-сайтыңыздың фавиконы үшін максималды үйлесімділік пен сапаны қамтамасыз ете алады.

ICO файлын қалай жасауға болады

Менің ойымша, Adobe Illustrator және Photoshop әдепкі бойынша .ICO файлдарын жасамайды (плагиндер бар). Сіз әртүрлі кескін өлшемдерінің әрқайсысын олардың көмегімен шығаруға болады, дегенмен…, содан кейін оларды келесі әдістердің кез келгенін пайдаланып құрастырыңыз:

  • GIMP ICO файлдарын жергілікті түрде қолдайды. Бұл барлық операциялық жүйелер үшін қолжетімді тегін, ашық бастапқы платформа.
  • ImageMagick бірнеше файлдарды ICO файлына біріктіруге мүмкіндік беретін компьютерге немесе Mac компьютеріңізге жүктей алатын тегін, бастапқы көзі ашық қызмет. Мысал пәрмені:
convert image1.png image2.png image3.png favicon.ico
  • Сондай-ақ .ICO файлын жасауға көмектесетін онлайн құралдар бар, бірақ сіз мұқият таңдағыңыз келеді. Көбісі бір жүктеп салынған сурет файлының өлшемін өзгертеді және әрқайсысын нашар қысады. Favicon.io ICO файлыңызды жүктеп салуға және құруға мүмкіндік беретін тегін онлайн сайт. Платформаны пайдаланған кезде әрқашан ең үлкен файл өлшемі мен ажыратымдылығын пайдаланыңыз, себебі ол кішірек кескін өлшемдерін автоматты түрде жасайды.

ICO файлыңызбен тәжірибе жасағыңыз келеді. Логотипті 16 пиксель квадраттық белгішеге дейін кішірейту оны ажырата алмайтындай етеді. Сіз тіпті біздің бүкіл логотипіміз емес, тек логотип екенін көресіз M біздің логотиптен.

3 сурет
Ақпарат көзі: Favicon тексерушісі

Веб-сайтыңыздың фавиконын тексеріңіз

Favicon HTML үздік тәжірибелері

Браузерлер фавикондарды таңдауды бірнеше факторларға, соның ішінде пішімге, өлшемге және арнайы мәлімдемелердің болуына басымдық береді. Браузерлердің әдетте фавикондарға басымдық беру және таңдау әдісі мынада:

  1. Файл пішімінің басымдығы: Браузерлер әдетте .ico файлдарына басымдық береді, себебі бұл дәстүрлі фавикон пішімі. Егер сіз .ico фавиконын қолдансаңыз <link rel="icon" type="image/x-icon" href="favicon.ico">, ол көбінесе басқа пішімдерден басым болады.
  2. Өлшем басымдығы: Браузерлер контекст үшін ең қолайлы фавиконды таңдау үшін өлшем төлсипатын да қарастырады. .png немесе .svg фавикондары үшін әртүрлі өлшемдерді көрсетсеңіз, шолғыш құрылғының көрсету талаптарына сәйкес келетінін таңдайды.
  3. SVG «кез келген» өлшемі: үшін “кез келген” мәнін пайдаланған кезде sizes SVG фавикон декларациясындағы төлсипат (sizes="any"), бұл SVG кез келген өлшемге бейімделе алатынын көрсетеді. Браузерлер әртүрлі экран ажыратымдылықтарына сәйкес келетіндей масштабталатынына көз жеткізу үшін «кез келген» өлшемі бар SVG-ге басымдық бере алады.
  4. Соңғы мәлімдеме басымдыққа ие: Бірдей пішім мен өлшеммен бірнеше фавикон мәлімдемесін ұсынсаңыз, браузер әдетте HTML ішінде кездесетін соңғы мәлімдемені таңдайды. Сондықтан, сіздің тапсырысыңыз <link> элементтері маңызды. Ең соңғы табылғанға басымдық беріледі.
  5. Әдепкі белгішеге қайтару: Көрсетілген фавикондардың ешқайсысы браузер шарттарына сәйкес келмесе немесе фавикон мәлімдемелері болмаса, шолғыш әдепкі белгішені (мысалы, шолғыш белгішесі) немесе ешқандай белгішені пайдалануы мүмкін.
  6. Пайдаланушы параметрлері: Кейбір шолғыштар пайдаланушыларға фавикондарға өз қалауларын орнатуға мүмкіндік береді. Мұндай жағдайларда пайдаланушының таңдауы веб-сайттың көрсетілген фавиконын жоққа шығаруы мүмкін.

Алдымен ICO фавиконы мәлімдемесін тізімдесеңіз, бірақ SVG таңдаулы фавикон ретінде пайдаланылуын қаласаңыз, ол әрқашан мақсатты түрде жұмыс істемеуі мүмкін, себебі кейбір браузерлер өздері кездесетін бірінші жарамды фавикон мәлімдемесіне басымдық береді. Дегенмен, SVG таңдаулы фавикон екеніне оны соңғы етіп көрсету және пайдалану арқылы әлі де қамтамасыз ете аласыз кез келген өлшем атрибуты.

Оны қалай жасай аласыз:

<!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>

Бұл мысалда максималды үйлесімділік үшін .ico пішімі әлі де қамтылған, бірақ SVG пішімі соңғы кез келген өлшем атрибуты. Бұл орнату SVG пішіміне жоғарырақ артықшылық береді, сонымен бірге .ico пішімін оған басымдық беретін браузерлер үшін резервтік құрал ретінде береді. SVG соңғы параметрін көрсету арқылы кез келген size атрибуты арқылы сіз заманауи браузерлердің таңдаулы фавикон пішімі ретінде SVG таңдау ықтималдығын арттырасыз, себебі ол әртүрлі өлшемдерге бейімделе алады.

Douglas Karr

Douglas Karr CMO болып табылады OpenINSIGHTS және негізін қалаушы Martech Zone. Дуглас ондаған табысты MarTech стартаптарына көмектесті, Martech сатып алулары мен инвестицияларына 5 миллиард доллардан астам қаражатты мұқият тексеруге көмектесті және компанияларға сату және маркетинг стратегияларын енгізу және автоматтандыруға көмектесуді жалғастыруда. Дуглас – халықаралық деңгейде танылған цифрлық трансформация және MarTech сарапшысы және спикері. Дуглас сонымен қатар Dummie's guide және бизнес көшбасшылығы кітабының жарияланған авторы.

Қатысты Мақалалар

Басына оралу
жақын

Adblock анықталды

Martech Zone Сізге бұл мазмұнды ақысыз ұсына алады, өйткені біз сайтымызды жарнамадан түсетін табыс, серіктестік сілтемелері және демеушілік арқылы монетизациялаймыз. Сайтымызды көрген кезде жарнама блокаторын алып тастасаңыз, біз ризамыз.