Как сменить иконку сайта (favicon.ico)
Иконка сайта должна быть в формате .ico, и файл должен иметь название favicon.ico. Для размещения сайта вы можете использовать бесплатный хостинг для сайтов HTML. Бесплатный тестовый режим предоставляется на 14 дней.
Если сайт был создан в Конструкторе Рег.ру, добавьте фавикон по инструкции.
Загрузите файл иконки в каталог вашего сайта: В какой каталог нужно загружать файлы моего сайта.
Дополнительно (не обязательно, но рекомендовано) добавьте следующие строки в каждую страницу вашего сайта внутрь секции:
Как установить фавикон для сайта Рег.сайте
Фавикон — это картинка размером 16х16 пикселей. Она отображается на вкладке ресурса, который вы открыли в браузере.
Так выглядит фавикон сайта Рег.ру:
Для чего нужен фавикон
- Фавикон помогает сориентироваться среди открытых вкладок. Когда в браузере открыто много вкладок, по фавикону проще найти нужный ресурс.
- Повышает кликабельность сайта. Поскольку фавикон отображается при запросе сайта в поисковике, пользователи скорее всего обратят на него внимание. Это повысит количество переходов на ваш сайт.
Как выглядит фавикон в поисковике
- Ваш сайт будут узнавать. Фавикон может стать визитной карточкой вашего бренда или компании. Даже если ваш сайт будет находиться на более низких позициях в поисковой выдаче, чем сайт конкурентов, благодаря фавикону пользователь быстрее заметит ваш ресурс и перейдёт на него.
Рассмотрим, как установить фавикон на Рег.сайт.
Как установить фавикон на Рег.сайт
Чтобы установить фавикон:
Перейдите в раздел Настройки сайта — Дополнительные настройки:
Перейдите в Общие настройки — Свойство сайта:
Кликните на Выберите иконку сайта.
Нажмите на Выберите файлы и добавьте нужное изображение: 
Заполните поле «Заголовок» и нажмите Выбрать: 
Нажмите Опубликовать, чтобы сохранить изменения:
Готово, вы установили фавикон.
Как поменять фавикон на сайте
Фавикон – это совершенно неправильное слово, просто оно используется в разговорной лексике веб-мастеров и под ним понимают картинку, которую вы можете видеть во вкладке браузера, а также при нахождении сайта в поисковой системе Яндекс.
Эта иконка, хотя она и совсем крошечная (16х16), имеет большое значение в общем восприятии сайта. Но ее самая главная роль – привлечь пользователей в поисковой выдаче. Я вам гарантирую, если у вас нет такой картинки, вы теряете 10-30% кликов из поиска, потому что люди кликают на те сайты, у которых есть favicon!
И кому теперь дело, какую вы написали статью, насколько хорошо она отвечает на вопрос человека и т.д. Ее просто могут не заметить, а все по одной причине – нет favicon.
Итак, казалось бы такая мелочь, но значение ее огромно. Таким образом, нужно разобраться, как такую иконку добавлять, а также как из менять в случае необходимости. Сегодня я расскажу вам о двух вариантах: как это сделать через админку WordPress и как через html-код.
Задаем иконку через админку WordPress
Я не помню с какой версии движка появилась возможность задавать иконку для сайта. По крайней мере, желательно иметь 4.0 или выше. Итак, вам необходимо выбрать пункт Внешний вид, а в нем нажать на “Настроить”. Здесь в первой вкладке “Свойства сайта” есть соответствующая настойка, которая позволит вам загрузить изображение. Я рекомендую загружать в формате png.
Кстати, сама система советует загружать картинку не менее 512 писелей по ширине и высоте. Такая рекомендация дается потому, что на мобильных приложениях в браузерах могут действительно использоваться такие размеры. Но в целом вы имеете право полностью проигнорировать эту рекомендацию и загрузить файл любого размера. Главное, чтобы ширина и высота были одинаковыми.
Как поменять favicon через html код
Этот способ уже для тех, кто хочет залезть в код и вообще разобраться, как это работает изнутри. Иконка сайта всегда задавалась в теге head, где подключаются внешние файлы: стили, скрипты, библиотеки и т.д.
Для такого подключения используется одинарный тег link. В нем нужно задать некоторые атрибуты, а также задать путь к файлу.
Добавление иконок для сайта в мультибраузерном и мультипплатформенном мире
От автора: раньше иконки для сайта были такими легкими. Простой растровый favicon.ico 16х16 пикселей. Это как знак препинания в конце проекта. Для разработчика это эквивалент завершения предложения с восклицательным знаком или точкой. Так было раньше. Но за прошедшие 20 лет все изменилось.
Что такое favicon?
Favicon – это маленький значок, помогающий идентифицировать страницу. Это часто забываемая концепция бренда для сайта. Они дополняют UX просмотра в нескольких ключевых местах. В зависимости от браузера и контекста они могут отображаться:
Рядом с именем сайта во вкладке браузера
В списке закладок
Как иконка запуска на домашнем экране устройства и десктопа
В самой адресной строке (я не уверен, но современные браузеры так не делают. Они отображают иконку во вкладке браузера)
Firefox показывает большие favicon на стартовом экране и маленькие во вкладке
Favicon традиционно ассоциировался с сайтом, но так как он добавляется через разметку, то на каждой странице можно поставить свой favicon, если хотите. Можно даже поставить отдельный favicon для всех запросов страницы.
Как правило, браузеры кэшируют favicon. Поэтому если вы планируете делать что-то забавное с несколькими favicon на сайте, кэширование нужно отключить. Один из способов – добавить временную метку в URL favicon.
Мы не будем уделять время кэшированию браузера. Будем поддерживать простоту. Оказывается, с ростом количества платформ и клиентов с поддержкой веб-страниц растет и сложность добавления маленькой иконки так, чтобы она правильно отображалась и удовлетворяла требованиям всех платформ.
Что такое формат favicon .ico (ICO)?
Прежде чем переходить к подробностям, давайте быстро разберем формат ICO.
ICO – формат изображений для отображения иконок. Он берет свои корни из первой версии Windows — Microsoft Windows 1.0 – выпущенной в 1985. По факту, это формат-контейнер для хранения одного и более файлов растровых изображений. Изначально файлы должны были быть в формате BMP. Позже появилась поддержка PNG.
В 1999 Microsoft добавила формат ICO в IE5, как способ создавать закладки и определять сайт – так родился favicon.
Изначально favicon в вебе был размером 16х16 пикселей, но со временем появилась поддержка разных размеров в ICO файле (32×32, 24×24, 48×48, 64×64, 128×128 и 256×256).
Возникает вопрос: если favicon.ico может хранить несколько размеров, то какие из них нужно использовать? Вернемся к этому скоро.
Как подключить favicon?
Зачастую термины favicon и иконка взаимозаменяемы. Однако favicon не обязательно должен быть формата ICO. Часто встречаются форматы GIF, PNG, JPG.
Начнем с самого старого и базового способа добавления favicon на сайт.
Размещение favicon.ico в корне сайта
Изначально Microsoft для Internet Explorer 5 разработала способ добавления favicon на сайт. Для этого нужно было сохранить файл иконки в корневой папке сайта с именем favicon.ico. Это все что требовалось, никакого HTML. Большинство браузеров до сих пор проверяют корневую папку на наличие файла favicon.ico.
Позже когда favicon стал частью стандартов HTML 4.01 и XHTML 1.0, рекомендовали использовать тег link для размещения favicon. Рассмотрим этот способ.
Подключение favicon через тег link
После добавления favicon в стандарты HTML, появился новый способ подключения через тег в head документа. Favicon перестал ограничиваться корневой папкой сайта, теперь можно было указать любой путь.
Даже у такого простого предложения есть сложности. Атрибуты rel и type принимают разные значения. Например, все строки ниже будут работать: