+375 (29) 174-29-71 +375 (29) 774-29-71
Главная Блог Веб-разработка Как сделать и разместить favicon на сайт

Warning: Creating default object from empty value in /home/n35685/public_html/websmart.by/components/com_k2/models/item.php on line 494

Warning: Creating default object from empty value in /home/n35685/public_html/websmart.by/components/com_k2/models/item.php on line 494

Warning: Creating default object from empty value in /home/n35685/public_html/websmart.by/components/com_k2/models/item.php on line 494

Warning: Creating default object from empty value in /home/n35685/public_html/websmart.by/components/com_k2/models/item.php on line 494

Warning: Creating default object from empty value in /home/n35685/public_html/websmart.by/components/com_k2/models/item.php on line 494

Warning: Creating default object from empty value in /home/n35685/public_html/websmart.by/components/com_k2/models/item.php on line 494

Как сделать и разместить favicon на сайт

Для того чтобы ваш сайт выглядел более привлекательным в браузерах пользователей, а также в выдаче некоторых поисковых систем, можно разместить на нем специальный графический файл небольшого размера (favicon).

Favicon – это, по большому счету, обычный графический файл размером 16 на 16 пикселей и имеющий расширение .ico (favicon.ico). Получить данную иконку можно из любого стандартного формата (jpg, png, gif) путем обычного переименования, либо на специализированных online сервисах.  Favicon (фавикон) отображается в закладке браузера, слева от названия сайта.

 

Секреты: если вы хотите чтобы фавикон наследовал фон закладки браузера, вам необходимо подготовить исходный файл на прозрачном фоне в формате png или gif. Это позволяет сделать красивые закругленные края или эффект объема. Если иконка будет представлять собой заливку цвета, то достаточно будет jpg. В нашем случае для сайта websmart.by используется заливка черного цвета.

Некоторый поисковые системы (например, Яндекс и Tut.by) могут использовать favicon для оформления поисковой выдачи. Согласитесь, выглядит красивее, чем обычная текстовая выдача. 

Применяться favicon он может для любых типов сайтов: одностраничный, html без движка, с движком (joomla,wordpress, bitrix) и др.

Однако создать файла favicon – это только полдела, необходимо вставить специальный тег в код сайта, чтобы браузеры и поисковики его правильного воспринимали.

Некоторые CMS позволяют вставлять favicon при помощи плагинов или настроек шаблонов. Если вам с этим трудно разобраться, то есть универсальные методы по внедрению иконки прямо в исходный код. Располагаться специальный тег  должен в пределах тегов <head>…</head>.

<head>
 <link rel="shortcut icon" href="/images/favicon.ico" type="image/x-icon">
</head>

Иконка на хостинге может находится где угодно. С помощью пути href="/…" Вы можете подключить ее из любой папки вашего сайта.

Помимо этого сейчас не обязательно сохранять файл в расширение .ico, современные браузеры будут поддерживать файлы .gif и .png. Только не забывайте при вставке кода в тегах изменить расширение файла на загружаемое.