Поуздан HTML фавикон не зависи од једне чаробне ознаке. Користи мали скуп доступних датотека и веза у head делу. Овај поступак покрива савремене картице, старије клијенте и мобилне пречице без гомилања историјских варијанти.
Припремите датотеке
Почните од квадратног симбола који остаје читљив и када је веома мали. Ставите favicon.ico, favicon.svg, apple-touch-icon.png, site.webmanifest и PNG датотеке на које манифест упућује у јавну фасциклу која се служи у корену домена.
Путања попут /favicon.svg апсолутна је у односу на домен. Зато остаје исправна на /products или /blog/article, за разлику од favicon.svg, која се може разрешити у односу на страницу.
Додајте елементе у head
Прво наведите SVG са rel icon и type image/svg+xml, затим ICO са rel icon и sizes any. Додајте rel apple-touch-icon за iOS и rel manifest за инсталацију веб апликације.
Тип мора одговарати датотеци која се заиста служи. Немојте преименовати PNG у .ico: садржај и заглавље морају користити ICO формат.
| Намена | Релација | Датотека |
|---|---|---|
| Савремени прегледач | icon | /favicon.svg |
| Компатибилност | icon | /favicon.ico |
| Почетни екран iOS уређаја | apple-touch-icon | /apple-touch-icon.png |
| Веб апликација | manifest | /site.webmanifest |
Објавите без нарушавања путања
После објављивања директно отворите URL сваке датотеке. Одговор мора бити слика или манифест са успешним статусом, а не HTML страница за пријаву или грешку 404 враћена уз обмањујући статус.
Ако се сајт налази у подфасцикли, прилагодите путање или јавну основну путању. Прегледајте коначну страницу у развојним алатима: прегледач треба да тражи очекиване адресе без преусмеравања на други хост.
Проверите резултат
Поново учитајте страницу са искљученим кешом и прегледајте link елементе у добијеном DOM стаблу. Затим испробајте картицу, обележивач и, где је применљиво, додавање сајта на почетни екран стварног уређаја.
Фавикон у резултатима претраге прати и правила претраживача и његов распоред обиласка. Зато видљива икона у прегледачу не гарантује тренутно ажурирање у резултатима претраге.
Примарни извори
Честа питања
Да ли елемент фавикона иде у body?
Не. Link елементи који описују иконе и манифест припадају head делу документа.
Да ли је favicon.ico у корену довољан?
Корисна је резерва, али не описује икону Apple Touch ни инсталационе иконе манифеста. Наведите формате за те намене.
Зашто користити путању која почиње са /?
Почиње у корену домена и спречава угнежђену страницу да тражи датотеку у сопственој фасцикли.