Инструкция
1
Для установки favicon найдите подходящую иконку. Она должна иметь разрешение .ico и иметь размер 16x16 точек. Данные параметры являются обязательными. Если картинка превышает указанный параметр, системе потребуется самостоятельно уменьшать данную иконку, что может сказаться на скорости загрузки страницы.
2
Создать изображение можно при помощи любого графического редактора на компьютере. Если выбранная программа не поддерживает сохранение в данном формате, вы можете сохранить нужную картинку в .png, .jpg или .gif, а затем сконвертировать ее в нужный формат при помощи любого онлайн-сервиса.
3
После того создания favicon поместите его в одну папку с вашим файлом html. Затем откройте страницу сайта для редактирования в любом текстовом редакторе, который вы используете для создания интернет-страницы.
4
Перейдите в секцию документа и введите код для вставки изображения в дизайн страницы. HTML в данной секции должен выглядеть следующим образом:
<head>
<link rel = “icon” type = “image/x-icon” href = “favicon.ico”>
<!--остальное содержимое секции -->
</head>
<head>
<link rel = “icon” type = “image/x-icon” href = “favicon.ico”>
<!--остальное содержимое секции -->
</head>
5
Сохраните внесенные изменения и откройте отредактированную страницу в окне браузера. Если все данные и теги были указаны верно, в окне вы увидите нужную вам иконку.
Видео по теме
Обратите внимание
В некоторых случаях иконка может появиться не сразу. Это связано с тем, что браузер может загружать кэшированную копию страницы. Если favicon не отображается, очистите кэш обозревателя при помощи соответствующего пункта меню и перезапустите программу. Если картинка все равно не появляется, проверьте правильность введенного вами кода, правильность написания имени файла, его формата и наличие в выбранной директории.
Полезный совет
Некоторые браузеры могут самостоятельно отображать favicon без указания пути до файла в HTML-коде. Однако, чтобы добиться отображения во всех обозревателях, лучше всего ввести вышеуказанный дескриптор в содержимое страницы.
Источники:
- Создание и редактирование Favicon
