Иконка браузера яндекс ico: Иконка Яндекс браузер в стиле Cute Color — Независимое театральное объединение "Зрительские симпатии"

Содержание

Как создавать иконки сайтов в 2023 году — всё о favicon — Михаил Гок на vc.ru

Эта статья перевод англоязычной статьи Андрея Ситника из блога Злых марсиан.

306 просмотров

Пришло время переосмыслить то, как мы создаем набор иконок для современных браузеров, и остановить безумные генераторы. Фронтенд-разработчики сейчас вынуждены создавать более 20 PNG-файлов, чтобы отобразить крошечный логотип веб-сайта на вкладке браузера или сенсорном экране. Статья расскажет, как использовать более разумный подход и создать минимальный набор иконок, соответствующий большинству современных потребностей.

Статья глубоко погружается в тему, поэтому в начале я даю два фрагмента кода для тех, кто уже достаточно настрадался и понимает, что делать. Тем не менее, я всем рекомендую читать статью целиком!

Экстремально короткая версия

Вместо того, чтобы создавать десятки иконок, обойдемся созданием пяти иконок и одного файла JSON.

HTML:

apple touch icon лучше ставить в начало — так старые версии сафари используют иконку лучше, а другим браузерам это не мешает
замечание от переводчика

И файл веб-манифеста:

// manifest.webmanifest { «icons»: [ { «src»: «/icon-192.png», «type»: «image/png», «sizes»: «192×192» }, { «src»: «/icon-512.png», «type»: «image/png», «sizes»: «512×512» } ] }

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

Воспользуйтесь генератором иконок, созданным по этой статье

Длинная версия, со всеми объяснениями

Концепция favicon (является сокращением от favorite icon, «любимая иконка»), существует с начала 2000-х годов. Мы каждый день видим эти милые маленькие изображения на панели вкладок браузера, они помогают нам различать открытые веб-сайты. Пользователи ожидают, что на вашем сайте будет favicon. Это одна из тех мелочей, которые заставляют людей относиться к вам серьезно.

Даже Apple, у которой всегда была какая-то эстетическая война с иконками (их не принимали в Купертино, скрывая favicon в Safari в течение многих лет) наконец-то сдалась и теперь правильно отображает их на всех своих устройствах.

Если у вас есть общедоступный веб-сайт, у него должен быть favicon. Многие люди думают, что одной иконки хватит для всех устройств, но, к сожалению, это не так.

Как правило, изнурительную задачу создания всех необходимых файлов для постоянно растущего списка экранов и устройств перекладывают на инструменты генератора favicon. Никто в здравом уме никогда не захочет тратить часы на создание их вручную. В конце концов, мы здесь для того, чтобы создавать веб-сайты, а не для того, чтобы удовлетворять прихоти различных браузеров.

Набор favicon, генерируемых популярным онлайн-генератором

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

Таким образом, я поставил перед собой цель создать минимальный список favicon, которые будут работать во всех случаях и во всех браузерах, за исключением некоторых редких случаев, но даже там всё будет работать, просто не на 100% идеально.

Идеальный набор Favicon

Вместо того, чтобы создавать много изображений разных размеров, я решил полагаться на SVG и масштабирование браузера. Не волнуйтесь по поводу производительности:

Браузеры загружают favicon в фоновом режиме, поэтому большой размер favicon-файла не влияет на производительность веб-сайта.
SVG — отличный способ уменьшить размер иконки для изображений, которые не должны быть растровыми; для многих логотипов результирующий файл будет намного меньше, чем PNG.
Имея всего 3 PNG-файла, можно позволить себе оптимизировать их сильнее, хитро подбирая параметры в сложных инструментах. Это решит проблему тех пользователей, которые платят за каждый МБ на своём интернет-тарифе.

Теперь перейдём к тому минимальному набору, который я вывел из своих исследований и экспериментов. Этот список должен работать со всеми популярными браузерами и устройствами, как старыми, так и новыми.

