Favicon сайта
Фавикон (Favicon) — это иконка, которая отображается рядом с названием страницы во вкладке браузера. Также данный значок отображается в сниппете сайта на странице результатов поиска в некоторых поисковых системах, например Яндекс и mail.ru.
Фавикон повышает узнаваемость сайта во вкладке браузера, повышает кликабельность в результатах выдачи Яндекса, также он может способствовать уровню запоминаемости ресурса.
Как установить фавикон
Для установки favicon нужно иметь подходящее изображение. Оно должно быть размером 16×16 пикселей и иметь формат .ico. Фавикон можно создать самостоятельно или выбрать из существующих на специальных сайтах.
Данную иконку необходимо загрузить на сервер, где находится ваш сайт. После чего указать на нее ссылку между тегами .
Для добавления favicon необходимо разместить следующий html код:
В атрибуте href указывается адрес соответствующего файла.
После выполнения данных действий, если все сделано правильно, фавикон должен появиться во вкладке браузера на вашем сайте.
На странице результатов поиска иконка должна появиться в течение двух недель, с того момента как поисковый робот загрузил иконку.
Как добавить фавикон сайта в HTML
Эта серия мануалов поможет вам создать и настроить веб-сайт с помощью HTML, стандартного языка разметки, используемого для отображения документов в браузере. Для работы с этими мануалами не требуется предварительный опыт программирования.
В результате выполнения этой серии у вас будет веб-сайт, готовый к развертыванию в облаке, также вы получите базовые знания HTML. Умение писать HTML – хорошая основа для изучения более сложных аспектов веб-разработки, таких как CSS и JavaScript.
Примечание: Найти все мануалы этой серии можно по тегу html-practice.
Фавикон – это небольшое изображение, которое находится на вкладке браузера слева от заголовка веб-страницы.
В этом мануале мы расскажем, как добавить иконку сайта – favicon – в адресную строку браузера с помощью HTML. В качестве фавикона вы можете использовать любое изображение, но, учитывая небольшой размер иконки, рекомендуем использовать простые высококонтрастные изображения. Сегодня существуют специальные сайты (типа favicon.cc), которые позволяют создавать пользовательские иконки.
Чтобы добавить такой значок на свой сайт, создайте в каталоге проекта папку images (если у вас еще нет такой папки) и сохраните здесь изображение, которое вы хотите использовать в качестве фавикона. Если у вас пока что нет такого изображения, вы можете использовать наш логотип.
Затем добавьте в файл index.html элемент (в примере он выделен красным), поместите его прямо под элементом . Теперь ваш код должен выглядеть так:
Обязательно укажите относительный путь к файлу вашего изображения вместо Favicon_Image_Location. Сохраните файл index.html и перезагрузите его в своем веб-браузере. Вкладка вашего сайта в браузере теперь должна содержать фавикон.
Теперь вы умеете добавлять иконку сайта в адресную строку браузера с помощью HTML.
Как добавить иконку сайта в адресную строку браузера?
При загрузке сайта, в адресной строке браузера можно иногда увидеть небольшую картинку, которая связана с тематикой сайта. Тот же рисунок отображается рядом со ссылкой при добавлении ее в закладки браузера.
Отображение иконки в строке браузера
Чтобы установить подобную «фичу», необходимо нарисовать изображение размером 16х16 пикселов и сохранить его в формате ICO в корне сайта под именем favicon.ico .
Adobe Photoshop не понимает формат ICO и не сохраняет в нем рисунки, так что для этой цели требуется дополнительный плагин.
Для работы плагина файл необходимо распаковать и сохранить в папке Plug-Ins\File Formats. По умолчанию программа Photoshop CS под Windows устанавливается в папке c:\Program Files\Adobe\Photoshop CS. Тогда полный путь для файла плагина будет c:\Program Files\Adobe\Photoshop CS\Plug-Ins\File Formats.
Размещение плагина для сохранения файлов в формате ICO
После добавления плагина, при сохранении рисунка в списке доступных форматов появляется новый пункт «Windows Icon».
Тип файла для сохранения иконки
Остается сделать желаемую иконку 16х16 пикселов и сохранить ее под именем favicon.ico в корне сайта. Браузер автоматически ищет этот файл и добавляет его в адресную строку, а также закладки.
Файл не обязательно должен располагаться в корне сайта, но тогда следует указать браузеру, где он находится. Это делается через тег , как показано ниже.
Атрибут href задает расположение и имя файла.
Формат рисунка не обязательно должен быть ICO, также допускается использование GIF и PNG. При этом необходимо сменить значение атрибута type на image/gif или image/png , в зависимости от типа изображения.
Как добавить иконку вкладки на страницу
Фавикон — это небольшой значок, который браузер показывает во вкладках страниц рядом с названием. Название произошло от английского favorites icon, что переводится как «значок любимого сайта». Например, у Яндекса фавикон — это красная буква Я:
Трудно представить, но когда-то эти иконки не выводились во вкладках сайтов и нужно было сохранять сайт в избранное, чтобы увидеть этот значок. А ещё раньше вообще не было такой штуки, как вкладки сайтов.
Сегодня покажем, как установить на свою страницу значок на базе любой картинки.
�� Что делаем: создаём фавиконку из картинки и добавляем на свой сайт.
�� Время: 2 минуты.
✅ Понадобится: доступ к исходному коду страницы, куда нужно добавить иконку.
�� Коротко суть: мы преобразуем обычную картинку в специальный формат, который можно подключить к странице. После этого браузер рядом с названием сайта будет показывать этот маленький значок.
1. Выбираем и скачиваем картинку
Чтобы было нагляднее, найдём на фотостоке красивую картинку яблока — пусть оно будет нашей иконкой:
Скачиваем фото, нажав на кнопку «Download free»:
2. Превращаем фото в фавикон
В интернете есть много сервисов для перевода картинок в фавикон. Мы использовали icoconvert.com, но можно выбрать любой другой — все они делают одно и то же.
Загружаем фото в сервис — для этого нажимаем Choose file, выбираем скачанное яблоко и нажимаем Upload:
Если оставить картинку как есть, то фавикон получится странным: размер значка и так очень маленький, поэтому яблоко потеряется на фоне. Чтобы этого не произошло, кадрируем картинку — переходим ко второму шагу и мышкой выделяем нужный нам квадрат:
Дальше ничего не меняем и в самом конце выбираем три формата: 16×16, 32×32 и 128×128. Хитрость в том, что все три разрешения окажутся внутри одного файла и браузер в зависимости от настроек экрана выберет максимально подходящее для него.
После выбора размеров нажимаем Convert ICO, а затем — Download your icon(s):
3. Подключаем фавикон к странице
Скачанный файл переименовываем в favicon.ico — название иконки может быть любым, но некоторые браузеры требуют именно так. Как переименуется, кладём этот файл в ту же папку, что и HTML-файл страницы, к которой хотим его подключить. Мы добавим такой фавикон к нашему проекту с карточками и таск-трекером.
После этого открываем исходный код страницы и вставляем в раздел такую строку:
Всё, мы только что подключили фавикон к сайту — можно открыть его в браузере и увидеть яблоко возле названия страницы: