Готовые фавиконы для сайта: Иконки Favicon — скачивайте бесплатно в PNG и SVG

Что такое favicon для сайта, как сделать фавикон и зачем нужна иконка сайта?

Инструментов, чтобы выделить свой сайт среди миллионов других в поисковой выдаче, не так-то много. Favicon ― это один из таких инструментов. 

Favicon сайта ― что это

Что такое favicon? Favicon (favorites icon ― иконка для избранного) ― это иконка сайта, которая отображается:

• на вкладках перед названием сайта
  

• в закладках пользователя
  

• слева от названия сайта в поисковой выдаче:
  

Первоначально фавикон был создан только для визуального выделения сайтов в закладках. Однако этот инструмент для идентификации веб-ресурса стал использоваться и в других частях браузера.

Изображение может быть любое. Это может быть просто картинка, которая будет отражать тему сайта, или логотип компании. 

Яндекс уже около 10 лет отображает фавиконы в поисковой выдаче. А вот Google долгое время не торопился внедрять эту фичу в свой поисковик, поэтому пользователям пришлось ждать аж до 2019 года. Пока Google экспериментирует с фавиконами в поисковой выдаче: ищет им подходящее место, проверяет их нужность. Последний крупный эксперимент в отношении фавиконов был в январе 2020 года. О технических работах разработчики писали

в официальном Twitter компании.

Если у вашего сайта иконка не установлена, на вкладках и в поисковой выдаче будет отображаться стандартная иконка. У каждого браузера она своя, например, в Google Chrome отображается чёрно-белая планета:

Для чего нужен favicon

Как использовать favicon? На что он может повлиять?

1. Облегчает поиск сайта в поисковой выдаче. Благодаря узнаваемой картинке, постоянному посетителю вашего сайта будет легче найти веб-ресурс в списке. Это может сильно повлиять на количество переходов из поисковых систем.

2. Повышение узнаваемости. При разработке бренда очень важно, чтобы логотип компании примелькался аудитории. Если вы публикуете много контента на сайте, пользователь будет часто встречать ваш лого в ПС.

   Это будет способствовать запоминанию бренда. 

3. Удобный поиск сайта в закладках. Как мы говорили ранее, изначально фавикон создавался именно для того, чтобы нужный сайт было легче найти в избранном. До сих пор эта функция осталась, и иконки значительно облегчают поиск ресурсов. То же самое работает и с иконками во вкладках. Современные ПК очень производительные, поэтому они могут постоянно держать открытыми несколько десятков вкладок. В таких случаях иконка для сайта ― единственный способ найти то, что нужно.

4. ​​Заставить пользователей больше доверять вам. Многие сайты уже давно пользуются иконками. Если вы не создадите себе отличительный знак, вы можете выделяться среди остальных ресурсов с плохой точки зрения. Пользователи могут задуматься о вашей профессиональности, а может даже принять за мошенников. Особенно это может сказаться на интернет-магазинах, так как люди будут бояться оплачивать товары через такой сайт.

   Всё это может значительно усложнить продвижение бренда.

Технические требования к изображению

Раньше для favicon использовали формат ICO. Сейчас браузеры поддерживают такие форматы, как SVG (чаще всего рекомендуют именно его), ICO, GIF, JPEG, PNG, BMP. 

Рекомендованный размер картинки в каждой поисковой системе разный. Яндекс говорит, что фавикон должен быть 120 × 120, 32 × 32 и 16 x 16 пикселей. В официальном справочном материале Яндекс рекомендует использовать изображения размером 120 × 120 пикселей (для растровых форматов) или изображение в формате SVG. Именно эти параметры позволят отобразить логотип сайта чётко и заметно на сервисах Яндекса.

В Google рекомендуемый размер значка должен быть кратным 48 пикселям, например, 48 x 48, 96 x 96, 144 x 144. Специалисты Google просят не использовать иконки 16 x 16, так как они слишком маленькие.

Как создать favicon

В целом favicon можно сделать в любом графическом редакторе, в котором вы привыкли работать. Для этой задачи подойдёт даже Paint. Важно только соблюсти необходимые размеры и конвертировать в один из форматов, о которых мы говорили ранее.

