Як зрабіць favicon з майго лагатыпа?

Перацягніце файл PNG, JPEG, WebP або SVG, задайце параметры, напрыклад Shape, Padding і App name, потым націсніце Generate favicon package (.zip). Скапіруйце фрагмент HTML, паказаны пад Paste into your head.

Якія файлы ёсць у ZIP з favicon?

favicon-package.zip змяшчае favicon.ico, значкі PNG (16, 32, 180, 192 і 512 пікселяў), site.webmanifest з назвай вашай праграмы і favicon-snippet.html з тэгамі link.

Які памер і фармат выявы трэба загружаць?

Прымаюцца PNG, JPEG, WebP і SVG, па адным файле. Для найвастрэйшага выніку выкарыстоўвайце квадратную выяву не меншую за 512x512; найлепш працуе празрысты PNG або SVG.

Як атрымаць круглы favicon або з закругленымі кутамі?

Пасля загрузкі абярыце Square, Rounded або Circle пад Shape. Таксама можна наладзіць Padding ад 0 да 25 працэнтаў і паглядзець вынік у Browser tab preview.

Ці загружаецца мая выява і чаму не атрымліваецца стварэнне?

Значкі малююцца праз Canvas браўзера і архівіруюцца праз JSZip на вашай прыладзе. Калі вы бачыце Could not load this image, файл можа быць пашкоджаны; паспрабуйце іншую выяву або браўзер.

Гэта сапраўды бясплатна?

Так. Кожны інструмент бясплатны, без уліковага запісу і банкаўскай карты. Праца выконваецца на вашай прыладзе, а не на нашых серверах, што і дазваляе заставацца бясплатным.

Ці загружаюцца мае файлы?

Не. Вашы файлы адкрываюцца і апрацоўваюцца ў браўзеры і не адпраўляюцца ў LibraTool. Некаторыя інструменты спачатку спампоўваюць у браўзер апрацоўчы рухавік або мадэль ШІ; у гэтай загрузцы няма вашых даных.

Ці працуе гэта на мабільным тэлефоне?

Так. Працуе ў сучасных мабільных браўзерах на iOS і Android, нічога ўсталёўваць не трэба. Вельмі вялікія файлы на тэлефоне могуць апрацоўвацца павольна або выклікаць нястачу памяці, таму для іх лепш выкарыстоўваць камп’ютар.

🌟

Генератар фавіконак — бясплатна

Ператварыце любую выяву ў поўны пакет фавіконак: шматпамерны favicon.ico, значок дотыку Apple, значкі Android/PWA, вэб-маніфест і гатовы да ўстаўкі фрагмент HTML — усё ў zip-файле, у вашым браўзеры.

Памер файла залежыць ад вашай прыладыФайлы застаюцца прыватныміУваход не патрабуеццаБясплатна назаўсёды

Перацягніце файл сюды або націсніце, каб выбраць

PNG, JPG, WebP, SVG, HEIC, HEIF · апрацоўваецца на вашай прыладзе

або націсніце Ctrl+V, каб уставіць з буфера абмену

Выбраць файлы

Вашы файлы ніколі не пакідаюць вашу прыладу. Уся апрацоўка адбываецца лакальна ў вашым браўзеры.

💡 Для найлепшага выніку загрузіце квадратную выяву не менш за 512×512. Лепш за ўсё падыходзіць празрысты PNG або SVG.

Тыповыя выкарыстанні

Стварыць favicon вэбсайтаГенеруйце палны набор favicon, які чакаюць ўсе браузеры і прыстасаванні.
Генеруйце значкі PWA і ManifestАтрымайце значкі 192px і 512px і вэб-маніфест, якія трэба PWA.
Стварыць значок Apple TouchГенеруйце значок 180×180, які iOS выкарыстоўвае, калі сайт сахаваны на экранам дома.
Пребудуйце лога у faviconПераўтварыце свой брэнд-логіп у чысты, пазнаваемы favicon.
Генеруйце Favicons для любога фреймворкаАтрымайце готовыя файлы favicon для React, Next.js, WordPress і больш.

Як гэта працуе

Гэты інструмент пераводзіць любы PNG, JPEG, WebP ці SVG у поўны пакет фавіконак — шматразмерны .ico, значок Apple touch, значкі Android/PWA, вэб-маніфест і гатовы да ўстаўкі ўрывак HTML — цалкам унутры вашага браўзера з дапамогай Canvas API і JSZip. Нічога не загружаецца; увесь рэндэрынг і зборка файлаў адбываецца лакальна.

1
Canvas перамяняе маштаб вашага малюнка
Браўзер малюе ваш зыходны малюнак на закадравых элементах HTML Canvas пры кожным неабходным памеры (16, 32, 48, 180, 192 і 512 пікселяў). SVG без яўных атрыбутаў шырыні/вышыні спачатку нармалізуюцца праз DOMParser і XMLSerializer, так што Firefox і Chrome вырабляюць ідэнтычны піксельны вывад, а не пусты канвас.
2
Уласнаручна напісаны кадавальнік ICO пакуе файл .ico
Малыя запісы ICO (16, 32, 48 пікселяў) кадуюцца як сырыя 32-бітныя растравыя малюнкі DIB BGRA — BITMAPINFOHEADER плюс радкі XOR знізу-ўверх і 1-бітная маска AND — таму што кампаненты абалонкі Windows патрабуюць нясціснуты фармат DIB пры гэтых памерах. Інструмент запісвае загаловак каталога ICO і злучае запісы цалкам з дапамогай DataView і Uint8Array, без задзейнічання знешняй бібліятэкі ICO.
3
Вывады PNG вырабляюцца праз canvas.toBlob
Кожны варыянт PNG (favicon-16x16, favicon-32x32, apple-touch-icon-180x180, android-chrome-192x192, android-chrome-512x512) захопліваецца выклікам canvas.toBlob з 'image/png', пакладаючыся на кадаванне без страт убудаваным рухавіком малюнкаў браўзера. Апцыянальныя водступы, колер фону і абрэзка формы (квадратная, скругленая ці кругавая) прымяняюцца да кантэксту канваса перад захопам.
4
JSZip аб'ядноўвае ўсё ў адну загрузку
JSZip збірае ўсе згенераваныя файлы — favicon.ico, пяць PNG, site.webmanifest з назвай вашай праграмы і favicon-snippet.html з правільнымі тэгамі <link> — у адзін блоб .zip, які аўтаматычна спампоўваецца на вашу прыладу.

Ваш малюнак загружаецца непасрэдна ў Canvas API браўзера і ніколі не пакідае вашу прыладу — дадзеныя файла ні ў адным пункце не перадаюцца на які-небудзь сервер.

Звязаныя інструменты

🖼️

Канвертар PNG у ICO Favicon

Канвертуйце выявы PNG, JPG, WebP або SVG ў шматпамерныя .ico-файлы фавіконак. Выбірайце памеры для ўключэння (16, 32, 48, 64, 128, 256) і загружайце адзін .ico.

ПаспрабуйцеФайлы застаюцца лакальнымі

🎞️