Содержание
Как установить на сайте красивый и современный favicon
Фавикон это значок вашего сайта или страницы в интернете. Используется браузерами, приложениями и поисковыми системами для презентабельного отображения вашего сайта или страниц сайта во вкладках, закладках, истории, короче везде где есть ссылка на ваш сайт. Очевидно что использование Фавикона на вашем сайте просто необходимо. Красивый, узнаваемый Фавикон поможет посетителям вашего сайта увидеть ссылку на ваш сайт. Этот элемент привлечет внимание пользователя к ссылке на ваш сайт.
Изначально Фавикон использовался достаточно просто. Достаточно было добавить в корень файл favicon.ico. Это картинка в формате ico размером 16 на 16 пикселей. Браузер по умолчанию искал это файл в корне вашего сайта и отображал во вкладках и закладках.
Интернет а вместе с ним и устройства используемые пользователями для выхода в глобальную сеть развиваются огромными темпами.
Старый формат Фавикон в современных браузерах и мониторах выглядит мягко говоря не актуально.
Визуальное отличие старого и нового формата favicon. Как было и как стало.
Сегодня многообразие устройств и браузеров используют разные форматы и разрешения файлов favicon. Попробуем разобраться в всем этом многообразии.
Браузеры настольных компьютеров и ноутбуков используют иконки разрешением 16×16, 32×32 и 48×48 в формате .png или .ico (для старых версий IE только .ico).
Мобильные устройства Android в зависимости от плотности PPI и разрешения экрана используют иконки с разрешениями: 36×36, 48×48, 72×72, 96×96, 144×144, 192×192.
Мобильные устройства Apple так же в зависимости от типа экрана используют иконки с разрешениями: 57×57, 60×60, 72×72, 76×76, 114×144, 120×120, 144×144, 152×152, 180×180.
Можно посмотреть как ваш Фавикон видят поисковики Яндекс и Google:
- Яндекс:
http://favicon.yandex.
net/favicon/mysite.ru - Google:
http://www.google.com/s2/favicons?domain=mysite.ru
net/favicon/mysite.ru
mysite.ru – измените на ваше доменное имя.
Как мы видим форматов множество. Возникает вопрос, как в этом всем разобраться?
На помощь приходит автоматизация процесса создания набора всех необходимых форматов фавиконов. Можно найти сайты на которых необходимые форматы генерируются автоматически вместе с кодом для вставки на сайт.
Изучив несколько сайтов предлагающих генерацию фавиконов (Favicon Generator) я остановился на сайте Favicon & App Icon Generator
Рассмотрим подробно как создать и закачать к себе на сайт весь набор форматов favicon и разместить необходимый код на главной странице своего сайта.
Для начала нужно создать заготовку для генерации остальных форматов. Это должна быть квадратная картинка в формате PNG, JPG или GIF и размером желательно 512×512 px. Это заведомо больше выходных форматов генератора, что позволит создать качественные иконки.
Переходим на сайт Favicon & App Icon Generator. Ссылка есть в тексте, чуть выше.
Выбираем созданный нами ранее файл заготовку и жмем кнопку Create Favicon. Процесс генерации занимает некоторое время. По окончании процесса сайт переадресует нас на страницу с результатами:
Скачиваем архив со всеми необходимыми файлами нажав на ссылку Download the generated favicon. Все содержимое архива закачиваем в корневую директорию вашего сайта.
Копируем весь предоставленный генератором код и вставляем его внутрь контейнера head вашего сайта, между тегами <head> и </head>.
Теперь фавикон — иконка вашего сайта адаптирована под различные устройства и выглядит презентабельно даже на последнем iPhone))
Для сайтов на WordPress добавить favicon на сайт можно из панели администратора WordPress. Для этого нужно перейти в левом меню по пути — Внешний вид — Настроить — Свойства сайта — Иконка сайта.
Выбираем заранее подготовленный файл — картинку.
Если файл не квадратный или большего размера WordPrress предложит обрезать его до нужного размера. Не забудьте сохранить изменения нажав на кнопку — Опубликовать.
В этой статье мы рассказали как можно добавить на сайт современный favicon — значок вашего сайта/
Как создать и установить favicon на сайт?
Недостаточно сделать фавикон чисто «для галочки». Если вы хотите, чтобы он стал дополнительным источником для привлечения посетителей, важно знать, как создать значок сайта правильно.
Каталоги и сервисы для создания фавиконок
Сделать иконку для веб-сайта или одной из его страниц можно самостоятельно, особенно, если вы дружите с фотошопом и прочими подобными программами. Если же нет ни умений, ни времени, ни желания, сегодня доступно изобилие специальных удобных сервисов для генерации фавиконов и галерей, где предлагаются уже готовые значки для ваших проектов:
1. Favicon.
cc — один из самых простых и популярных сервисов не только в России, но и за рубежом. Программа позволяет создать фавикон с нуля, прорисовав буквально каждый пиксель. Любые изменения вы можете посмотреть в онлайн-режиме в специальном окне предпросмотра.
2. IconJ.com — объединяет в себе функции генератора и каталога фавиконов, в котором можно найти более 18 тысяч иконок.
3. Logaster.ru — превосходный генератор логотипов и фавиконов. В отличие от других сервисов, здесь вы можете быстро отыскать картинку, соответствующую тематике вашего проекта. Для этого достаточно указать название сайта и выбрать тему, которой он посвящен. После этого сервис предложит вам несколько десятков подходящих шаблонов значков. Вот пример для сайта, посвященного животным.
И это далеко не все генераторы и каталоги, так что современный веб-мастер без проблем найдет тот favicon, который будет ему по душе.
Внешний вид значка
Стандартный размер favicon составляет 16×16 пикселей. Есть еще размеры 24×24, 32×32, 48×48 и 64×64. Нужно понимать, что иконка сайта – это его лицо, от которого в определенной степени зависит трафик. Поэтому к созданию фавикона необходимо подойти грамотно. Вот несколько правил того, как должен выглядеть значок, чтобы привлекать внимание пользователей:
- Стиль, соответствующий тематике сайта. В изображении должны преобладать такие же цвета и элементы, которые используются и в дизайне интернет-ресурса или его эмблемы. По сути, это и есть главная задача фавикона – соответствовать сайту.
- Простой к восприятию. Не стоит рисовать изобилие элементов и лепить их друг на друга. Пользователь, взглянув на значок, должен понять, что на нем изображено, а не пытаться разгадать ваш «скрытый смысл». Разумный минимализм – залог успеха.
- Запоминающееся изображение. Этот пункт тесно связан с предыдущими двумя. Соответствие тематике и простота фавикона гарантируют вам то, что пользователи быстрее и легче запомнят его. Попытайтесь использовать образ, взглянув на который, человек сможет описать его каким-то словом. К примеру, тот же поисковик «Яндекс» подошел к этому вопросу идеально, и теперь, увидев логотип в форме буквы «Я», вы сразу же вспомните об этой поисковой системе.
Этот пункт тесно связан с предыдущими двумя. Соответствие тематике и простота фавикона гарантируют вам то, что пользователи быстрее и легче запомнят его. Попытайтесь использовать образ, взглянув на который, человек сможет описать его каким-то словом. К примеру, тот же поисковик «Яндекс» подошел к этому вопросу идеально, и теперь, увидев логотип в форме буквы «Я», вы сразу же вспомните об этой поисковой системе.Установка фавикона
После создания favicon, его необходимо установить на сайт. Сделать это очень просто:
- Загрузите изображение favicon.ico в корневую папку вашего веб-сайта;
- Пропишите в HTML коде самого сайта, в мета-теге head, следующий код:
Код:
<link rel="shortcut icon" href="/favicon.ico" type="image/ico">
Код favicon должен располагаться между тегами. Общепринято, при верстке его используют, как можно выше в коде.
Отображение Favicon на мобильном
Favicon для мобильных сайтов используется, как главный значок вашего сайта. Когда вы открываете сайт на мобильном телефоне, на главном экране быстрого доступа в браузера, отображается именно этот favicon. Ваш сайт можно добавить на главный экран телефона, и здесь тоже подтягивается мобильный favicon.
Как видно выше на скриншоте, у Вконтакте и Avito, фавиконка не адаптирована под мобильные устройства, поэтому используется первая буква домена.
В эру мобильных телефонов, каждый сайт обязан использовать такие Favicon для отображения на мобильных телефонах. Это создает удобство для ваших посетителей сайта.
Иконка для IOS
Чтобы favicon отображалась на устройствах IOS и в браузере Safari, надо прописать следующий код:
Код:
<link rel="apple-touch-icon" href="/apple-touch-icon-57x57.png"> <link rel="apple-touch-icon" href="/apple-touch-icon-60x60.
png">
<link rel="apple-touch-icon" href="/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" href="/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" href="/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" href="/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" href="/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" href="/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" href="/apple-touch-icon-180x180.png">Android
Для устройств работающих на Android, прописываем:
Код:
<link rel="icon" type="image/png" href="/favicon-16x16.png"> <link rel="icon" type="image/png" href="/favicon-32x32.png"> <link rel="icon" type="image/png" href="/favicon-96x96.png"> <link rel="icon" type="image/png" href="/favicon-192x192.png">
Но этот код отобразит ваш favicon, только в браузере.
А для того, чтобы иконка отображалась на рабочем столе смартфона, необходимо задать файл-манифест.
Код:
<link rel="manifest" href="/manifest.json">
Его содержимое:
Код:
{
"name": "%title%",
"icons": [
{
"src": "\/android-chrome-36x36.png",
"sizes": "36x36",
"type": "image\/png",
"density": "0.75"
},
{
"src": "\/android-chrome-48x48.png",
"sizes": "48x48",
"type": "image\/png",
"density": "1.0"
},
{
"src": "\/android-chrome-72x72.png",
"sizes": "72x72",
"type": "image\/png",
"density": "1.5"
},
{
"src": "\/android-chrome-96x96.png",
"sizes": "96x96",
"type": "image\/png",
"density": "2.0"
},
{
"src": "\/android-chrome-144x144.png",
"sizes": "144x144",
"type": "image\/png",
"density": "3. 0"
},
{
"src": "\/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image\/png",
"density": "4.0"
}
]
}
0"
},
{
"src": "\/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image\/png",
"density": "4.0"
}
]
}Более подробно можно посмотреть в документации Google Chrome.
Но это еще не все. В новых версиях Android (начиная с Lollipop), ваш браузер может перекрашиваться в интерфейс цвета сайта.
Код:
Чтобы сделать такую фишку, прописываем строчку и задаем свой цвет:
Сервисы для генерации и проверки favicon
Digitalagencyrankings.com
Первый сервис http://digitalagencyrankings.com/iconogen/, очень простой в использовании. Для того чтобы вручную не делать favicon разных размеров, вы загружаете в этот сервис свою иконку в jpg, png или gif. Сервис создает её в разных размерах.
Сразу видно, как они будут выглядеть.
Есть возможность скачать все иконки в одном архиве.
Сервис сразу генерирует код для вставки на сайт:
Код:
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" /> <link rel="apple-touch-icon" href="/apple-touch-icon-57x57.png"> <link rel="apple-touch-icon" href="/apple-touch-icon-60x60.png"> <link rel="apple-touch-icon" href="/apple-touch-icon-72x72.png"> <link rel="apple-touch-icon" href="/apple-touch-icon-76x76.png"> <link rel="apple-touch-icon" href="/apple-touch-icon-114x114.png"> <link rel="apple-touch-icon" href="/apple-touch-icon-120x120.png"> <link rel="apple-touch-icon" href="/apple-touch-icon-144x144.png"> <link rel="apple-touch-icon" href="/apple-touch-icon-152x152.png"> <link rel="apple-touch-icon" href="/apple-touch-icon-180x180.png"> <link rel="icon" type="image/png" href="/favicon-16x16.png"> <link rel="icon" type="image/png" href="/favicon-32x32.png"> <link rel="icon" type="image/png" href="/favicon-96x96.
png">
<link rel="icon" type="image/png" href="/android-chrome-192x192.png">
<meta name="msapplication-square70x70logo" content="/smalltile.png" />
<meta name="msapplication-square150x150logo" content="/mediumtile.png" />
<meta name="msapplication-wide310x150logo" content="/widetile.png" />
<meta name="msapplication-square310x310logo" content="/largetile.png" />Realfavicongenerator.net
Второй сервис https://realfavicongenerator.net, имеет более расширенные настройки и проверку иконок на валидность.
Загружаем на сайт свое изображение в размере не менее 260*260, чтобы получить более лучшие результаты.
В сервисе мы можем настроить иконку для разных устройств: размер изображения, цвет подложки и т.д. Здесь сразу отображается, как будет выглядеть favicon на устройстве.
При генерации сервис также предоставляет код для вставки на сайт и запакованные иконки в архиве.
Проверка иконок
После установки иконок на сайт, вы можете их проверить валидатором https://realfavicongenerator.net/favicon_checker
Вписываете свой адрес сайта и получаем анализ.
Не пренебрегайте настройкой favicon для мобильных устройств. Помните, что это удобно для ваших посетителей, им легко увидеть ваш сайт в браузере и перейти на него.
Заключение
На сегодняшний день практически все браузеры поддерживают favicon. Иконка каждого сайта уникальна, и правильное ее создание позволит передать всю суть сайта и увеличить кликабельность вашего сайта на выдаче.
Исходя из этого, можно сделать вывод, что favicon служит дополнительным способом выделить свой проект среди огромного количества чужих сайтов, повысить его запоминаемость и узнаваемость. Это непременно поспособствует увеличению поискового трафика.
Нет комментариев для отображения.
Руководство 2022 г. по значкам избранного для почти всех и каждого браузера
Как создавать фавиконы для вашего веб-сайта
Когда-то для создания фавикона требовалось сделать всего одну иконку размером 16×16 пикселей и поместить ее в корневой каталог веб-сайта. Это все еще работает сегодня, хотя и с некоторыми оговорками. Этот пост обновлялся несколько раз за эти годы, чтобы быть в курсе событий, поскольку устройства и стандарты менялись и полностью исчезали, как злополучный Google TV и его собственный отдельный значок.
В современных устройствах дисплеи, как правило, имеют дисплеи высокой плотности (ретина). Эти устройства и дисплеи имеют больше пикселей на квадратный дюйм. Конечным результатом является гораздо более четкий текст и изображения. Как правило, графику необходимо оптимизировать для дисплеев с высоким разрешением. На этих устройствах и дисплеях классический фавикон размером 16 x 16 пикселей выглядит пиксельным; таким образом, необходимы дополнительные шаги.
Чтобы сделать ситуацию еще более запутанной, многие новые устройства, например, iOS и Android, имеют свои предпочтительные замены значков.
Это руководство по созданию фавиконов для (почти) всех мыслимых браузеров.
Цель состоит в том, чтобы обеспечить наилучшие результаты (без пикселизации) с наименьшим объемом работы и, самое главное, сохраняя при этом рассудок.
Изображение: NPR.org не имеет фавиконки на дисплее сетчатки, поэтому он выглядит пиксельным
Конкретные интересы? Вот что мы рассмотрим в этой статье:
- Краткая история favicon.ico
- (в основном) полный список всех известных размеров любимых значков
- Почему не SVG?
- Проверка работоспособности: утилиты Photoshop/Automator
- Что не будут делать эти утилиты
- Загрузка шаблона Photoshop/macOS Automator/Sketch
- Как установить действие Favicon Photoshop
- Использование экшена Photoshop
- Использование автомата Действие
- Использование шаблона эскиза
- Оптимизация
- Поддержка IE6 – IE10 (и проблема с Safari)
- Использование IconSlate для создания Retina Favicon
- Онлайн-генератор HTML + XML
Краткая история Favicon.
ico
Первоначально Favicon был представлен Microsoft в марте 1999 года вместе с новой вкладкой «Избранное» в Internet Explorer 5. Номенклатура Microsoft назвала закладки в Internet Explorer «Избранным». В закладках на вкладке «Избранное» можно было добавить значок «Избранное» рядом с каждым URL-адресом. Если бы на веб-сайте был файл favicon.ico, размещенный в корневом каталоге его домена, запись в избранной закладке включала бы пользовательский значок. Вскоре после этого, в 2000 году, Консорциум World Wide Web (W3C) принял фавикон для HTML 4.0 (с намеренно расплывчатыми спецификациями).
Еще в 2001 году веб-браузеры начали использовать значок фавикона рядом с URL-адресом и вскоре стали повсеместными в Интернете, перейдя на привычные теперь вкладки браузера. Позже и Firefox, и Safari добавили поддержку PNG для фавиконов, что стало первым серьезным изменением в формате фавикона. В 2008 году, после запуска первого iPhone, фавикон совершил еще один важный поворот после того, как Apple представила «apple-touch-icon.
png», версию фавикона с более высоким разрешением, используемую для закрепления на док-станции iOS. Это создало прецедент для нескольких размеров значков и помогло закрепить PNG в качестве предпочтительного формата по сравнению с форматом файлов ICO Microsoft Windows.
W3C, признавая необходимость универсальности, включил в HTML5 стандарт для нескольких размеров фавикона, который получил широкое распространение благодаря дисплеям с высокой плотностью, новым пользовательским интерфейсам операционных систем, изменениям в браузерах и мобильным устройствам. Сегодня у нас есть пользовательские значки для всего, от телевизоров Google до плиток Microsoft Windows Metro.
(в основном) полный список всех известных размеров любимых значков
Ниже приведен скомпилированный список известных на данный момент размеров любимых значков, этот список основан на шпаргалке по любимым значкам. Серые значки — это когда-то устаревшие значки, которые все еще можно использовать, но они больше не поддерживаются.
Из-за возраста они были исключены из проекта favicons.
| Размер | Имя | Назначение |
| 32×32 | favicon-32.png | Стандарт для большинства настольных браузеров |
| 128×128 | favicon-128.png | Значок Интернет-магазина Chrome и маленький значок Windows 8 Star Screen* |
| 180×180 | favicon-180.png | iOS предпочтительнее |
| 192×192 | favicon-192.png | Рекомендация манифеста веб-приложения Google Developer |
Современные браузеры и устройства переключились на масштабирование значков ближайшего размера. ICO, GIF и PNG поддерживаются Edge, Firefox, Chrome, Opera и Safari. SVG и JPEG поддерживаются всеми современными браузерами (кроме Internet Explorer), однако Safari поддерживает только значки SVG в предварительной версии.
Анимированные GIF в основном не поддерживаются.
Устаревшие фавиконы
Их следует игнорировать, если у вас нет особого случая использования.
| Размер | Имя | Назначение |
| 57×57 | favicon-57.png | Стандартный домашний экран iOS (iPod Touch, iPhone первого поколения для 3G) |
| 76×76 | favicon-76.png | Значок домашнего экрана iPad |
| 96×96 | фавикон-96.png | Значок GoogleTV * |
| 120×120 | favicon-120.png | Значок сенсорного экрана iPhone Retina (Изменение для iOS 7: увеличено с 114×114) |
| 144×144 | favicon-144.png | Плитка Metro IE10 для закрепленного сайта* |
| 152×1524 | favicon-152.png | Значок сенсорного экрана iPad (изменение для iOS 7: увеличено с 144×144)< |
| 167×1674 | favicon-167. png | Сенсорный значок iPad Retina (изменение для iOS 10: вместо 152×152, не действует. iOS 10 будет использовать 152×152)< |
| 195×195 | favicon-195.png | Значок быстрого набора Opera (не работает в Opera 15 и более поздних версиях) |
| 196×196 | favicon-196.png | Значок главного экрана Chrome для Android |
| 228×228 | favicon-228.png | Иконка Opera Coast |
Когда эта статья была первоначально написана, это был общий список из 14 значков, считая изменения iOS. Мы можем с уверенностью предположить, что доля iOS резко упала: согласно статистике Apple, только 9% устройств используют более раннюю версию iOS 12. Используя показатели приложения «Аудиокнига» Дэвида Смита, менее 2% пользователей используют iOS ниже 10 на момент написания этой статьи.
Итак, основываясь на более разумных принципах, мы можем удалить большую часть шума.
Последний раз Google TV обновлялся в 2010 году. Apple перешла на Retina в 2010 году с iPhone 4, а с Touch и iPad — в 2012 году. Opera Speed Dial исчезла в 2013 году, Opera Coast была удалена из магазина приложений Android в 2017 году. , у нас осталось семь основных фавиконов (если только у вас нет проекта с очень специфическими устаревшими требованиями). Microsoft потребовала метатеги msapplication-TileColor и msapplication-TileImage, чтобы IE10 в Windows 8 распознал значки Favicons, которые также можно удалить из исходного списка.
Наконец, в манифесте веб-приложения Google отмечается, что Chrome принимает значки избранного с шагом 48 пикселей и по умолчанию имеет значение 192 или 512. Ради здравого смысла мы будем придерживаться только 192.
Общий список на 2022 год
- 4 фавиконки (32 x 32, 128 x 128, 180 x 180 и 192 x 192)
- Ссылки в теге вашего веб-сайта для каждого размера
В предыдущих версиях этого руководства рекомендуется использовать специальный файл XML для плиток меню «Пуск» Windows (8.
1 и выше) (для IE11+ и Windows 10 требуется файл browserconfig.xml.) Это все еще можно сделать, но это случай Edge (каламбур ) подавляющее большинство пользователей не используют Edge в Windows.
Почему не SVG?
Некоторые читатели, просматривающие этот список, могут заинтересоваться масштабируемой векторной графикой (SVG) как более разумным решением вместо создания значков во всех мыслимых разрешениях, поскольку значки являются одним из лучших вариантов использования векторных изображений. На момент написания этой статьи не все основные браузеры поддерживают значки SVG. См. CanIuse.com для получения более подробной информации.
Оптимизация
Неоптимизированные файлы PNG из Photoshop имеют довольно большой размер. Я настоятельно рекомендую пользователям macOS использовать бесплатное приложение ImageOptim для сжатия PNG без потерь, а пользователям Linux — Trimage. Оба просты в использовании. Перетащите все вновь созданные файлы PNG, чтобы сократить ценные килобайты изображений без снижения качества.
Пользователи macOS/Linux также могут использовать PNGOUT, утилиту интерфейса командной строки для оптимизации PNG.
Для более технически подкованных пользователей macOS утилита оптимизации PNG ImageAlpha (работает в тандеме с ImageOptim) позволяет пользователям использовать индексированные цветовые профили еще больше для уменьшения размера файлов.
Наконец, PNGquant по умолчанию работает из Photoshop для Windows/OS X, а TinyPNG предоставляет бесплатный сервис, который можно использовать в веб-браузере на любой платформе.
Поддержка IE6 – IE10 (и проблема с Safari)
Для самых одержимых: IE10 и более ранние версии не поддерживают иконки PNG, только ICO. В зависимости от источника, IE10 и более ранние версии по-прежнему составляют примерно 0,2%-1,4% пользователей Интернета в Северной Америке в апреле 2017 года. К счастью, из месяца в месяц это число продолжает уменьшаться, но различается в зависимости от региона земного шара и даже от страны. / языковая основа.
IE10 был выпущен 4 сентября 2012 года в качестве браузера по умолчанию в Windows 8 и включен в Windows 7 SP1, но поскольку Windows 10 постепенно заменяет Windows 8, пользователи Internet Explorer все чаще переходят на замену IE от Microsoft, Edge.
Если вы решите включить favicon.ico для старых пользователей IE, есть важное предостережение Safari. На момент написания этой статьи, если в ваш HTML включены и ICO, и PNG, настольная версия Safari будет использовать файл ICO вместо PNG. Это проблема, так как большинство генераторов значков создают только значки размером 16 x 16 пикселей. На дисплеях Retina будет отображаться менее привлекательная иконка 16 x 16 вместо красивой PNG 32 x 32. Тем не менее, без каких-либо затрат для пользователей IE формат файла .ico от MS может поддерживать значок размером 16 x 16 пикселей и 32 x 32 пикселя в одном файле. Пользователи IE10 и более ранних версий увидят значок 16 x 16, тогда как пользователи Retina Safari могут наслаждаться фавиконом с гораздо более высоким разрешением 32 x 32 пикселей.
Для создания фавиконов, совместимых с Retina, требуется несколько дополнительных шагов. Ниже приведена адаптированная версия рекомендации Джона Грубера «DaringFireball.com: Создание фавиконов Retina Caliber». Этот метод требует покупки IconSlate (5 долларов США).
Использование IconSlate для создания фавиконки сетчатки (метод DaringFireball)
- Откройте IconSlate и создайте новый проект. Выберите только формат .ico, щелкните стрелку рядом с ico и установите только флажки 32 и 16.
- Назовите свою иконку «favicon» (без кавычек)
- Выделите квадрат 32 и вставьте значок размером 32 x 32 пикселя
- Выделите квадрат 16 и вставьте в него значок размером 32 x 32 пикселя или, если у вас есть собственный значок 16 x 16 пикселей, вставьте в него этот файл.
- Нажмите значок «Сборка» (если по какой-то причине значок «Сборка» неактивен, перейдите в «Файл» -> «Сборка»
Онлайн-генератор HTML + XML
Ниже приведен быстрый онлайн-генератор кода, который я написал.
Он сгенерирует необходимые HTML и XML для использования ваших значков.
- Введите путь к вашим любимым значкам. (если вы решили создать favicon.ico, поместите его в корень вашего домена независимо от других ваших значков).
- Выберите цвет фона для значка плитки Windows.
- Прокрутите вниз до кода, скопируйте и вставьте его или загрузите файлы.
- Поместите файл XML в тот же каталог, что и ваши любимые значки.
См. Генератор HTML/Браузера XML Pen Favicon от Грега Ганта (@fuzzywalrus) на CodePen.
Манифест веб-приложения
Манифест веб-приложения — это простой файл JSON, в котором подробно описывается, как веб-приложение должно функционировать, когда веб-приложение «установлено» (связано с панелью приложений Chrome). Этот файл JSON включает объявления для фавиконов.
Дополнительные сведения см. в манифесте веб-приложения
Поздравляем! Готово!
Хороший способ протестировать ваши новые любимые значки — использовать мобильное устройство или мобильный симулятор и закрепить свой веб-сайт на док-станции/главном экране. Вы должны увидеть новый значок фавикона на док-станции/главном экране.
Присоединяйтесь к веселью: Внесите свой вклад в проект github здесь: https://github.com/fuzzywalrus/Photoshop-FavIcon-Action
фавиконов: все, что вам нужно знать в 2022 году
Если вы сейчас посмотрите на открытые вкладки браузера, вы увидите букву «W» Webflow на этой открытой веб-странице. Это небольшое графическое украшение известно как фавикон.
Давайте подробнее рассмотрим, откуда взялись фавиконки, как они используются, а также советы по созданию собственных.
Начало фавиконки
Фавиконы восходят к Internet Explorer 5. В то время они жили в корневых каталогах веб-сайтов с довольно простым названием «favicon.
ico», которое используется до сих пор. Если вы добавили веб-сайт в избранное в Internet Explorer, рядом с ним в адресной строке появится значок значка, а также список закладок.
Помимо своей роли элемента дизайна, фавиконы также использовались в качестве примитивного средства отслеживания количества посетителей. Можно оценить популярность веб-сайта по количеству загрузок фавикона. К счастью, метрики и измерение посетителей блога прошли долгий путь с тех пор, как эти довольно грубые начинания.
Где найти фавиконы
Фавиконы отображаются в левой части вкладок браузера на рабочем столе. Они могут быть небольшими — как правило, с разрешением 16×16 или 32×32 пикселей на экранах с сетчаткой, — но эти небольшие элементы визуального брендинга нельзя упускать из виду при создании веб-сайта.
Изображение favicon может иметь форму урезанной версии логотипа, символа или даже одного символа. Поскольку они должны вписываться в небольшое пространство, предоставляемое современными браузерами, они должны быть простыми, но эффективными.
- Если вы посмотрите на HTML-код веб-сайта, на котором есть значок , вы увидите его в теге и в форме:
.
- Вы также можете увидеть дополнительные размеры favicon.png в коде e, чтобы приспособить различные приложения и устройства, мы рассмотрим это чуть позже в этом посте. Фавиконы не ограничиваются вкладками браузера и могут отображаться в других местах, где перечислены или отображаются веб-сайты.
- Вы найдете фавиконы в истории вашего браузера. Независимо от того, используете ли вы Chrome, Safari, Firefox или любой другой совместимый браузер, рядом с веб-сайтом, который он представляет, появится значок фавикона. Вот как они выглядят в Google Chrome:
- Фавиконы также появляются в автоматически сгенерированных предлагаемых результатах в строке поиска Google, а также в раскрывающихся списках закладок и на панелях инструментов браузера. В этих занятых списках значки позволяют нам идентифицировать веб-сайты, даже не читая текст.
В этих занятых списках значки позволяют нам идентифицировать веб-сайты, даже не читая текст.Как правильно использовать фавиконки
Фавиконы служат визуальными ориентирами, создавая более единообразный пользовательский интерфейс и общую идентичность бренда. Точно так же, как вы прилагаете усилия к гармонии стилей CSS, которые сочетаются в веб-дизайне, вы также должны обратить внимание на то, как фавикон вписывается в вашу общую тему и брендинг.
Примеры, которые следует учитывать при разработке собственного фавикона, включают кнопку воспроизведения YouTube, синюю птицу Twitter и красочную букву «G» Google. Эти значки уникальны, их можно сразу идентифицировать, и они позволяют легко обнаружить бренд при сканировании вкладок.
При создании столь же запоминающегося фавикона — вот некоторые вещи, которые вы должны принять во внимание
Сделайте свой значок маленьким, но разборчивым.
Существует несколько размеров фавиконов, которые следует учитывать, но имейте в виду, что при наименьшем размере 16×16 пикселей они должны быть разборчивыми.
Это означает придумать визуальный крючок, который улавливает суть бренда, обеспечивая его мгновенное узнавание.
Отличным примером является использование четкого текста с одного из наших любимых дизайнерских веб-сайтов Behance. Даже в этом небольшом масштабе нет недостатка в четкости, а изображение выглядит высококачественным и легко узнаваемым.
Не переусердствуйте
При таком ограниченном пространстве лучше придерживаться минимализма. Один из самых простых способов создать фавикон — взять элемент из уже существующего логотипа.
Вот несколько примеров:
- PetSmart имеет довольно большой логотип, который не помещается на вкладке браузера. Для своего фавикона они используют только прыгающий красный шар со своего логотипа. Это единственное изображение является отличным представлением их бренда, но при этом использует чистый и простой дизайн.
- Если ваш логотип также является символом, его легко использовать в качестве фавиконки. Логотип Apple s — отличный тому пример.
Логотип Apple s — отличный тому пример.- Instagram использует логотип камеры как для кнопки приложения, так и для значка, что создает ощущение преемственности бренда на разных платформах.
Сократите количество символов до нескольких символов
Наряду с извлечением символического элемента из логотипа вы также можете использовать символ в фавиконе. Есть много брендов с фавиконами, которые используют одну букву для обозначения того, кто они есть.
Угадаете, чьи это фавиконки?
Наклоняющаяся буква «D» мгновенно узнается как Disney, стилизованная буква P в красном круге — из Pinterest, а синий квадрат с буквой «in» указывает на LinkedIn.
При разработке фавикона сокращение его до одной-двух основных букв хорошо работает для представления бренда.
Рассмотрите цветовую схему
Помимо того, что из себя представляет ваш фавикон, не менее важно, как он использует цвет.
Вот некоторые моменты, которые следует учитывать при выборе цветов:
- Цвет фона вкладки браузера обычно серый или белый , а иногда и черный, если он был переключен в ночной режим. При разработке фавикона учитывайте, как он будет выглядеть на разных цветах фона. Например, Marvel использует только красный и белый цвета, что является надежной комбинацией, которая выделяется независимо от того, какого цвета может быть вкладка.
- Ваш холст для создания фавиконки занимает очень мало места. Используйте изысканную палитру с цветами, которые хорошо смотрятся вместе в крошечном масштабе.
- Используйте достаточно контрастные цвета, чтобы они отличались друг от друга. Ясность и четкость являются ключевыми факторами.
Лучше всего использовать векторную графику
Хотя может возникнуть соблазн быстро создать что-то в Photoshop, использование векторной графики поможет вам в будущем.
Когда вы создаете фавикон в Illustrator, Sketch, Figma или другом приложении для векторного дизайна, гораздо проще изменить его размер и изменить его позже.
Многие дизайнеры начинают с графических фавиконов на основе SVG, а затем конвертируют их в невекторизованные файлы, такие как png, gif, jpg или ico.
Рассмотрите возможность создания фавиконов с помощью генератора фавиконов
Генераторы фавиконов предлагают быстрый способ создать значок и создать несколько размеров. Они также удобны для создания HTML-кода, который вы можете внедрить в свой дизайн, отображая его в разных приложениях и на разных устройствах.
Используйте правильный формат файла
Сегодня favicon.ico по-прежнему широко поддерживается во многих браузерах. Однако более современные веб-сайты, как правило, используют favicon.png. Имейте в виду, что Internet Explorer поддерживает только .ico, а формат .png не будет отображаться. Вы можете обойти эту проблему, сохранив версию значка .