Такие профессиональные редакторы, как Adobe Photoshop, Adobe Illustrator или Figma, за счёт большей функциональности позволят создать уникальную иконку. Если вы не работаете с профессиональными редакторами или просто не гонитесь за уникальностью изображения, можете воспользоваться одним из способов, которые мы перечислим.

Как сделать favicon для сайта:

1. Конвертировать уже готовое изображение

   . Если у вас уже есть готовая иконка или картинка, можно просто конвертировать её в нужный формат. Для этого подойдёт сервис pr-cy.ru, be1.ru.

2. Нарисовать иконку самостоятельно. Есть сервисы, у которых очень ограниченный функционал, но с их помощью можно сделать простое начертание. Такие возможности дают сайты katvin.com, favicon.by, favicon.cc, xiconeditor. com. 
   Для примера сделаем иконку в виде радостного смайлика в сервисе favicon.by.
    

3. Использовать готовые иконки. Необязательно рисовать иконку с нуля. Можно взять уже готовые иконки, которые выложены в библиотеки сайтов в свободном доступе. Взять готовые фавиконы можно на faviconka.ru и findicons.com.

Советы по созданию favicon

1. Простота ― залог успеха

   . Иконка очень маленькая. Пользователь просто не сможет рассмотреть сложный рисунок. Для фавиконок лучше использовать простые символы, силуэты, которые будут узнаваемы в любом размере. 

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

3. Фавикон должен выделяться среди остальных. Перед тем как сделать иконку, проанализируйте, какие изображения у конкурентов, которые выпадают в поисковой выдаче вместе с вашим сайтом. Представим, ваш сайт посвящён ландшафтному дизайну. Все похожие сайты выбирают зелёный цвет для своих иконок, значит, чтобы выделиться нужно использовать другой цвет, например голубой. Если среди ваших конкурентов замечается буйство красок, можно выбрать чёрно-белый формат.

Favicon: как добавить на сайт

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

Самый универсальный способ ― добавить значок сайта через код. С него и начнём.

Как добавить favicon на сайт через код

1. Загрузите файл с иконкой в корневой каталог сайта.

2. Добавьте в HTML-код главной страницы сайта в элемент head ссылку на размещённый файл.

<head>
     <link rel="icon" href="https://example.com/favicon.ico" type="image/x-icon">
     <link rel="shortcut icon" href="https://example.com/favicon.ico" type="image/x-icon">
</head>

Атрибуты:

rel: 

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.

Совет. Если сайт должен быть доступен по нескольким доменам, лучше указывать в коде не полный путь, а относительный. Например, не https://example.com/favicon.ico, а просто /favicon.ico.

Обратите внимание! Если у вас кириллический домен в атрибуте href используйте Punycode. Например, для адреса https://новыйсайт.рф/favicon.ico нужно указать https://xn--80advbqgxk0f.xn--p1ai/favicon.ico или просто использовать относительный путь /favicon.ico.

Как добавить favicon на сайт в WordPress

В WordPress есть больше вариантов добавить иконку на сайт. Можно использовать плагин или просто воспользоваться встроенными настройками WordPress. 

Чтобы добавить иконку можно, например, использовать плагин RealFaviconGenerator.  

1. Перейдите в админку WordPress.

2. Перейдите в Плагин ― Добавить новый.

3. Найдите в поиске плагин RealFaviconGenerator установите и активируйте его.

4. Перейдите во Внешний вид ― Фавикон

5. Загрузите иконку. Нажмите Генерировать favicon. Плагин перенесёт вас на сайт RealFaviconGenerator.

6. На веб-сайте найдите и нажмите кнопку Создайте свои значки Favicons и HTML-код.

7. Плагин вернёт вас на ваш сайт. Вы получите уведомление о том, что ваш favicon настроен.

Не сложнее добавить favicon и через обычные настройки WordPress.

1. В админке WordPress перейдите во Внешний вид ― Настроить.

2. Выберите Общие настройки ― Свойства сайта.

3. В разделе Иконка сайта нажмите Выберите иконку сайта

    

4. Загрузите фавикон.

5. Чтобы сохранить изменения, нажмите кнопку Опубликовать:
   