favicon. ico для устаревших браузеров
Файлы ICO могут содержать внутри несколько версий изображения под разный размер. Я рекомендую придерживаться одного изображения размера 32 × 32. Версию 16×16 стоит создавать только если логотип не становится слишком размытым или ваш дизайнер вручную может перерисовать его под этот размер. Именно этот файл лучше держать по точному адресу: https://example.com без кеш-бастеров и хитрых путей. Значок должен быть на https://example.com/favicon.ico. Некоторые инструменты, такие как RSS-ридеры, просто запрашивают /favicon. ico с сервера и не утруждают себя поиском в другом месте. Нам нужны sizes=«any» для на файл. ico, чтобы исправить ошибку Chrome, из-за которой он выбирает файл ICO вместо SVG.
Один значок SVG со светлой/темной версией для современных браузеров SVG — это векторный формат, который описывает кривые вместо пикселей. При больших размерах это более эффективно, чем растровые изображения. На момент написания этой статьи 72% всех браузеров поддерживают SVG-иконки. Ваша HTML-страница должна иметь тег в с rel=«icon», type=»image/svg+xml» и с href, содержащим ссылку на SVG-файл с атрибутами.
SVG — это формат XML, он может содержать тег системными темами.
Изображение PNG 180×180 для устройств Apple Значок Apple touch — это изображение для рабочего стола iPhone или iPad. На вашей HTML-странице должен быть тег внутри. Начиная с iOS 8+, для iPad требуется изображение с разрешением 180 × 180. Более старые устройства уменьшат его масштаб. Вопрос производительности пояснён выше.Небольшое примечание: значок Apple touch будет выглядеть лучше, если сделать ему отступ размером 20 пикселей и добавить цвет фона. Для этого вы можете использовать любой графический редактор.
Манифест веб-приложения с иконками PNG 192×192 и 512×512 для устройств Android

— Манифест веб-приложения — это файл JSON, содержащий все сведения, необходимые браузеру для установки вашего веб-сайта в качестве системного приложения. Этот формат появился у Google в рамках инициативы PWA. — Ваша HTML-страница должна содержать тег со ссылкой на файл манифеста. — В манифесте должно быть поле icon, которое ссылается на два значка: 192 × 192 для отображения на главном экране и 512 × 512, которые будут использоваться в качестве заставки при загрузке PWA.

{ «icons»: [ { «src»: «/icon-192.png», «type»: «image/png», «sizes»: «192×192» }, { «src»: «/icon-512.png», «type»: «image/png», «sizes»: «512×512» } ] }

Мы кого-то забыли?

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

Значок плитки Windows

Microsoft Edge раньше поддерживал специальный формат значков для прикрепления веб-сайтов к меню «Пуск». Для последних версий Windows это больше не требуется.

Закрепленный значок Safari

Ранее в Safari требовался монохромный значок SVG для закрепленных вкладок. Однако, начиная с Safari 12, мы можем использовать обычный значок для закрепленных вкладок. Дажеapple. com больше не использует mask-icon.

rel=”shortcut”

Многие (ныне устаревшие) руководства будут включать значок favicon. ico в HTML, как тут:

Имейте в виду, что shortcut не является и никогда не был допустим в отношении ссылки. Прочтите эту удивительную статью Матиаса Байненса десятилетней давности, в которой объясняется, почему нужно писать просто icon, а не shortcut icon.

Yandex Tableau

Яндекс Браузер — это браузер на базе Chromium от крупнейшей российской поисковой системы.

В России его доля на рынке составляет 20%. У него есть приятная функция, которая позволяет веб-сайту отображать текущие данные в виджетах на главном экране с помощью специального JSON-манифеста, предоставляемого ссылкой yandex-tableau-widget. Однако эта функция оказалась не очень популярной, и теперь Яндекс удалил соответствующую техническую документацию со своего сайта. Обычные манифесты значков будут работать также хорошо.

Opera Coast

В прошлом, Opera Coast — экспериментальный браузер для iOS, требовал специального значка размером 228×228. Этот браузер покинул App Store в 2017 году, и я сомневаюсь, что с тех пор он пережил многочисленные обновления iOS.

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

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

Пропустить эти шаги можно просто воспользовавшись генератором иконок, созданным на основе этой статьи

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

Шаг 1: Подготовка SVG

Убедитесь, что изображение в формате SVG имеет квадратную форму. Откройте исходный файл в вашем системном средстве просмотра и проверьте ширину и высоту изображения. Размер SVG легко настроить с помощью любого редактора SVG. В Inkscape вы можете изменить размер документа, выбрав File → Document Properties, а затем отцентровать логотип с помощью Object → Align и Distribute.

Сохраните ваш файл в формате icon. svg. Теперь давайте поработаем с SVG и сделаем так, чтобы он хорошо сочетался с современными системными темами. Спросите своего дизайнера, как следует инвертировать цвета для темной темы (в черно-белых логотипах вы просто меняете черный на белый).

Теперь откройте свой SVG-файл в текстовом редакторе. Найдите с темной или отсутствующей заливкой. Добавьте медиа-выражение CSS, которое будет запускаться при изменении темы, и измените заливку на нужные вам цвета:

Вы также можете использовать этот метод с медиа-выражением в SVG, чтобы добавить цвета P3 с широкой гаммой к вашим значкам.

Шаг 2: Создание ico файла

Откройте свой файл icon. svg в редакторе растровой графики. Я рекомендую GIMP; он бесплатный и мультиплатформенный.

Согласитесь на конвертацию SVG в растр. Установите ширину и высоту равными 32 пикселям. Экспортируйте файл в favicon. ico с использованием настроек: 32 бит/с, 8-битный альфа-код, без настроек палитры (32 bpp, 8-bit alpha, no palette).

