Utilia
Категории ▾
Език: bg ▾

Генератор на favicon

Създайте favicon.ico, PNG икони, apple-touch-icon и site.webmanifest от едно изображение или емоджи, с готови HTML тагове. ZIP, без качване.

Източник

Побиране
site.webmanifest

Как да създадете favicon

  1. В Източник изберете Изображение или Текст или емоджи. - Изображение: пуснете PNG, JPG, WebP или SVG. Най-добре работи квадратно лого от поне 512 × 512 px. Изберете Цялото изображение, за да се побере в иконата, или Запълни и изрежи, за да покрие квадрата. - Текст или емоджи: въведете буква, инициали или емоджи, после изберете Шрифт, Удебелен и Цвят на текста.
  2. Задайте Цвят на фона или отметнете Прозрачен фон. Изберете Форма (Квадрат, Заоблена или Кръг) и Отстъп (%), за да оставите място около съдържанието.
  3. По желание отворете site.webmanifest, за да въведете Име на приложението (web manifest), Кратко име, Цвят на темата и URL на папката с иконите (оставете /, ако файловете отиват в корена на сайта ви).
  4. Щракнете върху Генерирай favicon. Иконите се появяват в реален размер до имитация на раздел на браузър. След това всяка промяна ги обновява мигновено.
  5. Щракнете върху Изтегли ZIP, качете файловете на сайта си, после Копирай таговете и ги поставете в <head> на страниците си.

Какво има в ZIP архива

Файл Размер Използва се от
favicon.ico 16, 32 и 48 px Раздели на браузъра, отметки, стари браузъри, Windows
favicon-16x16.png 16 × 16 Раздели на браузъра
favicon-32x32.png 32 × 32 Раздели на екрани с висока плътност, преки пътища в лентата на задачите
apple-touch-icon.png 180 × 180 Начален екран на iPhone и iPad
android-chrome-192x192.png 192 × 192 Начален екран на Android (web manifest)
android-chrome-512x512.png 512 × 512 Начални екрани при инсталиране (web manifest)
site.webmanifest — Име, цветове и икони на инсталируем сайт
favicon-tags.html — HTML таговете, за справка

ICO файлът съдържа три PNG изображения – формат, който Windows (от Vista нататък) и всеки съвременен браузър чете. Apple-touch-icon винаги се записва върху плътен фон, защото iOS показва прозрачните пиксели като черни; при прозрачен фон се използва бяло.

HTML таговете

Генерираните тагове изглеждат така (с URL на вашата папка):

<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#ffffff">

Браузърите също автоматично искат /favicon.ico в корена на домейна ви, така че държането му там помага дори на страници без таговете.

Съвети за дизайн

  • Дръжте го простичко. При 16 × 16 px детайлите изчезват. Една буква, удебелен символ или най-простият вариант на логото ви се чете най-добре.
  • Проверете прегледа в реален размер. Иконата от 16 px в имитирания раздел е това, което посетителите виждат наистина.
  • Помислете за тъмния режим. Тъмно лого върху прозрачен фон може да изчезне в тъмни теми на браузъра; цветен фон или малък отстъп помагат.
  • Емоджитата изглеждат различно във всяка система, защото всяка платформа ги рисува в свой стил. PNG файловете запазват вида от вашето устройство.

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

Какви размери трябват на favicon?

На практика: favicon.ico с 16, 32 и 48 px, apple-touch-icon от 180 px и PNG файлове от 192 и 512 px за web manifest. Този инструмент създава всички от един източник.

Мога ли да използвам SVG лого?

Да. SVG файловете се изчертават във висока разделителна способност, преди да се направят иконите. SVG се показва като обикновено изображение, така че скриптовете му никога не се изпълняват.

Как да направя favicon от емоджи?

Изберете Текст или емоджи, въведете или поставете емоджито, изберете фон или го оставете прозрачен и генерирайте. Резултатът е истински PNG и ICO, така че работи във всеки браузър.

Защо новият ми favicon не се показва?

Браузърите кешират favicon агресивно. Презаредете с изчистен кеш, отворете сайта в частен прозорец или добавете версия към URL адреса, например /favicon.ico?v=2.

Качва ли се изображението ми на сървър?

Не. Иконите, ZIP архивът и манифестът се създават във вашия браузър; нищо не напуска устройството ви.

Сродни инструменти