Для проверки иконок вашего сайта воспользуйтесь сервисом RealFaviconGenerator. Просто введите доменное имя сайта и вы увидите, как отображаются ваши иконки на разных платформах. Сайт также подскажет, где и какие могут быть проблемы.

В лучшем случае, поисковые системы начинают индексировать фавиконку через 1-2 недели после её настройки. А может и через несколько месяцев. К сожалению, здесь все зависит от решения системы. 

как его сделать и установить

Главная » Реалити: по заработку в интернете » Создание блога на wordpress » Техническая часть

Всем привет! Сегодня расскажу, что такое фавикон для сайта, каких форматов и размеров он бывает. Какой размер иконки лучше выбрать и почему. Научу создавать фавиконы с помощью онлайн сервисов. Покажу где можно бесплатно скачать уже готовые фавиконки различных размеров и форматов. И конечно разберем варианты установки фавикона на сайт. А в конце вы узнаете, как проверить правильно ли установлен favicon на сайте.

Для начала я перечислю несколько веских причин почему следует обязательно установить эту иконку на ваш сайт:

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

Сайт начинает вызывать доверие не только среди пользователей, но и среди поисковых роботов.

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

Возможная проблема в Яндекс.Вебмастере при отсутствии фавикона

Поэтому я считаю, что и речи быть не может о том, чтобы не устанавливать фавикон на сайт.

И думаю вы со мной согласитесь, прочитав эту статью до конца.

Содержание

1. Что такое фавикон для сайта
2. Как сделать фавикон
3. Создание фавикона онлайн
4. Где скачать фавикон для сайта бесплатно
5. Как установить фавикон на сайт
6. Загрузка в корневой каталог сайта
7. Как вставить через настройки темы WordPress
8. Как проверить фавикон сайта
9. Визуальная проверка
10. По прямой ссылке
11. В базах Яндекса и Google
12. В Яндекс. Вебмастере
13. Заключение

Что такое фавикон для сайта

Каждый вебмастер, создавая свой сайт хочет, чтобы он выделялся среди миллионов других сайтов, находящихся в поисковые выдачи.

И помочь в этом в этом сможет небольшая иконка, которая среди вебмастеров, называется favicon.

Favicon (фавикон) – это картинка размер которой начинается от 16×16 пикселей, и которая в большинстве случаев создается в формате «ico.» и отображается в выдаче поисковых систем в снипете и на вкладке браузеров.

Фавиконы в поисковой выдачи Яндекса
Favikon на вкладке браузера

Но с развитием интернет-технологий стало возможным использование других форматов этих иконок:

• PNG
• GIF
• Анимированный GIF
• JPEG
• APNG
• SVG

Но эти форматы пока поддерживают не все браузеры поэтому я рекомендую именно формат «ico» и размер фавиконки не менее 48×48 пикселей.

Почему именно такой размер? Все очень просто.

В рекомендациях гугла указан минимальный размер именно 48×48 пикселей и не рекомендовано устанавливать на сайт иконки меньших размеров так как они не будут показываться в мобильной версии поисковой выдачи.

Требования Google

А в рекомендациях Яндекса указано что иконка может иметь размер от 16×16 пикселей до 120 х120.

Требования Яндекса

Поэтому вариант фавиконки от 48×48 пикселей устроит обе поисковые системы.

Как сделать фавикон

Для начала подберем квадратную тематическую картинку желательно без мелких деталей. Формат этой картинки может быть любого из следующих форматов jpg, jpeg, png.

Картинку вы можете найти в интернете или заказать на бирже фриланса чтобы ее нарисовали.

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

Фавикон и логотип на сайте webnub.ru

А для сайта, на котором я все показываю я подобрал вот такую тематическую картинку размером 512×512 пикселей в формате png.

Картинка с изображением мозга

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

А дальше с помощью сервиса онлайн-генератора фавиконов такие сервисы еще называют – favicon generator, преобразуем картинку в нужный формат и размер.

Создание фавикона онлайн

Переходим на сервис PR-CY по ссылке https://pr-cy.ru/favicon/ и нажимаем «Выбрать»

Генератор favicon на сервисе PR-CY

Находим на компьютере нашу картинку выбираем ее и нажимаем «Открыть»

Процесс загрузки картинки в сервис генератор favicon

После загрузки картинки жмем «Создать favicon»