Если у вас нет GIMP, вы можете установить Inkscape и ImageMagick и преобразовать SVG в ICO в терминале:

inkscape ./icon.svg —export-width=32 —export-filename=»./tmp.png» # In Windows call `magick convert . /tmp.png ./favicon.ico` convert ./tmp.png ./favicon.ico rm ./tmp.png

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

Чтобы включить отдельную версию значка размером 16×16:

Откройте значок favicon. ico со значком 32×32.
Создайте новый слой размером 16×16.
Поместите в этот слой версию значка размером 16×16.
Экспортируйте файл. GIMP сохранит каждый макет как отдельную версию значка.

Или вы можете сделать то же самое в ImageMagick с помощью:

convert ./icon-32.png ./icon-16.png ./favicon.ico

Шаг 3: Создание png изображений

Снова откройте исходный SVG-файл в редакторе растровой графики и создайте изображение размером 512×512. Экспортируйте его в видеicon-512.png.

Масштабируйте изображение до 192×192 и экспортируйте его в icon-192. png. Теперь масштабируйте само изображение до 140×140 и установите размер холста 180 ×180, а затем экспортируйте его в формате apple-touch-icon. png.

Или вы можете сделать то же самое в Inkscape:

inkscape ./icon.svg —export-width=512 —export-filename=»./icon-512.png» inkscape ./icon.svg —export-width=192 —export-filename=»./icon-192.png»

Шаг 4: Оптимизация SVG и PNG файлов

Лучшее средство для оптимизации svg — это SVGO. Чтобы использовать его, запустите:

npx svgo —multipass icon.svg

Squoosh — отличное веб-приложение для оптимизации растровых изображений:

Откройте icon-512.png в Squoosh.
Измените настройку сжатия на OxiPNG.
Включите уменьшение палитры: “Reduce palette”.
Установите 64 цвета.
Сравните «до« и »после», перемещая ползунок. Если вы видите разницу, увеличьте количество цветов.
Сохраните файл. Повторите эти действия для icon-192.png и apple-touch-icon. png.

Шаг 5: Добавление иконок в HTML

Вам нужно добавить ссылки в favicon.ico и в apple-touch-icon.png в ваш HTML.

Для статического HTML:

<title>My website</title> + <link rel=»icon» href=»/favicon.ico»> + <link rel=»icon» href=»/icon.svg» type=»image/svg+xml»> + <link rel=»apple-touch-icon» href=»/apple-touch-icon.png»>

Шаг 6: Создание web app manifest

Для статического HTML создайте JSON-файл с именем: manifest. webmanifest:

{ «name»: «My website», «icons»: [ { «src»: «/icon-192.png», «type»: «image/png», «sizes»: «192×192» }, { «src»: «/icon-512.png», «type»: «image/png», «sizes»: «512×512» } ] }

И добавьте в свой html-файл:

<title>My website</title> + <link rel=»manifest» href=»/manifest.webmanifest»> <link rel=»icon» href=»/favicon.ico»> <link rel=»icon» href=»/icon. svg» type=»image/svg+xml»> <link rel=»apple-touch-icon» href=»/apple-touch-icon.png»>

При работе с Webpack вы можете использовать плагин webpack-pwa-manifest:

plugins: [ …, new WebpackPwaManifest({ name: ‘My website’, icons: [ { src: resolve(‘./icon-192.png’), sizes: ‘192×192’ }, { src: resolve(‘./icon-512.png’), sizes: ‘512×512 } ] }) ]

Спасибо вам за чтение! С современными веб-стандартами легко создать свой набор значков даже руками. Но это не значит, что мы против автоматизации. Если у вас есть, что добавить к набору иконок — пишите мне в Твиттер.

Автор: Андрей Ситник

Сайт, twitter

Перевод: Михаил Гок

Генератор иконок по заветам этой статьи.

зачем нужен и как сделать

Что это такое? Фавикон – это небольшая пиктограмма, которая находится в верхнем углу вкладки и отображает логотип сайта. Эта иконка показывается в выдаче поисковой системы напротив названия ресурса. На первый взгляд может показаться, что такой маленький значок неважен и служит только для красоты.

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

В статье рассказывается:

Понятие и задачи фавикона
Требования к фавикону у «Яндекса» и Google
Выбор картинки для фавикона
Размер и формат фавикона
Добавление фавикона на сайт
Добавление фавикона для мобильных устройств
Проверка фавикон на ошибки
Сервисы для создания фавикона
3 примера необычных фавиконов
Пройди тест и узнай, какая сфера тебе подходит:
айти, дизайн или маркетинг.
Бесплатно от Geekbrains

Понятие и задачи фавикона

Термин «фавикон» (англ. favicon) был образован путем сложения двух слов: favorite (избранный) и icon (значок). Фавикон для сайта должен четко обозначать конкретный ресурс.

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

