Безплатен конвертор

Favicon Генератор

Генерирайте favicon файлове в различни размери (16x16 до 512x512) от всяко изображение. Безплатно, незабавно и работи изцяло във вашия браузър.

Плъзнете и пуснете изображение тук

Поддържа PNG, JPG, SVG, WebP. Макс. 10 MB.

или

За този инструмент

Favicon е малката икона, която се появява в раздели, отметки и списъци с хронология на браузъра. Оригиналният favicon — 16×16 ICO файл на /favicon.ico — се разшири до сложен набор от икони с различни размери за различни платформи: 16×16 и 32×32 за раздели на браузъра, 180×180 за началните екрани на iOS, 192×192 и 512×512 за Android и различни размери за плочки на Windows. Създаването на всичко това от едно изходно изображение е това, което прави модерният генератор на фавикони.

Този инструмент взема едно изходно изображение с висока разделителна способност (обикновено квадратно лого) и генерира пълния набор от активи на favicon плюс таговете за HTML връзки, необходими за препращане към тях. Резултатът включва ICO, множество PNG и manifest.json за прогресивни метаданни на уеб приложението. Пуснете получените файлове в основата на вашия сайт и ги препратете чрез генерирания HTML.

Цялата обработка се извършва във вашия браузър. Без качване, без API извикване, без ограничение на скоростта. Резултатът работи на всеки съвременен браузър и операционна система, която показва favicons.

Защо да генерирате Favicon

Сайтовете без favicons изглеждат недовършени. Разделите на браузъра показват обща икона; отметките нямат визуален идентификатор; сайтът изглежда по-малко професионален. Добавянето на подходящ набор от фавикони е стъпка за полиране с малко усилия и силно въздействие, която показва внимание към детайла.

Съвременните изисквания за фавикон надхвърлят /favicon.ico. Иконите на началния екран на iOS, иконите на Android Chrome, иконите на плочките на Windows и вариантите на тъмен режим използват различни файлове. Генерирането им от един източник гарантира последователно брандиране, без да управлявате всеки файл на ръка.

Как да използвате

Качете изходното изображение, вземете пълния набор от фавикони.

  1. Качете изходното изображение: Използвайте квадратно изображение поне 512×512 пиксела. PNG е за предпочитане (поддръжка на прозрачност); SVG също се приема. Източниците с по-висока разделителна способност създават по-резки и малки икони.
  2. Конфигурирайте опциите на платформата: Активирайте изходите за iOS, Android, Windows и PWA, ако е необходимо. Настройките по подразбиране създават стандартния набор, от който се нуждаят повечето сайтове.
  3. Персонализирайте цветовете и темата: Изберете цветове на темата за плочки на Windows и начални екрани на PWA. Съвпадайте с идентичността на вашата марка.
  4. Изтеглете и разположете: Запазете генерирания zip. Поставете файловете в основата на вашия сайт и добавете генерираните HTML тагове за връзка към вашия <head>. HTML препраща всяка икона в правилния размер.

Обичайни случаи на употреба

Технически подробности

Пълният модерен набор от фавикони: favicon.ico (16+32+48 мулти-резолюция), favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png (180×180), android-chrome-192x192.png, android-chrome-512x512.png, mstile-150x150.png. Плюс site.webmanifest за PWA, browserconfig.xml за Windows.

Всеки PNG се генерира чрез намаляване на семплирането на базата на платно от източника. ICO е изградено в JavaScript чрез комбиниране на версии 16/32/48 в ICO формат с множество разделителни способности, използвайки записи на DataView.

HTML етикетите за връзки препращат към всеки файл с подходящи атрибути rel и sizes. Генераторът ги произвежда като готов за копиране и поставяне фрагмент за <head> на вашия сайт.

Най-добри практики

Често задавани въпроси

Какъв формат на изображението трябва да кача?
PNG с прозрачен фон работи най-добре. Използвайте квадратно изображение най-малко 512x512 пиксела, за да може инструментът да намали мащаба без загуба на качество. SVG също работи добре, тъй като се мащабира до всякакъв размер.
Какви размери генерира това?
16x16 (раздел на браузъра), 32x32 (раздел на браузъра @2x), 48x48 (лента на задачите на Windows), 180x180 (икона на Apple Touch), 192x192 (начален екран на Android), 512x512 (начален екран на PWA). ICO файлът съдържа размери 16, 32 и 48px.
Къде да поставя фавикон файловете?
Поставете favicon.ico в основната директория на уебсайта си. Други PNG размери отиват във вашата публична папка или във всеки достъпен път. Добавете HTML таговете за връзка в раздела <head>, сочещи към местоположението на всеки файл.
Защо фавиконата ми не се актуализира в браузъра?
Браузърите агресивно кешират favicons. Изчистете кеша на браузъра си, опитайте да отворите в инкогнито прозорец или добавете низ за заявка за версия (?v=2) към URL адреса на favicon, за да принудите опресняване.
Защо фавиконата ми не се актуализира?
Браузърите кешират favicons агресивно, понякога с дни. Принудително опресняване чрез изчистване на кеша, директно отваряне на URL адреса на иконата или добавяне на параметър на заявка за версия към етикета на връзката.
Изображението ми качено ли е на сървър?
Не. Генерирането става във вашия браузър.
Трябва ли да използвам SVG или PNG?
SVG за източника (независим от разделителната способност). Генераторът извежда PNG файлове с определени размери; съвременните браузъри също поддържат SVG favicons чрез връзка rel=icon type=image/svg+xml.
Какво е site.webmanifest?
JSON манифест за прогресивни уеб приложения, описващ икони, цветове и други метаданни. Изисква се за инсталируеми уеб приложения; безвреден за включване дори на стандартни сайтове.