Utilia
Категории ▾
Јазик: mk ▾

Генератор на 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 и манифестот се создаваат во вашиот прелистувач; ништо не го напушта вашиот уред.

Поврзани алатки