.ico је и даље очекивани формат у корену сајта, а већина онлајн претварача тражи да отпремите слику на њихов сервер. Ево како да од PNG слике добијете исправан favicon.ico са више величина, без икаквог отпремања.
.ico није само преименована слика
Није довољно преименовати logo.png у favicon.ico. ICO је контејнерски формат са сопственим заглављем: описује број слика, њихове димензије и место на ком свака почиње у датотеци. Преименовани PNG нема такво заглавље, па строжи прегледачи одбијају да га прикажу.
Исправан ICO садржи више резолуција исте иконе. Прегледач чита заглавље, бира варијанту најближу потребној величини и ништа не увећава.
Претворите PNG у ICO у три корака
Први корак је припрема извора. Квадратни PNG од најмање 512×512 пиксела даје најбољи резултат, јер све величине настају смањивањем. Ако слика има провидну позадину, одлучите одмах да ли желите да је задржите: одлична је за картицу, али ће је iOS и Android заменити црном.
Други корак је прављење резолуција. Датотека треба да садржи бар 16×16, 32×32 и 48×48. Промена величине мора користити квалитетан филтер поновног узорковања, иначе мале величине постају нечитљиве.
Трећи корак је паковање. Три слике се састављају у један ICO контејнер, са заглављем које описује сваку ставку. Резултат ставите у корен сајта под називом favicon.ico, где га прегледачи налазе и без HTML ознаке.
Зашто је локално претварање важно
Већина претварача PNG у ICO отпрема вашу датотеку на сервер, који је обрађује и враћа резултат. Ваш логотип, често пре јавног објављивања, завршава на рачунару који не контролишете, уз политику чувања коју нисте прочитали.
Међутим, савремени прегледач све може сам: да декодира PNG, промени му величину на canvas површини, поново кодира сваку величину и састави ICO контејнер. Тако ради LFFavicon. Ниједан захтев не преноси вашу слику, а затварањем картице све се брише.
Предност није само теоријска: претварање је тренутно, ради и без интернета када се страница учита, нема реда чекања ни дневног ограничења.
Сам .ico више није довољан
Претварање PNG слике у ICO покрива картице и старе клијенте, али изоставља три контекста: савремене прегледаче који преферирају увек оштар SVG, iOS почетни екран који тражи непрозиран PNG од 180×180 и Android који чита веб манифест.
Пошто већ обрађујете слику, направите цео скуп одједном. Генератор управо то ради: један извор даје .ico, SVG, икону Apple Touch и иконе манифеста, уз преглед сваког контекста пре преузимања.
Примарни извори
Честа питања
Која величина PNG слике је потребна за ICO?
Квадрат од најмање 512×512 пиксела. Испод 128×128 веће иконе у пакету морају да се увећају, па резултат изгледа мутно. SVG је још бољи јер нема ограничење резолуције.
Да ли се провидност чува у .ico датотеци?
Да, ICO подржава пун алфа канал и провидни PNG остаје провидан на картици. Пазите на iOS икону: систем попуњава провидне делове црном бојом, па јој додајте позадину.
Где треба ставити favicon.ico?
У корен домена, доступан на https://yoursite.com/favicon.ico. Прегледачи и роботи по конвенцији захтевају управо ту адресу чак и када датотека није наведена ознаком link.