Мазмұнға өту

Favicon жасау

Суреттен, мәтіннен немесе эмодзиден favicon.ico, PNG белгішелерін, Apple touch icon және веб-манифест жасаңыз — бәрі браузеріңізде орындалады.

16px
32px
48px
64px
iPhone басты экраныapple-touch-icon.png · 180 × 180, iOS бұрыштарды өзі дөңгелектейдіСайт
Android (maskable)Логотипті үзік сызықты қауіпсіз аймақ ішінде ұстаңыз
Веб-қолданба мәліметтері
#

Файлдарды жүктеп салатын жол, мысалы, / немесе /icons/

Мұны HTML <head> ішіне қосыңыз
site.webmanifest
Браузеріңізде жұмыс істейді · серверге жүктелмейдіҚалай жұмыс істейді

Favicon жасағыш құралын қалай қолдану керек

  1. 1

    Көзді таңдаңыз

    Көлемі 25 MB-қа дейінгі логотип немесе сурет жүктеңіз, 11 қаріптің бірімен бір-үш әріп теріңіз немесе эмодзи таңдаңыз.

  2. 2

    Белгішені жасаңыз

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

  3. 3

    Әр өлшемді тексеріңіз

    Белгішені 16-дан 192 пикселге дейін, браузердің ашық және қараңғы беттерінде, сондай-ақ Android-тың maskable қауіпсіз аймағында алдын ала қараңыз.

  4. 4

    Жүктеп алып, орнатыңыз

    favicon.zip файлын сақтаңыз, сайтыңыздың қалтасына шығарыңыз да, жасалған HTML кодын беттің head бөліміне қойыңыз.

Шектеулер және Pro

Мәтіннен немесе эмодзиден белгішелер жинағын шектеусіз жасауға болады; сурет көздері 25 MB-қа дейін, бір-бірден. Әр жинақта 10 файл бар.

Pro логотип суреттерін жүктеу шегін 4 GB-қа дейін арттырады. Pro-ны қарау

Favicon жасағыш туралы

Favicon генераторы бір дизайннан қазіргі заманғы сайтқа қажет белгішелердің толық жинағын жасайды. ZIP архивінде 16, 32 және 48 пиксельдік суреттері бар favicon.ico, бөлек 16, 32 және 48 пиксельдік PNG файлдары, фоны мөлдір емес 180 пиксельдік apple-touch-icon (iOS өзінің дөңгелек бұрыштарын өзі қосады), 192 және 512 пиксельдік Android Chrome белгішелері, мазмұны 80% қауіпсіз аймақ ішінде қалатын 512 пиксельдік maskable белгіше, қолданба атауы, қысқа атауы және тақырып түсі жазылған site.webmanifest, сондай-ақ link және theme-color тегтері бар, қоюға дайын HTML үзіндісі болады. Барлық PNG файлы сапасы кемімей оңтайландырылады.

Жүктелген суреттер Lanczos сүзгісімен кішірейтіледі, сондықтан үлкен логотип 16 пикселде де анық қалады, ал SVG логотип алдымен 1024 пикселде салынады. Мәтіндік белгішелер өзіңіз таңдаған қаріппен, эмодзи Noto Color Emoji қаріппен салынады, сондықтан нәтиже әр келушінің жүйесінде бірдей көрінеді. Белгішелер сайттың түбірінде тұрмаса, қалтаны, мысалы /icons/ деп енгізіңіз, сонда үзінді мен манифесттегі жолдар соған сай өзгереді.

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

Құпиялылық

Белгішелер осы беттегі canvas элементінде салынады және Web Worker ішіндегі сайттың WebAssembly PNG кодегімен кодталады, сондықтан жүктелген логотип құрылғыңыздан шықпайды. Google қаріптерінің бірін немесе эмодзи көзін таңдасаңыз, өңдеуді бастағаннан кейін браузер сол қаріпті Google Fonts-тан жүктейді; сұраныста қаріп атауы ғана көрсетіледі, мәтініңіз емес, ал бет ашылғанда ештеңе жүктелмейді.

Мүмкіндіктер

Белгішелердің толық жинағы

ICO, PNG өлшемдері, Apple touch icon, Android және maskable белгішелері мен веб-манифест бір ZIP архивінде.

Сурет, мәтін немесе эмодзи

Көз ретінде логотипіңізді, 11 қаріптегі бір-үш әріпті немесе кез келген эмодзиді пайдаланыңыз.

Көрнекті пішіндер

Шаршы, дөңгелектелген, шеңбер және сегіз Material пішіні, шет аралығы мен бұрыш радиусын баптау мүмкіндігімен.

Қоюға дайын HTML

Link тегтері, тақырып түсі және манифест жолдары сіз таңдаған қалтаға сай жасалады.

Favicon жасағыш: жиі қойылатын сұрақтар

2026 жылы фавиконға қандай өлшемдер қажет?
Браузерлер беттерде 16 немесе 32 пиксельдік белгішені, кейбір іздеу нәтижесі беттерінде 48 пиксельдікін пайдаланады. iPhone және iPad басты экранда 180 пиксельдік apple-touch-icon қолданады, ал Android веб-манифесттегі 192 және 512 пиксельдік белгішелерді алады. Жүктелетін архив осының бәрін, сондай-ақ ескі браузерлер мен /favicon.ico файлын автоматты түрде іздейтін құралдарға арналған көп өлшемді favicon.ico файлын қамтиды.
Фавиконды сайтыма қалай қосамын?
favicon.zip архивін сайтыңыздың түбірін қамтамасыз ететін қалтаға шығарыңыз, сонда favicon.ico файлы /favicon.ico мекенжайымен ашылады, немесе Белгішелер қалтасы өрісіне енгізген қалтаға шығарыңыз. Құралдағы HTML үзіндісін немесе архивтегі favicon-snippet.html файлын әр беттің head бөліміне не тақырыбыңыздың үлгісіне көшіріңіз. Браузерлер фавиконды қатты кэштейді, сондықтан өзгерісті көру үшін бетті күштеп жаңарту қажет болуы мүмкін.
Фавиконды эмодзиден немесе әріптерден жасауға бола ма?
Иә. Эмодзи көзін таңдап, 24 ұсыныстың бірін таңдаңыз немесе кез келген эмодзиді теріңіз. Не болмаса Мәтін көзін таңдап, Inter, Bebas Neue немесе Press Start 2P сияқты қаріппен үш таңбаға дейін, мысалы есіміңіздің бас әріптерін енгізіңіз. Оны пішінмен және фон түсімен біріктіріңіз. Эмодзи Noto Color Emoji қаріппен салынады, сондықтан белгіше Windows, Mac, Android және iPhone құрылғыларында бірдей көрінеді.
Maskable белгіше дегеніміз не?
Android орнатылған веб-қолданбаларды телефон өндірушісі таңдаған пішінде, мысалы шеңбер, скруглъ немесе тамшы түрінде көрсетеді және белгішені соған қарай қияды. Maskable белгіше бүкіл шаршыны толтырады, ал маңызды бөлігін ортаңғы 80% шеңбердің ішінде сақтайды, сондықтан ештеңе кесіліп қалмайды. Сол шеңберді көру үшін алдын ала қарауда Қауіпсіз аймақты қосыңыз, ал логотип тым жақын болса, шет аралығын өзгертіңіз.
favicon.ico әлі де керек пе, әлде PNG жеткілікті ме?
Қазіргі браузерлер link тегтеріндегі PNG белгішелерін еркін пайдаланады, бірақ favicon.ico әлі де пайдалы: кейбір браузерлер, RSS оқу құралдары, бетбелгі құралдары және роботтар HTML кодын оқымай, /favicon.ico файлын тікелей сұратады. Жасалған ICO 16, 32 және 48 пиксельдік суреттерді бір файлға біріктіреді, сондықтан ол қолданылатын әр өлшемде анық көрінеді. Жүктелетін архивте екеуі де бар, үзінді де екеуіне сілтейді.

Ұқсас құралдар

Барлық сурет құралдары

Қолданба белгішесінің генераторы

Бір суреттен iOS, Android және PWA белгішелерінің барлық өлшемі

SVG ↔ PNG түрлендіргіш

SVG файлынан анық PNG сурет немесе PNG суреттен SVG вектор

Сурет өлшемін өзгерткіш

Пиксель, пайыз не дайын үлгі бойынша — жаппай

Open Graph және meta тегтерін алдын ала қарау

Сілтемені Google, Facebook, X, LinkedIn және Slack үшін алдын ала қарау