Надеждният favicon в HTML зависи от малък комплект достъпни файлове и връзки в head. Тази процедура покрива съвременните раздели, по-старите клиенти и мобилните преки пътища, без да умножава историческите варианти.
Подготовка на файловете
Започнете с квадратен символ, четлив в много малък размер. Поставете favicon.ico, favicon.svg, apple-touch-icon.png, site.webmanifest и PNG файловете, посочени в манифеста, в публичната папка, достъпна от основната директория на домейна.
Път като /favicon.svg е абсолютен спрямо домейна. Затова остава правилен в /produits или /blog/article, за разлика от favicon.svg, който може да се разреши спрямо текущата страница.
Добавяне на таговете в head
Първо декларирайте SVG с rel icon и тип 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, върната с подвеждащ статус.
Ако сайтът е в поддиректория, адаптирайте пътищата или публичния основен път. Проверете крайната страница в инструментите за разработчици: браузърът трябва да заявява очакваните URL адреси без пренасочване към друг хост.
Проверка на резултата
Презаредете страницата с изключен кеш и проверете таговете link в получения DOM. След това тествайте раздел, отметка и при нужда добавяне към началния екран на реално устройство.
Favicon в резултатите от търсене следва и правилата на търсачката и нейния график за обхождане. Видима икона в браузъра не гарантира незабавно обновяване в резултатите.
Първоизточници
Често задавани въпроси
Тагът за favicon поставя ли се в body?
Не. Елементите link, които описват иконите и манифеста, принадлежат в head на документа.
Достатъчен ли е favicon.ico в основната директория?
Той е добър резервен вариант, но не описва иконата Apple Touch или инсталационните икони на манифеста. Декларирайте подходящите формати за тези употреби.
Защо да използвам път, започващ с /?
Той започва от основната директория на домейна и предотвратява търсенето на файла в собствената папка на вложена страница.