Что такое фавикон и как его создать
Аудио перевод статьи
·
Фавиконы помогают идентифицировать любимые сайты как среди закладок, так и среди открытых вкладок в браузере. Это небольшой элемент дизайна, который обозначает ваш бренд или продукт и может служить отличным ориентиром для аудитории.
Что такое фавиконы?
Фавикон — небольшое графическое изображение, которое отображается во вкладке слева от названия веб-сайта, а в некоторых браузерах и в адресной строке. Термин представляет собой сокращение от “favourite icon” (иконка для избранного). Такой значок помогает пользователям идентифицировать нужный сайт среди множества открытых вкладок. Пример: причудливая буква P, которая появляется во вкладке слева от названия сайта ProCreator.
Люди зачастую путают фавикон с логотипом. Он действительно может напоминать логотип, однако эти символы выполняют совершенно разные задачи. Фавикон — это обычно квадрат размером 16 x 16px, предназначенный для использования в браузере.
Если вы разрабатываете фавикон для мобильных устройств, его размеры могут варьироваться. В этом случае речь уже идет об избранных приложениях, иконки которых вы добавляете на домашний экран.
Примеры фавиконов
Вот несколько примеров фавиконов крупнейших технологических компаний.
Google использует круг с буквой “G” внутри.Facebook использует свой логотип, но альтернативной расцветки.
Фавикон Amazon — квадрат с буквой “a” внутри, которая выглядит так же, как первая буква логотипа компании.
Как создать фавикон?
Необходимо выполнить несколько простых шагов:
- Выбрать правильное изображение, соответствующее фирменному стилю или логотипу бренда, чтобы пользователям было проще узнать ваш сайт или приложение.
Это изображение может быть в форматах PNG, JPG. Самый известный, хоть и устаревший формат — ICO, который легко распознается всеми браузерами. - Выбрать правильный размер. Он может варьироваться от 16px (подходит для всех браузеров) до 128px (для Chrome Web Store).
- Выбрать онлайн-инструмент и загрузить получившийся значок.
- После этого иконку можно экспортировать и отправить разработчикам.
Для чего нужен фавикон?
Фавиконы популярны, поскольку они прекрасно вписываются в стратегию брендинга большинства компаний. Это отличный способ сделать так, чтобы люди без труда находили ваш бренд среди множества других открытых в браузере вкладок. Пользователям проще запомнить компанию, что улучшает опыт взаимодействия. Онлайн-брендинг становится эффективнее, а узнаваемость бренда повышается.
Если человек добавил ваш сайт в закладки, фавикон поможет ему позднее быстро обнаружить нужную ссылку. Это повышает шансы на то, что посетитель вернется на ваш сайт.
Больше классных проектов в uprock.design
Источник:
medium.com
Подписаться, чтобы не пропустить следующие новости
Поделиться
Как установить фавиконку — Вебмастер. Справка
- Шаг 1. Разместите фавиконку на сайте
- Шаг 2. Проверьте доступность фавиконки для робота Яндекса
- Шаг 3. Проверьте отображение фавиконки в выдаче
Поместите файл с именем favicon в корневой каталог сайта. Обратите внимание на рекомендации.
Добавьте в HTML-код главной страницы сайта, в элемент head, ссылку на размещенный файл.
<head> ... <link rel="icon" href="https://example.com/favicon.ico" type="image/x-icon"> ... </head>Атрибут Описание Возможные значения rel Тип ресурса icon — учитывается большинством браузеров;
shortcut icon — учитывается браузером Internet Explorer.
href Адрес файла Для описания кириллического адреса фавиконки используйте Punycode. Например для адреса https://мой-сайт.рф/favicon.ico нужно указать https://xn—-8sbzclmxk.xn--p1ai/favicon.ico. type Тип передаваемых данных. Зависит от формата файла image/svg+xml — для формата SVG;
image/x-icon или image/vnd.microsoft.icon — для формата ICO;
image/gif — для формата GIF;
image/jpeg — для формата JPEG;
image/png — для формата PNG;
image/bmp — для формата BMP.
Если в HTML-коде страницы ссылка на фавиконку прописана несколько раз, робот выберет иконку на свое усмотрение.
Проверьте, отображается ли фавиконка в адресной строке браузера при просмотре страниц сайта.
Убедитесь, что:
Файл доступен по прямой ссылке (ответ сервера 200 OK) — воспользуйтесь инструментом Проверка ответа сервера.
Файл не запрещен для индексирования, например в robots.txt с помощью директивы Disallow. Может быть запрещен не сам файл, а каталог, в котором он размещается.
Внесите изменения, если это необходимо.
Проверьте, что робот загрузил файл. Это может произойти, когда робот посетит ваш сайт. В течение нескольких дней после добавления фавиконки на сайт перейдите в Яндекс Вебмастер, на страницу Диагностика → Диагностика сайта. Если в блоке Возможные проблемы отображается предупреждение о проблемах с фавиконкой, следуйте указаниям:
Ошибка Решение Файл отвечает HTTP-кодом, отличным от 200 OK Проверьте ответ сервера. 
Ответ должен соответствовать 200 OK. Другие статусы ответа см. в разделе Проверка ответа сервера.Файл перенаправляет на другой адрес Неправильный тип данныхПроверьте значение параметра type в ссылке на файл. Он должен соответствовать формату файла. Чтобы убедиться, что фавиконка загружена, перейдите по ссылке Посмотрите всё, что проверяет Вебмастер и на открывшейся странице найдите предупреждение о фавиконке. Если отображается статус Всё в порядке, значит робот обработал файл.
Если робот загрузил фавиконку, она появится в результатах поиска в течение двух недель. Как фавиконка может отображаться на сервисах Яндекса.
Чтобы ваш вопрос быстрее попал к нужному специалисту, уточните тему:
Если все требования по размещению фавиконки выполнены, то для индексирования и появления ее в результатах поиска необходимо около двух недель.
Прошло больше двух недель, фавиконка не появилась
Фавиконка может пропасть из поиска, если в случае последнего обновления, она не попала в базу. Такая ситуация возможна, если в момент обхода специальным роботом фавиконка, сайт или его хостинг были недоступны.
Также, проверьте, правильно ли размещена фавиконка. Если она прописана корректно, дождитесь следующего обновления базы фавиконок, это занимает около двух недель.
Прошло больше двух недель, фавиконка не появилась
Такая ситуация возникает, если:
У сайта по разным адресам расположены разные фавиконки. Если сайт доступен по адресам с префиксом www и без него, по протоколам HTTPS и HTTP, проверьте, что фавиконка везде одинаковая или именно та, которая должна индексироваться для каждого из сайтов.
Сайт временно недоступен. В таком случае может скачаться фавиконка хостинга со страницы-заглушки сайта.
Если эти причины устранены и выполнены рекомендации по размещению фавиконки, то после обхода роботом изменения появятся в результатах поиска в течение двух недель.
Рекомендации не помогли, прошло больше двух недель
Должен ли favicon.ico находиться в том же каталоге, что и index.html?
Задавать вопрос
спросил
Изменено 7 лет, 8 месяцев назад
Просмотрено 14 тысяч раз
Я уже использую стандартный способ добавления фавикона:
, поэтому favicon.gif и .ico должны находиться на
/graphics_card
Однако я обнаружил, что IE 8 (или, возможно, другой IE) не может его показать, (обновление: независимо от того, сколько раз я нажимал CTRL-F5, или очищал кеш браузера) , но как только файл .
Итак, если это
http://www.example.com/graphics_card/nvidia/index.html
должен быть favicon.ico в
/graphics_card/nvidia/
тоже. В итоге я указал его как
и просто поместите favicon.ico в этот каталог. Это стандартный способ?
- favicon
Нет, можно поставить куда угодно, если указать в теге. Однако для IE вам необходимо указать полный URL-адрес (т. е. не относительный URL-адрес).
Вы можете разместить его где угодно и использовать тег для ссылки на него. напр.
Однако рекомендуется поместить его в корень домена, например.
http://example.com/favicon.ico, потому что современные браузеры фактически будут вызывать этот файл при загрузке страниц, чтобы сначала загрузить значок.
3
Зарегистрируйтесь или войдите в систему
Зарегистрироваться через Facebook
Зарегистрируйтесь, используя адрес электронной почты и пароль
Опубликовать как гость
Электронная почта
Требуется, но не отображается
Опубликовать как гость
Электронная почта
Требуется, но не отображается
html — Плохая идея — поместить файл favicon.
ico на некорневой путь?спросил
Изменено 9 лет, 3 месяца назад
Просмотрено 51к раз
Когда и как браузеры запрашивают файл favicon.ico? Всегда ли они проверяют его в корне или сначала читают содержимое веб-страницы, чтобы увидеть, указывает ли страница местоположение?
У меня есть путь к favicon.ico в /images На каждой из моих страниц есть следующий тег:
Когда я загружаю страницу в свой браузер, кажется, что она работает (я вижу файл), но я не знаю, делают ли они сначала неверные запросы к моей корневой папке (где файл не существует), и позже делаем запрос по ссылке.
Я хочу свести к минимуму количество ошибок 404 и потерю пропускной способности из-за того, что браузер неправильно обращается к моему сайту.
РЕДАКТИРОВАТЬ: Я ищу информацию о том, как работают браузеры, и запрашиваю этот файл, чтобы структура моего сайта была эффективной.
- html
- http
- кроссбраузерный
- браузерный
1
Помните, что не все запросы к вашему сайту относятся к HTML-страницам! Запросы не-HTML-контента, такого как простые файлы изображений (например, просмотр http://example.com/image.jpeg непосредственно в браузере), не могут видеть <ссылка> тег. Поэтому они должны вернуться к поиску значка ярлыка в стандартном расположении по адресу /favicon.ico .
Это все еще не означает, что это место должно быть каноническим! Вы все еще можете оставить его в /images/favicon.ico , если хотите — просто убедитесь, что перенаправление с /favicon.
