Файл форматтары
ICO дегеніміз не? Белгіше файлдары мен favicon түсіндірмесі
ICO бір файлда бірнеше өлшемді сақтайтын Windows белгіше форматы. Оның құрылымын, favicon тарихын және бүгін қандай өлшемдер керек екенін түсіндіреміз.
Автор: Hemen Dönüştür Editör EkibiЖарияланды: 6 мин оқу
ICO Windows бағдарламалар мен қалталардың белгішелері үшін, ал веб браузер қойындысындағы сайттың шағын белгішесі (favicon) үшін қолданатын формат. Оны басқа сурет форматтарынан ерекшелейтін нәрсе: бір файлда бір белгішенің бірнеше өлшемі сақтала алады. Бұл мақалада ICO файлының ішкі құрылымы, оның Windows нұсқалары бойы қалай дамығаны, favicon тарихы, бүгін қандай өлшемдер керек екені және ICO файлдарын дұрыс жасау жолы түсіндіріледі.
ICO дегеніміз не?
ICO (кеңейтімі .ico) Microsoft белгіше ресурстары үшін анықтаған контейнер форматы. ICO файлы файлдағы әр суретті (мысалы, 16x16, 32x32 және 48x48 пиксель) жеке жазба ретінде тізетін «белгіше каталогынан» басталады. Содан кейін Windows не браузер белгіше көрсетілетін орынға ең жақсы сәйкес келетін өлшемді таңдайды.
IANA-да тіркелген ресми MIME түрі image/vnd.microsoft.icon, бірақ Microsoft бағдарламалары мен көптеген серверлер әлі де image/x-icon қолданады. Тышқан курсорларына арналған CUR форматы дерлік бірдей; ол каталогтың түр өрісінде 1-дің орнына 2-ні қолданады және курсордың басу нүктесін (hotspot) сақтайды.
Тарихы: Windows белгішелерінен favicon-ға дейін
- Windows 1.0: Белгішелер монохромды болды.
- Windows 3.0: Бүгін біз білетін, бірнеше суретті сақтайтын каталогқа негізделген құрылым пайда болды.
- 1995: Джон Хорниктің Microsoft-тағы «Icons» мақаласы ICO құрылымын егжей-тегжейлі құжаттап, әзірлеушілерге кемінде 16x16 (16 түс), 32x32 (16 түс) және 48x48 (256 түс) суреттерін қосуға кеңес берді.
- 1999 жылғы наурыз: Internet Explorer 5 favicon-ды қолдаған алғашқы браузер болды. Сайт түбіріндегі
favicon.icoфайлы таңдаулыларда және мекенжай жолағында көрсетілді. - Windows XP: 32 биттік суреттерге 8 биттік альфа арнасы қосылып, жұмсақ, жартылай мөлдір жиектер мүмкін болды.
- Windows Vista: 256x256 суреттер және ICO ішіндегі PNG қысуы қосылды.
- 2003:
image/vnd.microsoft.iconMIME түрін IANA-ға үшінші тарап ұсынды.
ICO файлының құрылымы
Белгіше каталогы (ICONDIR)
Файл 6 байттық тақырыптан басталады: резервтелген өріс (0), түр (белгішелер үшін 1, курсорлар үшін 2) және суреттер саны. Одан кейін әр сурет үшін 16 байттық каталог жазбасы келеді.
Каталог жазбасы (ICONDIRENTRY)
| Өріс | Мағынасы |
|---|---|
| bWidth, bHeight | Ені мен биіктігі (әрқайсысы 1 байт). 0 мәні 256 пиксельді білдіреді. |
| bColorCount | Палитра түстерінің саны (8 бит және одан жоғары үшін 0) |
| wPlanes, wBitCount | Түс жазықтықтары және пиксельдегі бит саны |
| dwBytesInRes | Сурет деректерінің байтпен өлшемі |
| dwImageOffset | Сурет деректерінің файлда басталатын орны |
Өлшем өрістері бір байт болғандықтан, ICO ішіндегі сурет ең көбі 256x256 пиксель бола алады.
Сурет деректері: BMP не PNG
Классикалық ICO-да әр сурет файл тақырыбы жоқ BMP (DIB). Хорниктің мақаласына сәйкес, онда түсті сурет (XOR маскасы), одан кейін 1 биттік мөлдірлік маскасы (AND маскасы) болады, сондықтан тақырыпта сақталған биіктік екі масканың жалпы биіктігі, яғни нақты биіктіктен екі есе көп. Windows XP-ден бастап 32 биттік суреттер альфа арнасын тікелей пиксель деректерінде тасымалдайды.
Windows Vista-дан бері жазба BMP-нің орнына толық PNG файлы да бола алады. PNG ендіру, әсіресе 256x256 өлшемі үшін, файлды әлдеқайда кішірейтеді. MDN ICO ішіндегі PNG Vista-ға дейін қолдау таппағанын және ескі бағдарламаларда қиындық тудыруы мүмкін екенін атап өтеді, бірақ қазіргі браузерлер мен Windows нұсқалары екі түрін де оқиды.
Қандай өлшемдер керек?
Windows қосымшаларының белгішелері
Microsoft-тың қосымша белгішелері бойынша қазіргі нұсқаулығы Win32 қосымшасында кемінде 16x16, 24x24, 32x32, 48x48 және 256x256 болуы керек дейді. Windows дәл сәйкестік таппаса, келесі үлкенірек өлшемді кішірейтеді; 256 пиксельдік сурет болса, белгіше тек кішірейтіледі, ешқашан үлкейтілмейді. Мысалы, 100% масштабта тақырып жолағы мен контекстік мәзірлер 16 пиксельді, ал тапсырмалар тақтасы 24 пиксельді қолданады; 200%-да олар 32 және 48 болады.
Сайттарға арналған favicon
Вебте басқаша. HTML Standard бойынша бетте rel="icon" сілтемесі болмаса, браузерлер сайт түбірінен /favicon.ico сұрауы мүмкін. Сондықтан түбірде favicon.ico ұстау әлі де жақсы тәжірибе, бірақ оның өзі жеткіліксіз:
- Google Search кемінде 8x8 пиксельдік шаршы (1:1) favicon талап етеді және ол әр түрлі беттерде жақсы көрінуі үшін 48x48-ден үлкенін ұсынады.
- iPhone мен iPad үй экрандары 180x180 өлшемді
apple-touch-iconқолданады. - Android пен PWA веб-қосымша манифесінде 192 және 512 пиксельдік белгішелерді, сондай-ақ бейімделгіш белгішелерге арналған «maskable» нұсқасын күтеді.
- Қазіргі браузерлер SVG favicon-дарды да қолдайды; бір векторлық файл барлық өлшемді қамтиды.
Іс жүзінде favicon.ico ішіне 16, 32 және 48 пиксельді салу жұмыс үстелі браузерлері мен ескі жүйелерді қамтиды, ал үлкенірек өлшемдер бөлек PNG файлдары ретінде беріледі.
Жүйелердегі, браузерлердегі және бағдарламалардағы қолдау
Windows ICO-ны тікелей оқып, жазады; Explorer, жарлықтар және жұмыс үстелі онымен жұмыс істейді. MDN бойынша Chrome, Edge, Firefox, Opera және Safari ICO файлдарын көрсетеді. macOS қосымша белгішелері үшін өзінің ICNS форматын қолданады, бірақ Preview ICO-ны ашады. GIMP сияқты редакторлар ICO-ны әр өлшем бір қабат болатын көп қабатты файл ретінде ашады. MDN жалпы веб мазмұнында ICO қолданбауға кеңес береді және favicon-дар <link> элементімен PNG-ге қарай ауысқанын атап өтеді.
Күшті және әлсіз жақтары
| Күшті жақтары | Әлсіз жақтары |
|---|---|
| Бір файлда бірнеше өлшем мен түс тереңдігі | Ең көбі 256x256 пиксель |
| Windows-та әмбебап қолдау | Вебте favicon-нан басқа пайдасы жоқ |
| Альфа арнасы және PNG қысуы (Vista және кейінгі) | BMP-ге негізделген ескі жазбалар үлкен әрі ыңғайсыз |
| Браузерлер түбірдегі favicon.ico-ны автоматты түрде іздейді | Арнайы құрал керек; оны әр бағдарлама жаза бермейді |
Жиі кездесетін мәселелер және оларды шешу
PNG-дің атын .ico деп өзгерту жеткілікті емес пе?
Кейбір браузерлер мұны көтереді, бірақ бұл нағыз ICO емес: белгіше каталогы жоқ, және Windows оны белгіше ретінде қабылдамайды. Дұрыс жолы суретті нағыз ICO-ға түрлендіру. Біздің PNG-ден ICO-ға және JPG-ден ICO-ға құралдарымыз әрдайым 16, 32 және 48 пиксельдік шаршыларды жазады, ал суретіңіз жеткілікті үлкен болса, 64, 128 және 256 өлшемдерін қосады. Әр өлшем PNG ретінде ендіріледі, сондықтан мөлдірлік сақталады.
Favicon бұлыңғыр не оқылмайды
Жіңішке сызықтар мен ұсақ мәтін 16 пиксельде жоғалып кетеді. Қалың, контрасты, қарапайым белгі қолданыңыз; қажет болса, логотипіңіздің тек символ бөлігін алыңыз. Кемінде 256x256, ең дұрысы 512x512 пиксельдік шаршы көз ең жақсы нәтиже береді.
Шаршы емес сурет жаншылған не созылған болып көрінеді
Белгішелер шаршы. Біздің құралдар суретті ешқашан созбайды: оны пропорциясын сақтап шаршының ортасына қояды да, жиектерін мөлдір қалдырады. Мінсіз шаршы үшін алдымен суретті қию құралымен шаршы бөлікті кесіп алыңыз.
Жаңа favicon көрінбейді
Браузерлер favicon-дарды ұзақ уақыт кэште сақтайды. Файлдың атын өзгерту не нұсқа параметрін қосу (/favicon.ico?v=2) және сервердің дұрыс MIME түрін қайтаратынын тексеру әдетте мәселені шешеді. Google Search нәтижелеріндегі белгіше сайт қайта қаралғаннан кейін ғана жаңарады.
Windows әлі де ескі белгішені көрсетеді
Windows белгішелерді бөлек кэште сақтайды. Қосымшаны қайта құрастырып, жарлықты қайта жасау не жүйеден шығып, қайта кіру көбінесе жеткілікті.
Түрлендіру бойынша кеңестер
- Сайтқа бір ICO жеткіліксіз: favicon жасау құралы favicon.ico (16, 32 және 48 пиксель), favicon-48x48.png, apple-touch-icon.png (180 пиксель), icon-192.png, icon-512.png, maskable icon-512-maskable.png және site.webmanifest файлдарын бірден жасайды, ал көз SVG болса, icon.svg-ді де қосады. Ол сондай-ақ бетіңіздің
<head>бөліміне қоюға арналған кодты береді. - Apple белгішесіне мөлдір емес фон керек: iOS мөлдір аймақтарды қара етіп көрсетеді және бұрыштарды өзі дөңгелектейді, сондықтан favicon жасау құралы apple-touch-icon-ды сіз таңдаған фон түсімен толтырады.
- Логотипіңіз SVG болса: SVG-ден PNG-ге түрлендіру арқылы үлкен PNG жасап, оны ICO-ға түрлендіріңіз немесе SVG-ді тікелей favicon жасау құралына беріңіз.
Біздің ICO және favicon құралдарымыз браузеріңізде жұмыс істейді; суретіңіз жүктелмейді және құрылғыңыздан ешқашан шықпайды.
Жиі қойылатын сұрақтар
ICO суретінің ең үлкен өлшемі қандай?
Каталог жазбасындағы ен мен биіктік өрістері әрқайсысы бір байт, ал 0 мәні 256-ны білдіреді. Сондықтан ICO ішіндегі жалғыз сурет ең көбі 256x256 пиксель болады.
Favicon үшін ICO қолдану керек пе, әлде PNG ме?
Екеуін де қолданыңыз. 16, 32 және 48 пиксельді түбірлік favicon.ico ескі браузерлер мен автоматты сұраныстарға қызмет етеді; қазіргі браузерлер мен мобильді құрылғылар үшін PNG (қаласаңыз SVG) белгішелерін <link> тегтерімен жариялаңыз.
ICO мөлдірлікті қолдай ма?
Иә. Ескі ICO-лар 1 биттік масканы қолданады, 32 биттік суреттерде Windows XP-ден бері толық альфа арнасы бар, ал ендірілген PNG Vista-дан бері мөлдірлікті тасымалдайды.
ICO файлын PNG-ге қалай түрлендіруге болады?
ICO файлыңызды сурет түрлендіргішіне қосып, мақсатты формат ретінде PNG-ді таңдаңыз. Файлда бірнеше өлшем болса, ең үлкені қолданылады.
Mac-та ICO файлдары қолданыла ма?
macOS қосымша белгішелері үшін ICNS форматын қолданады. Сайттар үшін favicon.ico мен PNG белгішелері кез келген операциялық жүйедегі браузерлерде жұмыс істейді.