Процесс создания фавиконки онлайн

Далее сервис покажет, как будет выглядеть наша иконка в браузере, и мы можем скачать архив с готовым фавиконом.

Распаковываем архив и видим, что в папке у нас две картинки. Нам нужна будет размером 48×48 в формате «ico»

Готовый фавикон в формате ico

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

Там все просто загружаете картинку на сервер выбираете нужный для вас формат и жмете «Конвертировать». После конвертирования картинки она автоматически загрузится на ваш компьютер.

Вот ссылки на пару таких сервисов:

1. Бесплатный онлайн-конвертер
2. Online-convert

Где скачать фавикон для сайта бесплатно

Для тех, кто хочет получить уже готовую фавиконку есть сервисы в которых собираются целые бесплатные библиотеки этих иконок. Доступны они в различных форматах. Заходи выбирай и скачивай.

Вот один такой сервис icon-icons.com у него есть такая библиотека.

Переходим на главную страницу по ссылке https://icon-icons.com/ru/ и в поле поиска вводим слово, ассоциирующее с нужным для вас изображением.

Я для примера введу слово «мозг» и нажимаю «поиск».

Форма поиска картинок в сервисе icon-icons.com

Откроется страница с множеством готовых фавиконов. Остается только выбрать подходящую и нажать на нее.

Результаты поиска картинок в сервисе icon-icons.com

На следующей странице выбираем подходящий размер и нажав на нужный формат иконки она загрузиться на компьютер.

Выбор параметров фавиконки

Дальше пора приступать к установке ее на сайт.

Как установить фавикон на сайт

После того как картинка готова ее нужно установить на сайт. Сделать это можно несколькими способами:

1. Непосредственно в корневой каталог сайта загрузив иконку через файл менеджер хостинга. Действия буду показывать на примере хостинга Макхост. (Этот способ подойдет для любого сайта.)
2. Через настройки темы WordPress в панели управления сайтом.

Загрузка в корневой каталог сайта

Переходим на хостинге Mchost в раздел сайты и открываем «Файл менеджер»

Файл менеджер в панели управления сайтами на Mchost

Нам откроется корневая директория нашего сайта. Внизу находим кнопку «закачать файл» и нажимаем на нее.

Корневая директория сайта

Нам откроется функционал загрузки файлов. Выбираем загрузка с компьютера и жмем «Выберите файл». Откроется проводник Windows, в котором переходим в компьютерную папку куда вы сохраняли готовую фавиконку. Выделяем картинку и жмем открыть.

Процесс агрузки файла в корневую директорию сайта

И после этого жмем закачать.

Поледний этап закачки файла

Проверяем директорию видим, что файл закачен.

Фавикон в корневом каталоге сайта

Открываем сайт в браузере и проверяем. Не забываем почистить кэш в браузере. Как видим иконка у меня там, где и должна быть.

Фавикон сайта igrymozga.ru

Если вдруг фавиконка не отображается. Это бывает в очень редких случаях:

1. У вас старая версия браузера
2. Дело в самой теме вордпресс

Для решения этой проблемы нужно, в файл header.php нашей темы добавить перед закрывающимся тэгомспециальный код:

<link rel=»shortcut icon» href=»/favicon.ico» type=»image/x-icon»>

<link rel=»icon» href=»/favicon.ico» type=»image/x-icon»>

В ВордПресс переходим в административную панель управления в раздел «Внешний вид» «Редактор тем»

Переход в редактор тем в WordPress

Здесь с левой стороны ищем наш файл и нажимаем на него. Нам откроется код где находим конструкцию, заключенную в тег, вставить в нее наш код и нажать «Обновить файл»

Редактирование файла header

Нужно запомнить. Если у вас установлена тема ВордПресс для которой выходят обновления, этот код придется вставлять каждый раз, когда обновляется ваша тема так как обновление происходит путем замены файлов.

Если у вас сайт не на CMS, то у вас скорей всего не будет файла header.php тогда ищем файл index.html и в нем уже находим теги <head> <head/>. Редактировать тогда придется с помощью функций хостинга.

Корневой каталог простого сайта
Вставка кода для в файл index.html

Или через один из файловых менеджеров, например, FileZilla соединившись с хостингом использовав протокол FTP.