Улучшение позиции сайта в результатах поиска. Фавикон позволяет привлекать больше внимания к описанию сайта, соответственно, пользователи начинают чаще проходить по ссылкам. Использование фавикона способно дать владельцу сайта значительные преимущества. Так, можно подобрать изображение, побуждающее пользователя к совершению определенных действий, например, телефонного звонка.
Повышение узнаваемости. Для современного человека весьма характерно запоминать изображения, тогда как текстовая информация сохраняется в памяти намного хуже. Популярность торгового знака во многом зависит от наличия фавикона. Когда пользователь ищет информацию, он зачастую жмет на ссылку с пиктограммой, даже если она находится внизу поисковой выдачи. Эффективным способом продвижения товара является использование логотипа компании в качестве фавикона. Таким образом, интерес к бренду растет одновременно как на офлайн-рынке, так и в Сети.
Обеспечение правильной навигации в браузере. Если пользователю требуется открыть определенный сайт через закладки, он обращает внимание в первую очередь на фавикон. Когда в закладках содержится много сайтов, при отсутствии пиктограмм становится труднее ориентироваться.

Понятие и задачи фавикона

Без фавикона рядом со ссылкой на ваш сайт в браузере отображается пустое место. Как правило, из-за этого пользователи осуществляют меньше кликов, что приводит к ухудшению положения сайта в результатах поиска. Для сайтов, которые были созданы с применением конструкторов, отображается фавикон соответствующего ресурса. В сущности, пользы от этого нет, так как вы даром продвигаете сторонний сайт.

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

Требования к фавикону у «Яндекса» и Google

Оба поисковика умеют работать с фавиконами и самостоятельно осуществляют их индексирование. Обычно для этого требуется несколько дней, иногда – недель. У крупных и посещаемых сайтов картинка индексируется быстрее, также и в случае ее обновления.

Обе поисковые системы предъявляют различные требования к фавиконам. Их запомнить несложно.

Требования Google

В настоящее время данный сервис все больше избегает привычных иконок размером 16 на 16 – они индексируются, но могут выглядеть неправильно. Эту особенность рекомендуется учитывать при создании иконок. Другие требования вполне стандартны:

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

Индексация картинок «Гуглом» занимает относительно много времени, также он медленно реагирует на обновление иконки.

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

Здесь требований еще меньше. Вдобавок ко всему «Яндекс» дает возможность при отсутствии иконки подобрать ее, основываясь на собственных алгоритмах. Впрочем, соглашаться не стоит, так как заниматься этим будет машина.

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

Кроме обычного поиска, фавиконы показываются в ленте новостей.

Выбор картинки для фавикона

Фавикон можно увидеть в браузере рядом с адресом сайта и в поисковой выдаче «Яндекса». У «Гугла» внедряется отображение картинки рядом с названием сайта на компьютере, и еще неизвестно, станет ли эта практика постоянной. Таким образом, появляется дополнительная мотивация к тому, чтобы создать фавикон.

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

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

Правильно выбранный фавикон должен удовлетворять следующим условиям:

Тематичность. Фавикон должен быть неразрывно связан с названием фирмы. Лучше всего обрезать логотип или взять первую букву.
Контрастность. Нужно применять яркие цвета, прежде всего, красный, оранжевый, темно-синий, иначе картинка будет плохо привлекать внимание.
Четкость. Изображение должно иметь хорошее качество. Для этого больше подойдет векторная графика, так как ее легко можно вписать в нужный размер.
Простота. Важно, чтобы логотип содержал минимум информации и в то же время был выполнен в соответствии с фирменной стилистикой.
Креативность. Изображение не должно выглядеть чем-то обыденным. Для фавикона необходимо разработать оригинальный дизайн.

Выбор картинки для фавикона

Размер и формат фавикона

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

Размер фавикона

Для измерения размеров фавикона используются пиксели. Наибольшее распространение получили фавиконы с параметрами 16 x 16 пикселей в формате .ico – они отображаются правильно почти во всех браузерах.

Однако для конкретного браузера или устройства оптимальный размер иконки может отличаться. Так, для Google предпочтительными являются картинки со стороной, кратной 48 px (например, 48×48, 96×96) – их можно увеличивать в размерах без потери качества. Для формата .svg нет строго определенных размеров. Здесь подойдет любое квадратное изображение.

Ряд мобильных устройств (в частности, Apple с версией iOS выше 1.1.3) поддерживают фавиконы большого размера, которые могут применяться в качестве значков веб-приложений. Стандартный размер иконок для iPhone – 60 x 60 px, для iPhone с ретина-дисплеем – 120 x 120 px. Для аналогичных устройств iPad наиболее подходят размеры 76 x 76 и 152 x 152 px соответственно. Для ОС Android с браузером Chrome рекомендуется делать фавиконы с разрешением 192 x 192 пикселя в формате .png.

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

