Негізгі мазмұнға өту

Favicon жасағыш

Логотипті жүктеп, сайтқа керекті белгішелердің барлығын бір ZIP-те алыңыз: 16, 32 және 48 пиксельдік суреттері бар favicon.ico, Google үшін 48 пиксельдік PNG, iPhone үшін фоны мөлдір емес Apple Touch Icon, Android үшін 192 және 512 пиксельдік белгішелер, қауіпсіз аймағы ескерілген маскаланатын белгіше және site.webmanifest. SVG жүктесеңіз, жиынтыққа icon.svg да қосылады. Бетте, Google нәтижесінде және басты экранда алдын ала көрініс шығады, ал дайын <head> кодын көшіріп аласыз; барлығы браузеріңізде жұмыс істейді.

  • Тегін, тіркелусіз
  • Файлыңыз құрылғыдан шықпайды
  • Бір файл 50 МБ-қа дейін

Бастау үшін логотипіңізді немесе белгішеңізді қосыңыз. PNG, SVG, JPG және WebP жарайды; ең жақсы нәтиже үшін кемінде 512 × 512 пиксельдік шаршы сурет алыңыз.

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

Favicon қалай жасауға болады

  1. Логотипті қосыңыз

    PNG, SVG, JPG немесе WebP логотипін жүктеңіз. Ең жақсы нәтиже үшін кемінде 512 × 512 пиксельдік шаршы сурет алыңыз; SVG де жарайды.

  2. Атауды, түстерді және жиекті белгілеңіз

    Сайт атауы мен қысқа атауын енгізіп, тақырып және фон түстерін таңдаңыз, қажет болса жиек қосыңыз. Алдын ала қарау белгішенің бетте, Google-да және басты экранда қалай көрінетінін көрсетеді.

  3. Мұрағатты жүктеп алып, орналастырыңыз

    ZIP-ті жүктеп алыңыз, файлдарды сайттың түбір қалтасына салыңыз және көрсетілген <head> үзіндісін беттеріңізге қосыңыз.

Не сақталады?

Сақталады

  • Логотиптің арақатынасы: шаршы емес сурет шаршыға сыйғызылады, ешқашан созылмайды
  • Мөлдірлік (қарапайым белгішелерде; фон түсін таңдасаңыз, ол толтырылады)
  • SVG жүктесеңіз, icon.svg өзгеріссіз қосылады

Өзгереді

  • Әр белгіше өз өлшеміне жоғары сапамен қайта есептеледі
  • Apple Touch Icon мен маскаланатын белгішенің фоны әрдайым мөлдір емес: таңдаған түсіңіз немесе «Мөлдір» таңдалса, ақ
  • Маскаланатын белгішеде мазмұн 80 % қауіпсіз аймақта орналасады

Көшірілмейді

  • PNG немесе JPG-тен вектор (SVG) жасалмайды; icon.svg тек SVG жүктегенде болады
  • EXIF және басқа метадеректер белгішелерге қосылмайды

Қашан керек болады

Жаңа сайтқа арналған толық белгіше жиынтығы

Бір favicon.ico енді жеткіліксіз: iPhone басты экраны, Android және Google іздеуі әртүрлі файлдарды күтеді. Бір жүктеумен барлығын дұрыс атаумен және өлшеммен аласыз.

Белгішені Google нәтижесіне шығару

Google сайт белгішесін іздеу нәтижесінде өлшемі 48 пикселге еселік шаршы файлдан көрсетеді, және ол файл сканерлеуге ашық болуы тиіс. Жиынтыққа сондай файл және оған <head> сілтемесі кіреді.

Қосымша ретінде қосуға болатын сайт (PWA)

Сайтты басты экранға қосу үшін манифест және 192/512 пиксельдік белгішелер керек. Маскаланатын белгіше Android белгішені шеңбер немесе дөңгелектелген шаршы етіп қиғанда логотиптің қиылып қалуына жол бермейді.

Білуге тиісті шектеулер

  • Ең жақсы нәтиже үшін кемінде 512 × 512 пиксельдік шаршы сурет алыңыз; кіші көзден жасалған үлкен белгішелер бұлыңғыр шығады.
  • 16 және 32 пиксельдік белгішелерде жіңішке сызықтар мен ұсақ мәтін оқылмай қалады; қалың, контрасты жоғары логотиптер жақсырақ жұмыс істейді.
  • Тақырып түсі тек мобильді браузерлердің мекенжай жолында қолданылады және браузер параметрлеріне байланысты.
  • Google іздеудегі белгішені бірнеше күн, тіпті апта бойы жаңартуы мүмкін, браузерлер де белгішелерді кэштейді.

Жиі қойылатын сұрақтар

Сайтқа қандай favicon файлдары керек?

Қазіргі жиынтық мынадай: түбірдегі favicon.ico, Google үшін 48 пиксельдік PNG, мүмкін болса icon.svg, iPhone үшін 180 пиксельдік apple-touch-icon.png, Android үшін 192 және 512 пиксельдік белгішелер және site.webmanifest. Жасағыш осының бәрін жасап, <head> сілтемелерін береді.

Маскаланатын белгіше дегеніміз не?

Маскаланатын белгіше мазмұнын қауіпсіз аймақта ұстайды және фоны толық боялған болады, сондықтан Android оны құрылғыға қарай шеңбер, дөңгелектелген шаршы немесе басқа пішінге қия алады. Мұнда мазмұн 512 пиксельдік суреттің орталық 80 % аймағына қойылады.

Apple Touch Icon неге мөлдір емес және бұрыштары дөңгелектелмеген?

iOS мөлдір аймақтарды қара түспен көрсетеді және бұрыштарды өзі дөңгелектейді. Сондықтан белгіше толық боялған және дөңгелектеусіз, сіз таңдаған фон түсімен (мөлдір таңдалса, ақ) жасалады.

Белгішем неге Google нәтижесінде көрінбейді?

Белгіше файлын robots.txt жаппауы, басты беттің <head> бөлігінен оған сілтеме болуы және ол өлшемі 48 пикселге еселік шаршы болуы тиіс. Түзеткеннен кейін Search Console-да басты беттің қайта индекстелуін сұрауға болады; жаңарту бәрібір бірнеше күн не апта алуы мүмкін.

Шаршы емес сурет жүктесем не болады?

Белгішелер шаршыға бұрмаланбай сыйғызылады, екі жағында бос орын қалады. Кадр шаршыны толтыруы керек болса, алдымен оны қию құралымен 1:1 етіп қиыңыз.

PNG-ден SVG favicon жасай ма?

Жоқ. Пикселдерді векторға автоматты түрде айналдыру белгішенің түрін байқалмай өзгертуі мүмкін, сондықтан icon.svg тек өзіңіз SVG жүктегенде қосылады.

Бұл құрал тегін бе?

Иә, толығымен тегін. Аккаунт, жазылым және су белгісі жоқ.

Файлдарым бір жерге жүктеле ме?

Жоқ. Суреттер браузеріңізде өңделеді және құрылғыдан шықпайды. EXIF және орналасу деректері нәтижеге қосылмайды.