Как вставить через настройки темы WordPress

Есть еще один способ установки фавикона. Для этого нам понадобится квадратная картинка размером не менее 512×512 пикселей.

Поэтому я изначально подбирал картинку именно такого размера.

Для установки переходим в консоль управления и открываем настройки темы. Находятся они «Внешний вид» «Настроить»

Переход в настройки внешнего вида темы WordPress

Далее в меню с лева открываем «Свойства сайта»

Свойства сайта в меню настроек темы root

Здесь нажимаем «Выберите иконку сайта»

Свойства сайта

Нам откроется библиотека файлов где нужно перейти в раздел «Загрузить файлы» и нажать «Выберите файлы»

Загрузчик файлов в WordPress

Откроется процесс загрузки картинок с компьютера. Выбираем нужную картинку и жмем «Открыть»

Процесс загрузки файлов с компьютера

И далее в библтотеке файлов жмем «Выбрать»

Выбор картинки в билиотеке файлов

Затем сохраняем изменения нажав «Опубликовать»

Сохранение изменений в настройках сайта

А теперь давайте я покажу как проверять правильность установки фавиконки.

Как проверить фавикон сайта

Прежде чем проверять нужно знать несколько вещей:

1. Гугл на данный момент не показывает фавиконы в результатах десктопной поисковой выдачи. Почему так происходит я не знаю, ответа на этот вопрос я не нашёл. Если кто нибудь из вас дорогие читатели знает ответ прошу сообщить в комментариях к этой статье или в личном сообщении. Буду за это очень признателен.
2. Для отображения иконок в результатах поиска Яндекса должно пройти пару недель после установки иконки и посещения поисковым роботом вашего сайта.

Результататы десктопной поисковой выдачи Google

И так это запомнили теперь давайте приступим непосредственно к проверкам.

Я выделяю среди них четыре основных:

1. Визуальная – непосредственно в браузере
2. По прямой ссылке
3. Проверка в базах Яндекса и Google
4. В Яндекс.Вебмастере

Визуальная проверка

Открываем сайт в различных браузерах и смотрим отображается ли иконка в верхней части браузера.

Отображение фавикона в Яндекс.Браузере
Отображение фавикона в Google Chrome

По прямой ссылке

Для этого нужно в браузере перейти по ссылки ведущею непосредственно на загруженную нами картинку.

У меня ссылка будет такая https://igrymozga.ru/favicon.ico. Если вы делали все по моей инструкции, то замените домен на свой.

Отображение иконки сайта при переходе по прямой ссылке

В базах Яндекса и Google

Этот способ подходит для проверки добавлен ли ваш фавикон поисковыми роботами в базу или нет.

Для Яндекса это будет вот такая ссылка:

http://favicon.yandex.net/favicon/ваш_домен

Для Google будет такая:

http://www. google.com/s2/favicons?domain=ваш_домен

Незабываем в ссылки вставлять ваш домен.

Если после перехода по ссылке отображается ваш фавикон то значит специальный робот поисковиков нашел его и добавил в свою базу.

В Яндекс.Вебмастере

Как я уже писал в начале статьи яндекс считает ошибкой отсутствие фавикона. Посмотреть есть ли эта ошибка для вашего сайта можно после того как вы добавите его в Яндекс.Вебмастер перейдя в раздел «Диагностика сайта».

Яндекс.Вебмастер раздел диагностика сайта

Заключение

Воспользовавшись одним из способов установки фавиконки, вы сделаете ваш сайт еще более узнаваемым в интернете.

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

Google конечно не информирует о том, что не установлена иконка, но все-таки рекомендует их устанавливать. А это значит, что отсутствие этой небольшой картинки тоже может повлечь со стороны этой поисковой системы определенные действия, о которых вы даже не узнаете.

Поэтому установив фавикон, вы дадите понять поисковым системам что придерживаетесь их рекомендациям тем самым повысив их доверие к вашему ресурсу.

А пользователи, которые хоть раз посетили ваш сайт зайдут на него обязательно еще раз встретив знакомую иконку в поиске.

На этом сегодня все. Делитесь статьей в социальных сетях. Задавайте вопросы в комментариях. Подписывайтесь на обновления блога. Всем пока.

