Избор изворне слике и технички захтеви
Да бисте добили најбоље резултате приликом генерисања пакета иконица, важно је обратити пажњу на формат и димензије изворне датотеке. Алат подржава следеће улазне формате:
- SVG: Векторски формат који представља идеалан избор. Када користите SVG, изворни вектор се укључује директно у пакет, што омогућава савршену оштрину на било којој величини и екрану високе густине пиксела.
- PNG и JPG: Растерски формати који су такође подржани. За ове формате се препоручује димензија од најмање 512 × 512 пиксела. Уколико је изворна слика мања, велике иконице ће се повећати (upscale), што може довести до тога да изгледају мутно или меко.
Максимална дозвољена величина датотеке коју можете учитати је 50 MB. Уколико покушате да учитате већу датотеку, систем ће приказати грешку: „Ова датотека је већа од 50 MB. Користите мању изворну слику.“. Такође, ако формат није подржан, појавиће се порука „Подржане су само PNG, JPG и SVG слике.“.
Прилагођавање неквадратних слика и избор позадине
Иконице за веб-сајтове морају бити квадратног облика. Када учитате слику која није квадратна, алат нуди две опције за прилагођавање кроз подешавање под називом „Слика која није квадратна“:
- Уклопи (са маргинама): Ово је подразумевана опција. Цела слика остаје видљива и центрира се, док се око ње додају празнине (маргине) како би се добио правилан квадрат.
- Попуни (опсеци): Слика се сразмерно повећава како би у потпуности попунила квадратни простор, а ивице које прелазе границе квадрата се одсецају.
Избор позадине
Подразумевано подешавање за позадину иконица је провидна позадина. Провидна позадина је одличан избор за картице веб-прегледача јер се иконица природно уклапа у тему прегледача. Међутим, за иконице које се користе на почетним екранима мобилних уређаја (попут iPhone-а), сигурнија опција је позадина у боји. Разлог лежи у томе што оперативни системи попут iOS-а провидне делове иконице аутоматски боје у црно, што може нарушити изглед вашег логотипа. Алат омогућава да изаберете конкретну боју позадине како бисте избегли овај проблем.
Садржај генерисаног пакета иконица
Након што алат заврши обраду, добијате ZIP датотеку која садржи све потребне елементе за ваш сајт. Пакет садржи следеће датотеке:
| Назив датотеке | Димензије / Формат | Намена и улога |
|---|---|---|
favicon.ico |
16, 32 и 48 px | Класична иконица картице прегледача (садржи сва три формата у једној датотеци). |
PNG иконице |
16 и 32 px | Иконице картице у модерном PNG формату. |
PNG иконица |
180 px | Apple touch иконица за почетни екран за iPhone и iPad. |
PNG иконице |
192 и 512 px | Иконице за Android уређаје и инсталиране веб апликације (PWA). |
site.webmanifest |
Текстуални фајл | Мала текстуална датотека која говори уређајима где се налазе велике иконице. |
SVG вектор |
Векторски формат | Укључује се само ако је изворна слика била у SVG формату; оштар на било којој величини. |
Инсталација и имплементација на веб-сајт
Процес постављања генерисаних иконица на ваш веб-сајт састоји се од неколико једноставних корака:
- Преузмите генерисани ZIP пакет кликом на дугме „Преузми ZIP“.
- Распакујте садржај ZIP датотеке и поставите све датотеке у корену фасциклу (root) вашег веб-сајта. Веома је важно да датотеке буду у корену како би прегледачи могли директно да им приступе (на пример, да
favicon.icoбуде доступан на адреси/favicon.ico). - Копирајте генерисани HTML код кликом на дугме „Копирај код“.
- Налепите тај HTML код унутар
headсекције на свакој страници вашег веб-сајта.
Овај код ће повезати све иконице и манифест датотеку са вашим страницама, а уређаји и прегледачи ће сами аутоматски изабрати одговарајућу величину и формат који им је потребан за приказ.
Приватност и сигурност података
Сва обрада слика и генерисање иконица се обављају локално, директно у вашем веб-прегледачу. Ваша слика се не отпрема на сервере BroBroGo.