Войти
Регистрация

Установка Favicon на сайт

Установка Favicon на сайт

Здравствуйте, дорогие друзья!

Изначально я планировал позиционировать Favicon просто как картинку в углу адресной строки браузера, но все же роль Favicon намного больше, чем просто картинки.

Favicon это, как Вы поняли, картинка в адресной строке возле адреса сайта, а также во вкладке браузера с сайтом. Это изображение помогает Вашим пользователям запомнить Вас, если он у Вас будет ярким, запоминающимся. Также в поисковых системах люди больше обращают внимание и переходят на сайты, где favicon яркий и бросающийся в глаза.

При поиске в интернете все сайты выводятся с ним, но, почему-то, многие его не используют, а некоторые используют просто для галочки, чтобы был, забывая про его полезное свойство.

Чтобы установить favicon, нужно его создать или найти в интернете. Создать можно любым онлайн-сервисом, но я думаю проще либо скачать готовый, либо использовать изображение в формате .png, размером 16x16 или 32x32 пикселя, или же воспользоваться графическими редакторами для создания.

Чтобы облегчить Вам эту задачу могу предложить Вам коллекцию иконок по этой ссылке: faviconka.ru

Как только Favicon у Вас уже будет готова, необходимо будет ее установить следующим образом. Внутри тега <head> уже под всеми мета-тегами пишем:

<meta rel="shortcut icon" type="image/png" href="favicon.png" />

Конечно же, не забудьте саму favicon скопировать в корень сайта, желательно. Если Ваша иконка будет где-то в другом месте на сайте, то измените к ней путь в атрибуте href.

Если Вы все сделали правильно, то favicon появится после обновления страницы во вкладке сайта в браузере.

Если favicon так и не появилась, то попробуйте очистить кэш браузера в настройках, либо обновите страницу, нажав сочетание клавиш Ctrl+F5, а также проверьте, правильно ли Вы указали путь к ней в атрибуте href.

Думаю, раскрыл для Вас тему максимально подробно. Желаю Вам успехов и до встречи.

Более подробно я раскрываю многие темы по созданию сайта в своем бесплатном видеокурсе http://editcode.ru/courses/html-css

С уважением, Самвел Погосов

Рекомендую к изучению мой бесплатный видеокурс по HTML и CSS для начинающих с подробными видеоуроками и заданиями: Перейти к видеокурсу

Комментарии к статье

Бесплатный видеокурс

HTML и CSS для начинающих

Практический и бесплатный курс по основам HTML и CSS для начинающих. С этим курсом Вы сможете изучить базовые понятия верстки и стилей CSS. Курс с практическими уроками и заданиями, все видеоуроки последовательны и увлекательны. Я научу Вас всему, чему научился сам.

Получить курс
Опрос

Для чего Вы изучаете HTML и CSS?