HTML Favicon

❮ Назад Далее ❯

---

Фавикон — это небольшое изображение, отображаемое рядом с заголовком страницы на вкладке браузера.

---

Как добавить фавиконку в HTML

Вы можете использовать любое понравившееся вам изображение в качестве фавиконки. Вы также можете создать свой собственный favicon на таких сайтах, как https://www.favicon.cc.

Совет: Фавикон — это маленькое изображение, поэтому оно должно быть простым и контрастным.

Изображение фавикона отображается слева от заголовка страницы на вкладке браузера, например:

Чтобы добавить фавиконку на свой сайт, либо сохраните изображение фавиконки в корень каталог вашего веб-сервера или создайте папку в корневом каталоге под названием images, и сохраните изображение фавиконки в этой папке. Распространенное название изображения фавикона — «favicon.ico».

Затем добавьте элемент в файл index.html, после элемента
 


Это Заголовок

Это абзац.

Теперь сохраните файл index.html и перезагрузите его в браузере. Теперь вкладка вашего браузера должна отображать изображение фавикона слева от заголовка страницы.

---

---

Поддержка формата файла Favicon

В следующей таблице показаны поддерживаемые форматы файлов для изображения favicon:

Браузер	ИКО	PNG	GIF	JPEG	СВГ
Край	Да	Да	Да	Да	Да
Хром	Да	Да	Да	Да	Да
Firefox	Да	Да	Да	Да	Да
Опера	Да	Да	Да	Да	Да
Сафари	Да	Да	Да	Да	Да

---

Резюме главы

• Используйте элемент HTML для вставить фавикон

---

Тег ссылки HTML

Тег	Описание
<ссылка>	Определяет связь между документом и внешним ресурсом

Полный список всех доступных тегов HTML см. в нашем справочнике по тегам HTML.

❮ Предыдущий Следующий ❯

ВЫБОР ЦВЕТА

---

---

---

Лучшие учебники

Учебное пособие по HTML
Учебное пособие по CSS
Учебное пособие по JavaScript
Учебное пособие
Учебник по SQL
Учебник по Python
Учебник по W3.CSS
Учебник по Bootstrap
Учебник по PHP
Учебник по Java
Учебник по C++
Учебник по jQuery

Лучшие ссылки

Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery

Лучшие примеры

0168 Примеры HTML

Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery2

---

| О

W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания. Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности.

Copyright 1999-2022 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.

Руководство 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	Плитка IE10 Metro для закрепленного сайта*
152×1524	favicon-152.png	Значок сенсорного экрана iPad (изменение для iOS 7: увеличено с 144×144)<
167×1674	favicon-167.png	Значок iPad Retina touch (изменение для 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)

1. Откройте IconSlate и создайте новый проект. Выберите только формат .ico, щелкните стрелку рядом с ico и установите только флажки 32 и 16.
2. Назовите свою иконку «favicon» (без кавычек)
3. Выделите квадрат 32 и вставьте значок размером 32 x 32 пикселя
4. Выделите квадрат 16 и вставьте свой значок 32 x 32 пикселей или, если у вас есть собственный значок 16 x 16 пикселей, вставьте в него этот файл.
5. Нажмите значок «Сборка» (если по какой-то причине значок «Сборка» неактивен, перейдите в «Файл» -> «Сборка»
).

Онлайн-генератор HTML + XML

Ниже приведен быстрый онлайн-генератор кода, который я написал. Он сгенерирует необходимые HTML и XML для использования ваших значков.

1. Введите путь к вашим любимым значкам. (если вы решили создать favicon.ico, поместите его в корень вашего домена независимо от других ваших значков).
2. Выберите цвет фона для значка плитки Windows.
3. Прокрутите вниз до кода и скопируйте и вставьте его или загрузите файлы.
4. Поместите файл XML в тот же каталог, что и ваши любимые значки.

См. Генератор XML Pen Favicon HTML/Browser XML от Грега Ганта (@fuzzywalrus) на CodePen.

Манифест веб-приложения

Манифест веб-приложения — это простой файл JSON, в котором подробно описывается, как веб-приложение должно работать, когда веб-приложение «установлено» (связано с панелью приложений Chrome).