Формат фавикона

Первоначально единственным форматом, применявшимся для фавиконов, был .ico, который поддерживался браузером Internet Explorer. Изображения сохранялись в корне сайта с названием favicon.ico.

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

Затем вместо .ico получили распространение форматы .png и .svg. Они занимают мало места и отображаются без ошибок. В настоящее время стандартом для большинства устройств является формат .png, тогда как .svg применяется в Safari MacOS.

Также встречаются фавиконы с расширениями .jpeg и .gif. Такой вариант возможен, но не рекомендуется, так как не все браузеры умеют распознавать эти форматы. Анимированные изображения поддерживаются в Firefox и Opera, однако злоупотреблять ими не стоит, поскольку они не дают посетителю сайта сконцентрироваться на изучении его содержимого и не вписываются органично в общий вид окна браузера.

Топ-30 самых востребованных и высокооплачиваемых профессий 2023

Поможет разобраться в актуальной ситуации на рынке труда

Подборка 50+ ресурсов об IT-сфере

Только лучшие телеграм-каналы, каналы Youtube, подкасты, форумы и многое другое для того, чтобы узнавать новое про IT

ТОП 50+ сервисов и приложений от Geekbrains

Безопасные и надежные программы для работы в наши дни

pdf 3,7mb

doc 1,7mb

Уже скачали 20308

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

Основные браузеры и поддержка различных форматов фавикона в разных версиях
Браузер	ICO	PNG	JPEG	SVG	GIF	APNG	GIF-анимация
Google Chrome	Да	От 4. 0	От 4.0	Нет	От 4.0	Нет	Нет
Opera	От 7.0	От 7.0	От 7.0	Нет	От 7.0	От 9.5	От 7.0
Firefox	От 1.0	От 1.0	Да	Да	От 1.0	От 3.0	Да
Internet Explorer	От 5.0	От 11.0	Да	Нет	От 11.0	Нет	Нет
Safari MacOS	Да	От 4.0	От 4.0	Да	От 4.0	Нет	Нет

Чтобы фавикон мог отображаться нормально во всех случаях, рекомендуется делать иконки двух разновидностей:

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

Только до 10. 04

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

Список документов:

Тест на определение компетенций

Чек-лист «Как избежать обмана при трудоустройстве»

Инструкция по выходу из выгорания

Чтобы получить файл, укажите e-mail:

Подтвердите, что вы не робот,
указав номер телефона:

Уже скачали 7503

Виды и размеры фавиконов разных форматов, подходящие для конкретных браузеров и ОС, приведены в следующей таблице.

Классические десктопные браузеры
16×16, 32×32, 48×48	PNG	Прозрачный
Браузер Safari
Вектор	SVG	Прозрачный
Мобильный браузер Opera
228×228	PNG	Сплошная заливка
Windows 8. 0
144×144	PNG	Прозрачный
Windows 8.1
128×128, 270 x 270, 558×558	PNG	Прозрачный
Apple iOS
180×180	PNG	Сплошная заливка
Google Android и Chrome
192×192, 512×512	PNG	Сплошная заливка

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

Если вы все равно не уверены, какой вариант вам подойдет, то берите фавикон со стороной 16 px или 32 px в формате .ico или .png. Однако чтобы сделать сайт наиболее удобным для пользователя, следует все же принять во внимание рекомендуемые размеры.

Добавление фавикона на сайт

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

Добавление фавикона на сайт

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

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

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

Затем в HTML-коде внутри тега head следует указать ссылку на иконку.

<head>

</head>

Атрибуты:

rel:

icon — учитывается большинством браузеров,

shortcut icon — учитывается браузером Internet Explorer.

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.

Стоит отметить, что, если для сайта используется несколько доменных имен, желательно прописывать не полный путь к файлу, а относительный (то есть просто /favicon.ico).

Еще один важный момент: если адрес вашего сайта записан кириллицей, необходимо преобразовать его в Punycode либо опять же указывать относительный путь.

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

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

В частности, можно подключить плагин RealFaviconGenerator. При этом вам нужно выполнить следующие действия:

зайдите в админ-панель WordPress;
откройте вкладку «Плагин», нажмите «Добавить новый»;
найдите и установите плагин RealFaviconGenerator, затем активируйте его;
откройте «Внешний вид», затем «Фавикон»;
загрузите изображение и нажмите «Генерировать фавикон», после чего вы попадете на сайт RealFaviconGenerator;
оказавшись на сайте, нажмите кнопку для создания фавикона;
снова откроется ваш сайт, и вам придет уведомление, что настройка прошла успешно.

Также загрузить фавикон достаточно легко стандартными средствами WordPress:

в админ-панели выберите «Внешний вид» – «Настроить»;
откройте «Общие настройки» – «Свойства сайта»;
зайдите в раздел «Иконка сайта», нажмите кнопку выбора;
загрузите файл изображения.

Далее нажмите «Опубликовать», и правки будут сохранены.

Добавление фавикона для мобильных устройств

Фавикон принято сохранять в файле favicon.ico, который может содержать одновременно несколько изображений. Здесь вполне хватает иконок с разрешениями 16×16, 32×32 и 48×48.

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

Теперь рассмотрим, как установить фавикон для мобильных устройств.

Android

Для этой системы стандартными являются формат .png и размеры 180 x 180, иконка может быть прозрачной. Для указания параметров фавикона применяется спецификация Web App Manifest. Она представляет собой обычный файл с расширением .json, в котором прописываются путь к иконкам, их размеры и свойства.

Вначале указывается манифест:

Пример кода:

{

«name»: «%title%»,

«icons»: [

{

«src»: «\/android-chrome-36×36.png»,

«sizes»: «36×36»,

«type»: «image\/png»,

«density»: «0.75»

{

«src»: «\/android-chrome-48×48.png»,

«sizes»: «48×48»,

«type»: «image\/png»,

«density»: «1.0»

{

«src»: «\/android-chrome-72×72.png»,

«sizes»: «72×72»,

«type»: «image\/png»,

«density»: «1.5»

{

«src»: «\/android-chrome-96×96.png»,

«sizes»: «96×96»,

«type»: «image\/png»,

«density»: «2. 0»

{

«src»: «\/android-chrome-144×144.png»,

«sizes»: «144×144»,

«type»: «image\/png»,

«density»: «3.0»

{

«src»: «\/android-chrome-192×192.png»,

«sizes»: «192×192»,

«type»: «image\/png»,

«density»: «4.0»

}

]

}

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

Apple

В iOS для иконок принято использовать файлы типа .png с разрешением 180 x 180. Их нельзя делать прозрачными, при выведении на главный экран происходит округление углов. Изображение таких размеров подходит и для других браузеров.

Apple

В rel нужно указать “apple-touch-icon.png”.

Пример кода:

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

Пример кода:

Edge и IE 12

Цвет фона изображения определяется в коде страницы через тег meta:

Пример кода:

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

Пример кода:

<tile>

</wide310x150logo></square310x310logo></square150x150logo></square70x70logo></tile>

</msapplication>

</browserconfig>

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

Проверка фавикона на ошибки

Если вы хотите удостовериться, что фавикон настроен правильно, попробуйте найти ваш сайт через «Гугл». Также вы можете пройти по следующей ссылке, указав в ней свой адрес:

https://www.google.com/s2/favicons?domain=mysite.ru

Кроме того, есть особые сервисы, позволяющие посмотреть, как выглядит фавикон.

Если фавикон отсутствует в поисковой выдаче, убедитесь, что выполнены следующие требования:

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

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

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

Сервисы для создания фавикона

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

Realfavicongenerator

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

Favic-o-matic

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

ico & App Icon Generator

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

Faviconit

Этому сервису нужен квадратный исходник со стороной не менее 310 px, максимальный размер файла – 5 Мб. На выходе вы получаете архив, содержащий графические изображения и текст с кодом HTML.

3 примера необычных фавиконов

Фавиконы, с помощью которых можно отличать версии сайта для пользователей и разработчиков

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

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

Креативные фавиконы

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

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

Тем не менее, можно привести примеры удачных фавиконов, которые позволяют компаниям привлечь внимание пользователей к их сайтам.

Youtube. Фавикон Youtube превосходно сочетает в себе креативность и минимализм. Вместо уменьшенной версии главного логотипа используется красный значок в виде кнопки проигрывателя. Таким образом, пользователю сразу становится ясно, что на странице имеется контент, который можно воспроизводить. Кроме того, иконка меняется при просмотре видео, например, когда вы нажимаете на паузу.
Sitepoint. При создании фавикона этого сайта также применялся творческий подход. Он выглядит как буква S в виде двух скобок, используемых в программировании. При взгляде на такую иконку разработчик сразу получает представление о содержании сайта.
Trello. Фавикон Trello меняется в соответствии с тем, какой цвет фона вы выбрали или же загрузили.
Mixcloud. Внешний вид фавикона у Mixcloud различается в зависимости от того, звучит ли музыка в данный момент или стоит на паузе. Еще по иконке можно определить, сколько осталось до конца песни.
Github. Особенностью фавикона Github является способность менять цвет при изменении состояния системы.
Flickr. При добавлении изображения на данный сервис появляется небольшой значок, свидетельствующий о ходе загрузки.

Динамичные фавиконы

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

Динамичные фавиконы

Похожий функционал реализован в Campaign Monitor. Для гостей сайта фавикон выглядит как закрытый конверт, который открывается после авторизации.

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

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

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

Продвижение блога — Генератор продаж

Рейтинг: 3

( голосов 2 )

Поделиться статьей

favicons-ico-fix — Анализ работоспособности пакетов npm

Все уязвимости безопасности относятся к производственных зависимостей прямых и косвенных пакеты.

Риск безопасности и лицензии для основных версий

Все версии

9 02022 9.02022 |

Версия				Уязвимости	Риск лицензии
03/2022	Популярный	C H M L	H M L

License

Массачусетский технологический институт

Политика безопасности

Нет

Ваш проект подвержен уязвимостям?

Сканируйте свои проекты на наличие уязвимостей. Быстро исправить с помощью автоматизированного исправления. Начните работу со Snyk бесплатно.

Начните бесплатно

Еженедельные загрузки (2)

Скачать тренд

Звезды GitHub: 0
Вилки: 0
Авторы: 60

Частота фиксации

Нет последних коммитов

Открытые проблемы: 0
Открыть PR: 0
Последняя версия: 1 год назад
Последняя фиксация: 1 год назад

Дальнейший анализ состояния обслуживания favicons-ico-fix на основе каденция выпущенных версий npm, активность репозитория, и другие точки данных определили, что его обслуживание Неактивный.

Важным сигналом обслуживания проекта для favicons-ico-fix является это не видел никаких новых версий, выпущенных для npm в за последние 12 месяцев и может считаться прекращенным проектом или проектом, который получает мало внимания со стороны его сопровождающих.

За последний месяц мы не обнаружили никаких запросов на вытягивание или изменений в статус issue был обнаружен для репозитория GitHub.

Совместимость с Node.js: >=10.13.0

Возраст: 1 год
Зависимости: 11 прямых
Версии: 3
Установочный размер: 196 КБ
Распределенные теги: 1
Количество файлов: 14
Обслуживающий персонал: 1
Типы TS: Нет

favicons-ico-fix имеет более одного и последнего тега по умолчанию, опубликованного для пакет нпм. Это означает, что для этого могут быть доступны другие теги. пакет, например рядом, чтобы указать будущие выпуски, или стабильный, чтобы указать стабильные релизы.

favicons-webpack-plugin-ico-fix — npm

Использует значки для автоматического создания значков для вас.

Установка

Установите плагин и значки с помощью npm:

 $ npm install --save-dev favicons favicons-webpack-plugin

Zero Config Usage

Добавьте свой базовый логотип в виде файла logo.png в контекстную папку веб-пакета. (По умолчанию контекстом является текущий рабочий каталог)

Добавьте плагин в конфигурацию вашего веб-пакета следующим образом:

 const FaviconsWebpackPlugin = require('favicons-webpack-plugin')
плагины: [
  новый FaviconsWebpackPlugin()
]

Основное использование

Добавьте плагин в конфигурацию вашего веб-пакета следующим образом:

 const FaviconsWebpackPlugin = require('favicons-webpack-plugin')
. ..
плагины: [
  new FaviconsWebpackPlugin('/path/to/logo.png') // svg тоже работает!
]

Конфигурация по умолчанию автоматически создает файлы манифеста веб-приложения вместе с 44 различных формата значков для устройств iOS, устройств Android, Windows Phone и различных настольных браузеров из вашего единого logo.png .

Совет: Возможно, вы захотите уточнить, каких поставщиков поддерживать.

Примечание о разрешении пути

Под капотом Webpack разрешает путь к логотипу в соответствии со следующим правила:

Если /path/to/logo является абсолютным, разрешать нечего и путь указанный используется как есть.
Если ./path/to/logo является относительным, он разрешается относительно Webpack. контекст , который по умолчанию равен process.cwd() .
Если путь/к/логотип не является явно ни относительным, ни абсолютным, Webpack пытается разрешить его в соответствии с разрешение. модули , который по умолчанию равен модулям: ["node_modules"] .

HTML Injection

В сочетании с html-webpack-plugin он также вставит вам необходимый html:

 









 png">





 png">






 png">






<мета-имя="имя-приложения">

https://github.com/jantimon/favicons-webpack-plugin/blob/master/test/fixtures/expected/html

Расширенное использование

 плагинов: [
  новый FaviconsWebpackPlugin({
    // Ваш исходный логотип (обязательно)
    логотип: './src/logo.png',
    // Разрешить кэширование ресурсов в сборках веб-пакетов.  По умолчанию это будет использовать
    // конфигурация кеша webpack, но можно установить значение false, чтобы отключить кеширование.
    // Примечание: отключение кэширования может значительно увеличить время сборки.
    // Для получения дополнительной информации см.: https://webpack.js.org/configuration/cache/
    кеш: правда,
    // Переопределить параметр publicPath, который обычно считывается из конфигурации веб-пакета.
    Публичный путь: '/ статический',
    // Каталог для вывода ресурсов относительно выходного каталога веб-пакета.
    // Здесь разрешены относительные строковые пути, т.е. '../public/static'. Если это
    // опция не установлена, используется `префикс`.
    выходной путь: '/общедоступный/статический',
    // Путь префикса для сгенерированных активов
    префикс: 'активы/',
    // Вставляем html-ссылки/метаданные (требуется html-webpack-plugin).
    // Эта опция принимает аргументы разных типов:
    // * логическое значение
    // `false`: отключает инъекцию
    // `true`: включает инъекцию, если она не отключена в html-webpack-plugin
    // * функция
    // любой предикат, который принимает экземпляр html-webpack-plugin и возвращает либо
    // `true` или `false` для управления внедрением метаданных html для файлов html
    // генерируется этим экземпляром. 
    вводить: правда,
    // Параметры конфигурации фавиконов (см. ниже)
    фавиконы: {
      ...
    }
  })
]

Для точной настройки генерируемых значков/метаданных см. документация по фавиконкам.

Параметры, указанные для фавиконов: передаются как есть фавиконам, за исключением случаев, когда appName , appDescription , версия , developerName или developerURL оставлены undefined , они будут определены автоматически соответственно от название , описание , версия , имя автора и author.url , как определено в ближайшем package.json , если он доступен. Чтобы отключить автоматическое получение метаданных из package.json , просто установите to null свойства, которые вы хотите опустить.

Примеры

Basic

 const FaviconsWebpackPlugin = require('favicons-webpack-plugin')
плагины: [
  новый FaviconsWebpackPlugin({
    logo: '. /src/logo.png', // svg тоже работает!
    режим: 'webapp', // опционально может быть 'webapp', 'light' или 'auto' - 'auto' по умолчанию
    devMode: 'webapp', // опционально может быть 'webapp' или 'light' - по умолчанию 'light'
    фавиконы: {
      appName: 'мое-приложение',
      appDescription: 'Мое замечательное приложение',
      имя разработчика: 'Я',
      developerURL: null, // предотвратить получение из ближайшего package.json
      фон: '#ddd',
      тема_цвет: '# 333',
      значки: {
        берег: ложный,
        яндекс: ложь
      }
    }
  })
]

Для точной настройки генерируемых значков/метаданных см. документация по фавиконкам.

Обработка нескольких файлов HTML

 const FaviconsWebpackPlugin = require('favicons-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const {базовое имя} = требуется ('путь')
...
плагины: [
    новый HtmlWebpackPlugin({
        шаблон: 'a.html.tmpl',
        имя файла: 'a.html',
    }),
    новый HtmlWebpackPlugin({
        шаблон: 'b. html.tmpl',
        имя файла: 'b.html',
    }),
    новый FaviconsWebpackPlugin({
        логотип: 'logo.svg',
        ввести: htmlплагин =>
          базовое имя (htmlPlugin.options.filename) === 'a.html',
    }),
],

Режимы компиляции

Режимы позволяют выбрать очень быструю упрощенную компиляцию фавикона или готовую компиляцию фавикона

По умолчанию или если для параметра режима фавиконов установлено значение auto , компиляция фавикона зависит от режима веб-пакета:
Если веб-пакет режим установлен на разработка режим favicons будет использовать быструю сборку light favicons.
Если для режима веб-пакета установлено значение production , режим фавиконов будет использовать полные веб-приложение сборка фавиконки.

Это поведение можно настроить, установив параметры favicons mode и devMode .

Пользовательские манифесты

Параметры манифеста позволяют перезаписывать значения сгенерированного manifest.

Как создавать иконки сайтов в 2023 году — всё о favicon — Михаил Гок на vc.ru

зачем нужен и как сделать

Понятие и задачи фавикона

Требования к фавикону у «Яндекса» и Google

Требования Google

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

Выбор картинки для фавикона

Размер и формат фавикона

Размер фавикона

Формат фавикона

Добавление фавикона на сайт

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

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

Добавление фавикона для мобильных устройств

Android

Apple

Edge и IE 12

Проверка фавикона на ошибки

Сервисы для создания фавикона

3 примера необычных фавиконов

Фавиконы, с помощью которых можно отличать версии сайта для пользователей и разработчиков

Креативные фавиконы

Динамичные фавиконы

favicons-ico-fix — Анализ работоспособности пакетов npm

Риск безопасности и лицензии для основных версий

Ваш проект подвержен уязвимостям?

Еженедельные загрузки (2)

Популярность прямого использования

Частота фиксации

favicons-webpack-plugin-ico-fix — npm

Установка

Zero Config Usage

Основное использование

Примечание о разрешении пути

HTML Injection

Расширенное использование

Примеры

Basic

Обработка нескольких файлов HTML

Режимы компиляции

Пользовательские манифесты

Добавить комментарий Отменить ответ