Фавикон из картинки: Сделать 🖼 Favicon для сайта

Содержание

Сделать 🖼 Favicon для сайта

Как пользоваться сервисом для создания favicon?

Нажмите «Выбрать изображение с компьютера» и загрузите картинку в форматах jpg, jpeg, png или gif. Подберите квадратное изображение без мелких деталей.
Нажмите «Создать Favicon»;
Сервис покажет пример того, как будет выглядеть ваш favicon. Если результат вас устраивает, скачайте готовый файл. Вы получите файл favicon.ico для сайта, то есть файл с расширением *.ico, его и надо будет использовать в дальнейшем.

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

Для разной аудитории сайта нужна поддержка основных браузеров и платформ — Windows Firefox, iOS Safari, Internet Explorer, Android Chrome и других. Для мобильных устройств часто прописывают отдельные иконки с другими размерами. Для этого указывают тип устройства в rel, к примеру, «apple-touch-icon», и атрибут sizes с размером.

Достаточный пакет

Будет достаточно одного файла favicon.ico с размерами 48×48.

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

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

Сохраните картинку в корневой каталог сайта с именем favicon.ico, чтобы получился адрес вида https://sitename.ru/favicon.ico. Это путь к изображению. Он понадобится, если вы захотите использовать разные фавиконы для разделов сайта, чтобы пользователи лучше ориентировались в разделах ресурса. Если вы используете один favicon для всего сайта, путь к нему указывать не нужно.

Добавьте ссылку на размещенный файл в HTML-код главной:


<link rel="icon" href="https://sitename.ru/favicon.ico" type="image/x-icon">

Зачем делать favicon?

Никакой функции для SEO он не несет, но его использование позволяет повысить узнаваемость сайта, и, как следствие, показателя CTR.

Узнаваемость сайта

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

Информативность

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

Запоминаемость бренда

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

Конвертируйте изображения в формат ICO

Ошибка: количество входящих данных превысило лимит в 3.
Чтобы продолжить, вам необходимо обновить свою учетную запись:
Ошибка: общий размер файла превысил лимит в 100 MB.
Чтобы продолжить, вам необходимо обновить свою учетную запись:
Ошибка: общий размер файла превысил абсолютный лимит в 8GB.
Для платных аккаунтов мы предлагаем:
Премиум-пользователь
Вплоть до 8GB общего размера файла за один сеанс конвертирования
200 файлов на одно конвертирование
Высокий приоритет и скорость конвертирования
Полное отсутствие рекламы на странице
Гарантированный возврат денег
Купить сейчас
Бесплатный пользователь
До 100 Мб общего размера файла за один сеанс конвертирования
5 файлов на одно конвертирование
Обычный приоритет и скорость конвертирования
Наличие объявлений
Мы не может загружать видео с Youtube.
Сделать стандартный значок favicon.ico для сайта онлайн
Обработка JPEG фотографий онлайн.
Главное нужно указать файл картинки на вашем компьютере или телефоне, нажать кнопку ОК. Остальные настройки выставлены по умолчанию.
Примеры со значком этого сайта с изменённым тоном цвета в настройках «цветовой коррекции»:

Если в Фотошопе была сделана картинка с прозрачным фоном и нужно, чтобы после её преобразования иконка для сайта тоже была с прозрачностью, то для этого следует сохранить её в формате PNG24 с поддержкой прозрачности (на англ. прозрачность — transparency) используя, например, функцию в Фотошопе «Сохранить для веб…» (Save for web), после этого нужно указать эту картинку в формате .png на этом сайте для её преобразования в значок favicon.ico.

Для отображения значка favicon на своём сайте его необходимо загрузить в корневой каталог сайта и указать в html коде между тегами <head>…</head> так: <link rel=»shortcut icon» href=»/favicon.ico» type=»image/x-icon»> где favicon.ico — это название созданного значка.
Иногда при замене или изменении иконки favicon на своём сайте нужно очистить кэш браузера, чтобы она обновилась.
Исходное изображение никак не изменяется. Вам будет предоставлен стандартный значок в формате .ICO для сайта.
1) Укажите изображение в формате JPEG, BMP, PNG: 2) Настройки генерируемого значка favicon.ico
Размер favicon.ico для сайта: 16×16 (стандарт) 32×32 48×48 64×64
(Стандартный размер favicon для сайта 16×16, а вот, например, favicon.ico на сайте wikipedia имеет размер 48×48 пикселей.)
3) Цветовая коррекция favicon.ico (по умолчанию всё отключено)
Повысить резкость: (0-10)
Насыщенность: (от -100 до 100)
Тон цвета: (0-180, 100=не изменять)
Яркость: (от -100 до 100)
Контрастность: (от -100 до 100)
Что такое фавикон сайта (favicon), зачем нужен и как сделать
Итак, у вас есть компания, бренд или просто блог, для которого был разработан или разрабатывается прямо сейчас сайт. Угадал?

Вы знаете, что вам нужен фавикон, но не уверены, что это такое? Или, может быть, прекрасно осведомлены, что такое фавикон и зачем он нужен, но не в курсе, как и каким его сделать?
А что, если вы даже не уверены, что оно вам надо, но вроде “так говорят”, и вроде “у всех есть”?..
В любом случае, очень рад, что зашли сюда — я очень старался, пиша это статью, и,
уверен надеюсь, это подробное руководство по фавиконам развеет все вопросы
Содержание статьи:

Что такое фавикон?
Начнём, конечно, с азов. Если вы знаете, что такое фавикон (favicon, фавиконка, favicon-ка (да, и такое написание встречается)), смело пропускайте этот раздел.
В марте 2020 года фавикону исполняется 21 год, он становится совсем взрослым… Впервые он появился в 1999-м году вместе с выпуском пятой версии известного (и на тот момент самого популярного) браузера Internet Explorer.
Само слово #favicon — это сокращение от “favorite icon”, что значит “иконка избранного”. Исторически такое название вполне оправдано, так как изначально фавикон сайта показывался только при добавлении этого сайта в “избранное” пользователя. Сейчас же фавикон отображается на вкладке любого сайта (при его наличии) почти во всех современных браузерах, и даже в поисковой выдаче, например, в Яндексе и с недавнего времени в Гугле. Это хоть и основные, но далеко не единственные места обитания современных фавиконов!
Они везде:
Вы спросите, фавикон — это логотип? Пожалуй, да. Точнее — это особая форма логотипа, разработанная специально для очень малых размеров.
В настоящее время, хотя фавиконами могут называться и иконки размером, доходящим до 512 пикселей в обоих измерениях, большинство браузеров отображают фавикон размером всего 16 на 16 пикселей. Из-за этого порой невозможно использовать в качестве фавиконки полноценный логотип.
Но перейдем к следующим разделам, а то уже обо всём по чуть-чуть рассказал…

Зачем нужен фавикон?
Фавикон повышает узнаваемость сайта и бренда
Фавикон — это такой же элемент фирменного стиля и айдентики, как логотип, фирменные цвета, фирменные узоры. О важности единства фирменного стиля я уже говорил в этой статье.
По хорошему фавикону сразу становится ясно, что за сайт за ним скрывается (конечно, если вы уже знакомы этим с сайтом).
Когда у пользователя открыто множество вкладок в браузере, именно по фавиконам он ориентируется, где какая. Ваша задача: запомниться пользователю, чтобы он всегда смог найти ваш сайт среди множества других открытых вкладок!
Даже если вкладок открыто не так много, чтобы у них пропали названия, современные люди всё больше ориентируются на иконки, нежели на текст, который им только сопутственно помогает в восприятии.
Увеличивает кликабельность
В поисковой выдаче сайт с фавиконом привлекает больше внимания пользователей, чем сайт без него. Соответственно, при прочих равных пользователь скорее кликнет именно на ваш сайт с выделяющимся фавиконом!
Конечно, наличие фавикона уже не так сильно повышает ваши шансы быть кликнутым, как в былые времена, когда такие иконки были лишь у каждого десятого сайта. Но даже сейчас, когда фавиконы есть практически у всех, он в любом случае выгодно выделяет сайт в выдаче — подобно маркерам в списках, служащим для обозначения пункта.
Посмотрите на эти примеры:
Во втором случае кому-то может показаться, что информация с сайта 2GIS — это продолжение “пункта” о Яндекс.Еде.
Я честно пытался найти реальный пример, чтобы в выдаче поисковика у сайта не было фавикона, но пролистав по 15 страниц по нескольким запросам, так ничего и не нашёл. Это ещё раз подтверждает необходимость наличия фавикона.
Вызывает доверие
Сайт с фавиконом вызывает доверие пользователя, так как сайт выглядит более закончено и профессионально, нежели веб ресурс с «пустым листом» или стандартным фавиконом той CMS, на которой сделан сайт.
В настоящее время фавиконов нет в основном лишь у не до конца доделанных или брошенных сайтов. Поэтому, чтобы не вызывать у потенциальных посетителей такие ощущения, стоит идти в ногу со временем — установить фавикон и следить за его корректным отображением.

Каким должен быть фавикон
Правильный фавикон должен:
Быть хорошо различимым в малом размере.
Соответствовать фирменному стилю компании.
Отвечать современным техническим требованиям: размеры и форматы файлов.
Чуть подробнее об этих правилах.
Визуальная составляющая фавикона
Как я уже говорил, фавикон можно считать особой версией логотипа. Особая она потому, что должна быть хорошо различима в очень маленьком размере — 16х16 px.
Возможно, вы где-то слышали, что “любой хороший логотип должен одинаково хорошо смотреться и в очень большом и в очень малом размере”.
Но, во-первых, это не всегда так, а, во-вторых, 16 пикселей — это просто крайне малый размер. И иконка сайта — это буквально единственное место, где вам потребуется логотип такого размера.
Что это значит: далеко не любой логотип можно качественно уменьшить до такого размера, даже не каждый “хороший”.
Порой, чтобы сделать favicon иконку для сайта и она выглядела аккуратно и читабельно, приходится чем-то жертвовать. Например:
Взять из основной версии логотипа только какой-то фрагмент:
Желательно, чтобы этот фрагмент был наиболее узнаваемым.
Значительно упростить графический знак логотипа:
Мелкие детали могут “замусорить” фавикон.
Изменить пропорции элементов знака:
Тонкие линии основного логотипа не будут видны в крохотном фавиконе.

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

Технические требования к современным фавиконам
Если до начала прочтения этой статьи вы знали о фавиконах чуть больше, чем ничего, то скорее всего вы также слышали, что фавиконы — это файлы с расширением ico, как и положено быть иконкам.
Да, много лет назад только так и было. Как и был один единственный размер для фавикона — 16 пикселей в ширину, 16 — в высоту. Сейчас же ситуация обстоит совсем иначе.
Формат ico морально устарел. Его главным преимуществом перед другими форматами (например, тем же png) было в том, что один файл содержал несколько иконок разных размеров (на все случаи жизни). Но браузеры уже давно научились брать иконку нужного размера из разных файлов.
Как это ни банально прозвучит: чем больше различных иконок содержит в себе файл ico, тем больше он “весит”, а это тормозит работу вашего сайта.
В современных реалиях качественный фавикон — это отдельные файлы:
разных размеров (от 16х16 до 512х512 px),
разных форматов (png, svg, ico),
подходящие под все браузеры (Chrome, Firefox, Safari, Internet Explorer и др.) и операционные системы (Android, iOS, Windows, MacOS).
Поэтому так важно создать файлы для каждого конкретного случая, а не загружать на сайт одну иконку размера 16х16 формата png и надеяться на лучшее
Более того некоторые системы, например, браузер Safari, не поддерживает формат ico, и для отображения фавиконов ему нужен векторный формат svg.
Но и ico пока что не стоит списывать со счетов — есть работа специально для него. Устаревшие браузеры, например, Internet Explorer версии 10 и ниже (а ими всё ещё пользуется большая часть населения) поддерживает только этот формат. Также ico-файл пригодится для того, чтобы у сайта была персональная иконка в Windows при сохранении его на рабочий стол или в панель задач.
Чтобы не писать полотно текста, состоящее из повторяющихся слов и цифр, покажу наглядно набор favicon-иконок, необходимый вам для сайта, подходящий для 99,9% случаев (вдруг уже есть какие-то новые стартапы, использующие что-то совсем другое):
Страшно? Мне тоже…
Но, к счастью, есть специализированные сервисы, которые значительно упрощают подготовку всех этих файлов!

Как сделать фавикон для сайта
Основные приёмы создания фавикона на основе логотипа я описал в предыдущей главе. Однако такой подход требуется не всегда и не для всех размеров. В некоторых случаях для создания фавиконки для сайта можно воспользоваться онлайн сервисами.
Например, с моим лого (монограмма LA в кружочке) машина справилась вполне сносно. Даже в размере 16х16 px он выглядит неплохо (а лучше уже не получится).
Я просто закинул векторный файл в формате svg в сервис Real Favicon Generator и на его основе машина подготовила мне весь комплект иконок, что на картинке выше. Правда, пришлось ещё самому добавить 2 не самых популярных размера (64х64 и 128х128 px) в файл ico и сделать дополнительные версии без кружка (они выделены на скриншоте выше). Последние нужны для плиточных систем в Windows.
Так вот, мне повезло. Если ваш логотип пришлось дорабатывать, чтобы получилась качественная иконка 16х16 px, это не значит, что вы не можете использовать полноценную версию в иконках большего размера.
Теперь чуть подробнее о той самой доработке и для чего она нужна.
В разработке дизайна иконок и других элементов интерфейса есть понятие #пиксель-пёрфект (pixel perfect). Это значит, что каждая линия и точка должны быть выровнены по пикселям насколько это возможно, чтобы изображение не замыливалось и не мутнело. В дизайне вообще (как и во многих других сферах) есть негласное правило: если можно сделать лучше — значит, так и надо сделать.
Посмотрите, пожалуйста, на этот рисунок:
Перед вами несколько вариантов, как можно нарисовать синий квадратик в иконке размером 16 на 16 пикселей.
а) квадрат ровно 14х14 пикселей в ширину и в высоту, толщина его стенки ровно 1 пиксель, выровнен по центру иконки;
б) квадрат ровно 14х14 px, толщина его стенки равна 1,5 px, выровнен по центру иконки;
в) квадрат ровно 15х15 px, толщина его стенки — 1 пиксель, смещён вверх и влево от центра иконки;
г) квадрат ровно 15х15 px, толщина стенки равна 1 пикселю, выровнен по центру иконки.
Видите разницу? Если бы наша иконка была намного больше (100, 200 и больше пикселей) и квадратики тоже пропорционально бы выросли, разница между ними была бы минимальна, но в таком малом размере непопадание точно в пиксели может быть значительным и сказаться на чёткости фавикона.
Вернёмся к одному из примеров:
В этом случае выравнивание шарика по pixel-perfect было бы невозможно и даже ошибочно — он стал бы слишком угловатым и топорным.
Но в примере ниже для более чёткого изображение выравнивание по пикселям было необходимо:

Пример создания фавикона из логотипа
А теперь я покажу, чем может быть плохо машинное уменьшение логотипа для создания фавикона без его дополнительного редактирования.
Дан логотип:
На его основе нужно создать фавикон.
Загружаем его в сервис Real Favicon Generator, нажимаем кнопку, получаем кучу файлов в нужных форматах и размерах. Смотрим на фавиконы маленьких размеров (16, 32 и 48 пикселей) и немножко расстраиваемся:
В первом размере даже “ЕЛЗ” читается с трудом, не говоря уже о “FOREST”. В других ситуация получше, но всё равно всё размыто. Другие размеры получились нормально.
Работаем руками и головой в графическом редакторе с этими тремя размерами и получаем:
Лучше? (если смотрите с телефона, то, возможно, всё будет не так хорошо, как на самом деле, — картинки в статье могли сжаться, но настоящие фавиконы так делать не станут и будут выглядеть чётко…))
Всё дело в том, что изначальный логотип не попадал чётко в пиксельную сетку, поэтому пришлось его редактировать. Да, в двух самых малых размера фавикон лишился подписи “FOREST”, но зачем она, если всё равно её никто не сможет прочитать?
Вот, как бы выглядели все эти иконки, будь они одного размера (для наглядности добавлена пиксельная сетка):
Верхние иконки — просто уменьшенные версии логотипа. Как видно, мало какие линии проходят по границам пикселей, от чего в малом размере и появляется “замыленность”.
В общем, мой вам совет: для экономии времени и средств загрузите ваш лого (или какую-то его часть, хорошо вписывающуюся в квадрат) в сервис Real Favicon Generator и скачайте то, что он вам предложит. Если результат вас устроит, поздравляю — фавикон для сайта готов! При этом желательно, чтобы ваш лого был или в векторном формате svg или в png большого размера (хотя бы 512х512px). С последним результат хуже, но незначительно.
Если фавиконки маленьких размеров окажутся недостаточно качественными, мутными и размытыми, придётся доработать их в ручную. Вы можете сделать это сами в графических редакторах (Photoshop, Illustrator или их бесплатных аналогах Gimp и Inkscape), следуя советам из данной статьи, или обратиться к дизайнеру за доработкой фавикона.
Другие онлайн сервисы по подготовки фавиконов для сайта я не советую, так как вышеупомянутый всё равно самый лучший, и минусов у него практически нет. Но для создания чёткой иконки 16х16 px, можете воспользоваться сервисом www.favicon.cc — в этом плане он весьма хорош и полезен, но больше ни на что не годится.
Если остались какие-то вопросы по созданию фавиконов, отпишитесь в комментариях!

Буду благодарен, если поделитесь записью в соцсетях
Фавикон для сайта

Вы здесь: Главная — HTML — HTML Основы — Фавикон для сайта

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

1) Создать фавикон

Нужно подготовить картинку в любом из форматов (PNG, JPG, SVG), размером 260×260 пикселей. Как правило, при верстке сайта по готовому макету, дизайнер предоставляет уже готовую картинку для favicon. В остальных случаях можно самим нарисовать в фотошопе или скачать подходящее изображение, например здесь.

2) Добавить картинку в генератор и настроить

Генератор favicon

После генерации нас перекинет на страницу настроек. Настраиваем фавикон для iOS — выбираем второй пункт и задаем нужный цвет фона.

Делаем настройки под Android. Так же даем цвет фона и прописываем название проекта.

Остальные настройки можно оставить по умолчанию. Favicon генератор в качестве результата выдаст HTML код и архив для скачивания.

3) Установка фавикон на сайт

Скопированный HTML код вставляем в проект, между тегами head.
<link rel="apple-touch-icon" href="img/apple-touch-icon.png"> <link rel="icon" type="image/png" href="img/favicon-32x32.png"> <link rel="icon" type="image/png" href="img/favicon-32x32.png"> <link rel="icon" type="image/png" href="img/favicon-32x32.png"> <link rel="icon" type="image/png" href="img/favicon-32x32.png"> <link rel="icon" type="image/png" href="img/favicon-32x32.png"> <link rel="icon" type="image/png" href="img/favicon-32x32.png"> <link rel="icon" type="image/png" href="img/favicon-16x16.png"> <link rel="icon" type="image/png" href="img/favicon-32x32.png"> <link rel="icon" type="image/png" href="img/favicon-32x32.png"> <link rel="manifest" href="img/site.webmanifest"> <link rel="icon" type="image/png" href="img/favicon-32x32.png"> <link rel="mask-icon" href="img/safari-pinned-tab.svg" color="#5bbad5"> <link rel="icon" type="image/png" href="img/favicon-32x32.png"> <link rel="icon" type="image/png" href="img/favicon-32x32.png"> <meta name="msapplication-TileColor" content="#da532c"> <meta name="theme-color" content="#ffffff">
Скачиваем архив с автоматически сгенерированными фавиконками и распаковываем его в нужную папку. Затем меняем в коде пути к картинкам и к манифесту.

4) Проверяем

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

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

У меня часто спрашивают: «Что лучше изучать после освоения HTML и CSS для дальнейшей карьеры верстальщика?» Отвечаю: Нужно учить язык программирования JavaScript. По сегодняшним меркам это минимальная связка для того, чтобы стать полноценным верстальщиком. От себя могу порекомендовать мой видеокурс по JavaScript

Создано 06.03.2020 10:47:28

Михаил Русаков

Предыдущая статья Следующая статья
Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Кнопка:
<a href=»https://myrusakov.ru» target=»_blank»><img src=»https://myrusakov.ru/images/button.gif» alt=»Как создать свой сайт» /></a>
Она выглядит вот так:

Текстовая ссылка:
<a href=»https://myrusakov.ru» target=»_blank»>Как создать свой сайт</a>
Она выглядит вот так: Как создать свой сайт

BB-код ссылки для форумов (например, можете поставить её в подписи):
[URL=»https://myrusakov.ru»]Как создать свой сайт[/URL]

Генератор по созданию фавиконов онлайн | Logaster

Размеры под все платформы
При помощи Логастер вы получите комплект иконок для наиболее востребованных платформ в размере от 16 до 128 рх.

Выбор форматов
Файлы доступны в нескольких популярных форматах (PNG), что позволяет размещать их на сайтах или в приложениях без конвертации или редактирования.

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

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

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

Оперативность
Все действия по разработке логотипа и превращению его в фавиконы займут не более нескольких минут — гораздо быстрее, чем работа дизайнера!
форматы, поддержка, автоматизация / Хабр
На сегодняшний день favicon — это не просто значок 16×16 во вкладке браузера. Он является важной составляющей интерфейса, а также играет немаловажную роль в прогрессивных веб-приложениях. Существует немало способов подключения и использования favicon, о которых я расскажу в данной статье.
В каком формате должен быть фавикон?

Раньше основным форматом фавикона был формат ICO. Его главная особенность заключалась в том, что файл такого формата мог хранить в себе несколько вариантов размеров иконки. Сейчас формат ICO считается устаревшим, на смену ему пришёл формат PNG с новыми возможностями по взаимодействию с иконкой.
Помимо PNG, поддерживается формат SVG. Но у него, к сожалению, невысокая поддержка на данный момент. Однако этот формат идеально подходит для фавиконов, его использование намного бы упростило нам жизнь. Будем надеяться, что ситуация скоро изменится.
Фавикон может быть создан ещё в нескольких форматах, например, в формате GIF или JPEG, но проблемы с поддержкой делают их использование нецелесообразным.
HTML5 и атрибут sizes

Атрибут sizes пришел в нашу жизнь с HTML5. Благодаря ему браузер или устройство может выбрать необходимый размер фавикона. Атрибут sizes указывается в формате [ширина х высота] без указания единиц. Если в файле хранится сразу несколько иконок, можно задавать их размеры через пробел. Ключевое слово any указывает, что иконка может масштабироваться до любого размера, например, если она хранится в векторном формате SVG.
<link rel="icon"> <link rel="icon" any">

Пора ли отправлять ICO на свалку?

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

Начнём, пожалуй, с Windows.
До 11 версии формат PNG в IE не поддерживался, поэтому для IE10 и более младших версий по-прежнему необходимо использовать формат ICO. А вот с IE11 смело можно переходить на PNG. Для устаревших браузеров Microsoft рекомендует размеры 16х16, 32х32 и 48х48 для фавиконов формата ICO.
Начиная с IE9, сайты получили возможность быть закрепленными в меню и панели задач, а с приходом IE11 и Windows 8.1 появилась возможность создавать закрепленные сайты в виде живых плиток. По умолчанию изображением на плитке будет фавикон, но только не для больших и широких плиток, для которых нужно задавать изображение специального размера. Сделать это можно следующими способами: добавив теги метаданных в разметку веб-страницы или файл конфигурации браузера.
Сначала давайте рассмотрим первый способ.
Определение фавикона в устройствах Windows с помощью метаданных в <head>:
<meta name="msapplication-TileImage" content="images\tileimage.jpg">

Если мы хотим указать иконки для больших плиток, это можно сделать с помощью следующих метаданных:
<meta name="msapplication-square70x70logo" content="images/smalltile.png"> <meta name="msapplication-square150x150logo" content="images/mediumtile.png"> <meta name="msapplication-wide310x150logo" content="images/widetile.png"> <meta name="msapplication-square310x310logo" content="images/largetile.png">

Можно указать цвет фона плитки:
<meta name="msapplication-TileColor" content="#009900">

Можно указать имя закрепленного сайта:
<meta name="application-name" content="Rick and Morty">

Если нет этих метаданных, то в качестве имени используется значение в <title&gt; страницы.
Можно указать текст дополнительной подсказки, появляющейся при наведении указателя мыши на ярлык закрепленного сайта в меню “Пуск” Windows или на рабочем столе:
<meta name="msapplication-tooltip" content="Title">

Можно даже определить адрес документа:
<meta name="msapplication-starturl" content="./">

И тогда независимо от того, какую страницу пользователь перетащил на панель задач, закрепленный сайт будет открывать указанный адрес.
Есть ещё много других метаданных, которые, например, определяют цвета кнопок навигации в браузере или делают плитки динамичными.
Начиная с IE11 Windows 8.1 и Edge Windows 10 можно закрепить веб-сайт с помощью файла конфигурации браузера. Это удобно: создать один файл browserconfig.xml и поддерживать, и подключать его на каждой странице, если у нас есть несколько страниц, которые будут использовать одни и те же плитки.
Вызов файла в <head>:
<meta name="msapplication-config" content="browserconfig.xml">

browserconfig.xml
<?xml version=”1.0" encoding=”utf-8"?> <browserconfig> <msapplication> <tile> <square70x70logo src="/img/favicons/mstile-70x70.png"/> <square150x150logo src="/img/favicons/mstile-150x150.png"/> <square310x310logo src="/img/favicons/mstile-310x310.png"/> <wide310x150logo src="/img/favicons/mstile-310x150.png"/> <TileColor>#000000</TileColor> </tile> <notification> <polling-uri src="notifications/contoso1.xml"/> <polling-uri2 src="notifications/contoso2.xml"/> <polling-uri3 src="notifications/contoso3.xml"/> <frequency>30</frequency> <cycle>1</cycle> </notification> </msapplication> </browserconfig>

square70x70logo, square150x150logo, wide310x150logo, square310x310logo — элементы, внутри которых объявляются изображения для различных размеров плитки.
Microsoft рекомендует брать больший размер изображений в целях поддержки экранов с высокой плотностью пикселей. Желательно, чтобы размер исходного изображения примерно в 1.8 раза превышал размер целевой плитки, чтобы его можно было увеличивать и уменьшать. Например, для 70х70 рекомендуемый размер 128х128, а для широкой плитки 310×150 исходное изображение имеет размер 558×270.
Если плитка сайта статическая, то вышеперечисленных элементов будет достаточно. Если же предполагается динамическая плитка, то необходимо добавить элемент <notification>. Этот элемент может включать в себя до 5 элементов <polling-uri>, содержащих в атрибуте src пути к соответствующим xml-файлам уведомлений. Также внутри этого тега содержится элемент <frequency>, значение которого указывает в минутах интервал между обращениями к сайту за обновлением уведомлений, то есть живая плитка будет обновляться каждые, например, 30 минут. Да, значение не произвольное, а только 30, 60, 360, 720 или 1440.
Наконец, есть внутри тега <notification> еще элемент <cycle>, отвечающий за способ повторения уведомлений (может принимать значения от 0 до 7). Шаблоны доступны только для средних, широких и больших плиток.
Новый интерфейс Metro предлагает несколько новых принципов дизайна, например, «белые силуэты», используемые большинством предустановленных программ.
С помощью платформы уведомлений Windows сайт может за один раз показывать на плитке до пяти текстовых сообщений или сообщений с изображениями, которые циклически сменяют друг друга. Не будем подробно останавливаться на этих xml-файлах уведомлений. Существует множество шаблонов живых плиток, вот один из них:

<tile> <visual lang="en-US" version="2"> <binding template="TileWide310x150ImageAndText01" <image src="images/image1.png" alt="alt text"/> <text>Text Field 1</text> </binding> </visual> </tile>

То, что написано в кавычках в атрибуте template — название шаблона. Этот шаблон содержит изображение и небольшой текст. Используется для больших изображений и средних названий. На самом деле, подобных шаблонов очень много: и просто c текстом, и просто с изображением, и с несколькими изображениями, и с несколькими строками текста, и так далее. Большинство шаблонов изображения или текста размещают текст на той же плитке, что и изображение. Но шаблоны с Peek в названии выполняют переключение между изображением и текстом на плитке.
Подробнее о шаблонах можно узнать на официальном сайте.
Mac OS

В Mac OS особо не разгуляешься, к сожалению. Если сохранить сайт на рабочий стол в Mac OS, то значок будет отображаться как скриншот страницы с html кодом. Просто так сайт приложением в Mac OS не сделать, но и не будем.
Safari — вот где нам пригодится формат SVG. Чтобы использовать SVG, необходимо указать атрибут rel со значением mask-icon, все элементы SVG должны быть черного цвета. Но не стоит пугаться, цвет можно поменять атрибутом color. Эта SVG-иконка нужна для закрепления вкладки в Safari. А цвет при наведении будет таким, какой мы указали в атрибуте color.
<link rel="mask-icon" href="safari-pinned-tab.svg" color="#00а0ff">

Если не указывать эту иконку, то браузер будет отображать первую букву домена нашего сайта.
Вспомнила еще один случай, где нам еще может пригодиться формат ICO. Поисковик Яндекс вставляет фавикон в поисковой выдаче рядом с заголовком сайта. Что, безусловно, увеличит привлекательность сниппета и, как следствие, кликабельность.Яндекс рекомендует использовать для этих целей формат ICO.
iOS

Safari в iOS вообще не отображает favicon во вкладках, но использует их для закладок, так же как и в Mac OS. В iOS пользователи могут добавить сайт на рабочий стол, и оно будет выглядеть как нативное приложение. Эти ссылки отображаются в виде значков и называются Web Clips.
Для этого нужно добавить rel=«apple-touch-icon» и указать размер с помощью атрибута sizes. Каждое устройство нуждается в своем размере иконки. Так как iOS устройств довольно много, и каждое устройство имеет свое разрешение экрана, спецификация, разработанная Apple, поддерживает возможность указать несколько тегов с иконками разных размеров.
<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">

Если значок не соответствует рекомендуемому размеру устройства, используется самая близкая по размеру иконка большего размера, нежели рекомендуемый. Когда пользователь заходит на ваш сайт с iOS устройства, запрашиваются файл apple-touch-icon-precomposed.png, который должен быть оформлен в стиле iOS: закругленные углы, блики, и тень. Если файла с таким названием в корне проекта или rel=«apple-touch-icon-precomposed» нет, будет запрошен apple-touch-icon.png, которому разрешено быть таким, какой он есть, а все эффекты будут наложены самим iOS. Соответственно, нужна иконка под каждый размер. А вот если нет и этих файлов, то на рабочем столе iPhone или iPad будет отображаться не красивая иконка, а миниатюра страницы — ее скриншот.
Ходят слухи что Blackberry будет тоже использовать rel=«apple-touch-icon-precomposed», но возможности проверить, к сожалению, не было.
Подробнее прочитать про актуальные размеры для устройств iOS можно на официальном сайте.
Некоторые могут возразить, что все 9 изображений не очень и нужны. Однако, по крайней мере, основная Apple Touch Icon должна быть 180х180. Остальные устройства могут уменьшить изображение. Но некоторые другие платформы тоже используют Apple Touch Icon, поэтому лучше их объявить.
Как бы странно это не звучало, устройства под iOS не единственные, которые ищут Apple Touch Icon. Поскольку они популярнее и встречаются чаще других PNG иконок высоких разрешений, некоторые браузеры, вроде Android Chrome, используют их. Таким образом, лучше их объявлять, это позволит посетителю с совместимым устройством или браузером использовать одну из этих иконок.
В iOS можно указать заголовок веб-приложения. По умолчанию используется значение тега <title>. Чтобы задать другой заголовок, добавьте метатег на веб-страницу:
<meta name = "apple-mobile-web-app-title" content = "AppTitle">

Кстати, можно даже установить стиль строки состояния для веб-приложения:
<meta name="apple-mobile-web-app-status-bar-style" content="black">

Можно поменять её цвет, можно сделать полупрозрачной. Это тоже повлияет на вид нашего сайта.
Android

Устройства на Android отлично понимают формат PNG, а ещё поддерживают манифест веб-приложения manifest.json, в котором можно прописать все параметры того, как будет вести себя сайт, если его установить на домашний экран. Этот манифест пока, к сожалению, не читают устройства под IOS. А если Android не найдет этот файл, то он будет использовать apple-icon-touch.
Файл манифеста может содержать в себе ряд космических параметров, но тут находятся лишь те, которые нам необходимы для отображения сайта на домашнем экране:
{ "name": "Rick and Morty", "short_name": "Rick", "icons": [ { "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" }, { "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" } ], "theme_color": "#b3adad", "background_color": "#b3adad", "display": "standalone" }

Ключ name определяет подпись в приложению на домашнем столе. Если этот параметр не указан, подпись будет взята из <title> в <head>;
Ключ short_name определяет укороченную подпись для приложения, если не хватает места для полного имени;
Ключ icons — определяет массив объектов иконок, может принимать три значения: sizes, src, type;
Ключ theme_color определяет цвет строки состояния. Начиная с 39 версии хрома для Android Lollipop появилась возможность менять цвет интерфейса браузера и цвет вкладки браузера.
Задать цвет можно и через <head>, добавив следующий мета-тег:
<meta name="theme-color" content="#9CC2CE">

Ключ background_color определяет цвет фона для веб-приложения на домашнем столе. Этот же параметр отвечает за то, какой цвет будет иметь фон приложения, когда он открывается, т.е. манифест загрузился, но ещё не загрузились стили;
Ключ display определяет режим отображения веб-приложения. Например, значение standalone, которое мы указали, позволило открывать нам сайт как приложение.
Вызов в <head>:
<link rel="manifest" href="manifest.json">

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

В заключение нужно сказать, что все, что мы рассмотрели в рамках данной статьи, не обязательно писать руками, не забывайте про автоматизацию. Существуют сайты, на которых можно быстро сгенерировать все необходимые нам размеры и форматы favicon: realfavicongenerator.net, а при необходимости можно заодно сгенерировать код.
Есть пакеты для сборки и для Gulp, и для Grunt.
Главное помнить, что сегодня favicon — это больше, чем иконка в адресной строке и закладке браузера.
Favicon Generator для идеальных иконок во всех браузерах
Android гибок в отношении дизайна иконок. Однако он автоматически округляет значки, что может быть плохой новостью, если вашему значку нужны квадратные углы. Кроме того, убедитесь, что ваш значок всегда будет выделяться на любом фоне. Воспользуйтесь приведенными ниже вариантами, чтобы подобрать наиболее подходящий.
Без изменений, сохраните эталонное изображение как есть.
Добавьте сплошной простой фон, чтобы заполнить прозрачные области.Добавьте поля и простой фон.
Фоновый цвет Совет: вы можете выбрать цвет прямо из предварительного просмотра.
Размер поля (для значка 96×96)
Примените небольшую тень, как в официальных приложениях Google (Gmail, Play Store, YouTube …).
Название приложения
Цвет темы Начиная с Android Lollipop, вы можете настроить цвет панели задач в переключателе.
Android Chrome M39 представляет собой манифест, который поможет вам уточнить поведение ссылки «Добавить на главный экран».
Browser. В этом режиме, когда пользователь щелкает ссылку, Android Chrome ведет себя так, как если бы страница была открыта, как любой обычный веб-сайт.
Standalone. В этом режиме Android Chrome придает открываемой странице немного более «родной» стиль.В частности, он позволяет указать начальный URL-адрес и ориентацию экрана. Он также удаляет панель навигации и дает вашему веб-сайту отдельную вкладку в переключателе задач.
Начальный URL Обычно ваша домашняя страница. Используйте это поле, чтобы переопределить URL-адрес страницы, отмеченной закладкой.
ориентация
Не указано. Android Chrome будет вести себя как обычно, когда пользователь поворачивает свое устройство.
Установить книжную ориентацию экрана.
Установить альбомную ориентацию экрана.
Современные версии
Android Chrome 39 и более поздние версии
Создавайте только рекомендуемые значки с высоким разрешением
Создать все задокументированные значки
Устаревшие версии
Android Chrome 38 и более ранние версии
Объявите значок в HTML-коде Если вы этого не сделаете, Chrome использует значок Apple Touch.
Если ваше основное изображение не подходит для Android, вы можете отправить изображение, разработанное специально для Android.
Выберите картинку для Android Chrome
Мастер изображение
Посвященная картина
,
43 Лучшие бесплатные онлайн-создатели фавиконов
Favicons — это сокращение от Favorite icons , которые в основном имеют размер 16x16px , присутствующие в адресной строке веб-сайта. Раньше он использовался для создания закладок, но в настоящее время он стал настолько популярным, что почти на каждом веб-сайте есть свой собственный Favicon. Теперь это стало необходимостью. Некоторые популярные значки Favicons: Facebook , Wikipedia , Google , Yahoo и многие другие.
Указанные ниже онлайн-конструкторы Favicon очень эффективны и надежны в своем процессе. Попробуйте их, и вы не будете разочарованы.
Вы также можете попробовать другие наши статьи: Программное обеспечение для создания иконок, Программное обеспечение для создания визитных карточек и редакторы латекса.
Продрау
Prodraw.net — хороший сайт для онлайн-создания Favicon. Загрузите любое изображение, которое вы хотите в качестве своего Favicon. Есть несколько предложений о том, как создать Favicon, например, тип изображения, уровень прозрачности и форматы файлов.После создания файла Favicon.ico вы можете загрузить его на свой веб-сайт с помощью HTML-кода. Помните, что код необходимо поместить в тег.
Rw-конструктор
Rw-designer.com — следующий онлайн-конструктор Favicon в нашем списке. У него очень упрощенный интерфейс. На главной странице есть хороший раздел «Как его использовать», который объясняет все о создании Favicon.Выберите изображение и нажмите кнопку «Перейти». Изображение откроется в редакторе Favicon, который там присутствует. Вы можете настроить свой Favicon в редакторе Favicon. Доступны карандаши, линии и пипетки. По завершении модификации вы можете загрузить свой Favicon, нажав кнопку «Загрузить значок».
Генератор фавиконов

Как следует из названия, favicon-generator.org создает Favicon. Вы можете создать значок Favicon из своего изображения или выполнить поиск в галерее значков. Вы также можете выполнить поиск по цвету. Выберите изображение и нажмите кнопку «Создать значок». Вы можете создать четыре типа Favicon, например: Веб-значки, значки Android, значки Microsoft и значки iOS (iPhone и iPad). Вы можете выбрать желаемый тип Favicon. Favicon можно использовать, поместив вывод HTML-кода Favicon в заголовок вашего HTML-документа.
Фавикон.co.uk

Favicon.co.uk может генерировать Favicon из любого изображения, которое вы хотите. Он может создавать четыре типа Favicon в зависимости от размера. Это следующие размеры Favicon: — 16 × 16, 32 × 32, 48 × 48 и 64 × 64. Поэтому выберите изображение и размер для вашего Favicon и нажмите кнопку «Создать Favicon». После нажатия на него появится предварительный просмотр Favicon. Вы можете либо загрузить свой Favicon прямо сейчас, либо создать еще один Favicon.
Xiconeditor
Xiconeditor.com содержит множество инструментов, которые помогут вам создать идеальный Favicon. Есть инструмент типа «шрифт», «кисть», «карандаш», «ластик» и многие другие подобные инструменты. Загрузите понравившееся изображение. Вы можете предварительно просмотреть значок Favicon перед его загрузкой. Вы можете поиграть с настройками цвета, допуска и альфа-канала.Вы можете загрузить Favicon, нажав кнопку «Экспорт».
Ico Преобразование

Icoconvert.com также может создавать значки Favicons и обычные значки. Загрузите изображение размером до 10 МБ или вы можете вставить URL-адрес любого изображения из сети, чтобы начать создание своего Favicon. Вы можете обрезать изображение и применить эффект стиля, если хотите.Вам нужно выбрать радио-поле Favicon Icon, чтобы создать свой Favicon. Вы также можете создать более одного Favicon, выбрав размеры Favicon.
Genfavicon
Следующий генератор Favicon в нашем списке — genfavicon.com . Он позволяет создавать Favicon четырех размеров, то есть 16 × 16, 32 × 32, 48 × 48 и 128 × 128. Выберите файл изображения на своем компьютере или просто скопируйте и вставьте его местоположение из Интернета.Выберите подходящий размер для вашего Favicon. Вы можете предварительно просмотреть значок Favicon, нажав кнопку «Захват и предварительный просмотр». После предварительного просмотра веб-сайт предложит вам два варианта загрузки вашего Favicon: первый — как файл ICO, а второй — как файл PNG.
Генератор Favicon Dynamic Drive
Этот генератор Favicon — это инструмент веб-сайта, размещенный на Dynamicdrivefavicongenerator.com . Это очень простой веб-инструмент для создания Favicon. Загрузите изображение, которое хотите сделать своим Favicon. Помните, что если вам нужна прозрачность, вам нужно загрузить файл GIF или PNG. Максимальный размер загружаемого изображения — 150 КБ. Вы уже знаете, что для использования Favicon вы должны поместить файл «Favicon.ico» в раздел HEAD своей веб-страницы.
Иконификатор

Иконификатор.net — это известный генератор иконок и значков. Он может создавать значки Favicons в следующих размерах: 16 × 16, 24 × 24, 32 × 32 и значки следующих размеров: 48 × 48, 64 × 64, 128 × 128 и 256 × 256. Просто выберите изображение на своем компьютере и соответствующий размер файла в правой части поля ввода формы и нажмите кнопку «Iconify». Веб-сайт покажет вам предварительный просмотр значка в соответствующих размерах, которые вы выбрали ранее. Загрузите значок Favicon нужного размера или вы можете загрузить их все в виде zip-файла.
Favicon.cc

Favicon.cc — очень популярное имя, когда дело касается создания Favicon. Он показывает вам самые популярные и последние фавиконы, созданные другими пользователями. Это позволяет вам создавать свой Favicon с нуля и из любого изображения, находящегося на вашем компьютере. Загрузите понравившееся изображение и измените его по своему усмотрению. Измените цвет и уровень прозрачности изображения.Вы можете загрузить свой Favicon, нажав кнопку «Загрузить Favicon».
Favicon из фотографий в HTML Kit

Favicon from pics — это онлайн-инструмент с сайта htmlkit.com , который генерирует значки и значки Favicons из любого изображения с вашего компьютера. Выберите изображение и нажмите кнопку «Создать значок». Этот онлайн-инструмент также позволяет создавать анимированные версии Favicon.Есть и другие очень приятные варианты, с помощью которых вы можете изменить общее впечатление от Favicon. Опции настройки, представленные этим онлайн-инструментом, включают изменение цвета, текста и анимации. Вы можете предварительно просмотреть свой Favicon в браузере. Вы можете либо загрузить Favicons в виде zip-файла, либо отдельно загрузить файлы Favicon.ico и favicon.gif.
Фавикон

Фавикон.com — это простой и базовый бесплатный онлайн-конструктор Favicon. В этом онлайн-генераторе Favicon нет функций редактирования, кроме обрезки. Вы можете обрезать изображение по своему усмотрению. Просто поместите изображение, и оно создаст Favicon. Веб-сайт поддерживает два формата файлов для Favicon. Он сгенерирует ваш Favicon в формате файлов ICO и JPG.
Дегрейв

Дегрейв.com найдет два метода создания Favicon. Первый — это создание собственного дизайна, а второй — загрузка любого изображения со своего компьютера. Давайте посмотрим, как создать фавикон, загрузив изображение. Импортируйте картинку со своего компьютера. Когда вы загрузите изображение, вы попадете в следующее окно, где можете обрезать изображение, если хотите. Вы можете поиграть с цветовыми элементами изображения. После редактирования вы можете создать свой Favicon, нажав кнопку «Make Favicon».
Антифавикон

Antifavicon.com — это очень простой в использовании онлайн-генератор Favicon. Это первый веб-сайт в нашем списке, который вообще не занимается изображениями. Вместо изображения он создает Favicon через текст. На главной странице есть два текстовых поля, в которых вы можете написать все, что хотите, на свой Favicon.Существует палитра цветов для выбора цвета двух текстовых полей и их фона. Вы можете загрузить свой Favicon, нажав кнопку «Сохранить как файл Favicon».
Faviconpro
Favicon.pro также может генерировать обычные значки. Интерфейс этого сайта прост и очень удобен в использовании. Просто выберите изображение на своем компьютере и нажмите кнопку «Отправить».Предварительный просмотр будет показан после нажатия кнопки «Отправить». Вы можете загрузить свой Favicon, щелкнув ссылку «Щелкните здесь, чтобы загрузить свой значок».
Иконген

Icongen.com генерирует различные типы значков, а также создает значки Favicons. Выберите изображение, которое вы хотите сделать как файл Favicon. Загрузите изображение, и откроется новая страница, на которой вы можете увидеть предварительный просмотр файла Favicon и другие значки с разным разрешением.Веб-сайт генерирует три типа разрешений файлов, например 16 × 16, 32 × 32 и 96 × 96. Выберите разрешение, которое хотите использовать. Просто щелкните его правой кнопкой мыши и сохраните как изображение.
Iconj

Iconj.com предоставляет два метода, с помощью которых мы можем создавать значки Favicons. Первый метод — это значок стиля iPhone, а второй метод — преобразование изображения в значок или значок Favicon.В обоих случаях вам нужно выбрать изображение на вашем компьютере и выбрать разрешение вывода вашего файла как 16 × 16. Если вам интересно, вы можете настроить некоторые параметры, такие как параметры отражения стекла, параметры теней и многое другое.
Флатиконы
Flaticons.com содержит несколько очень впечатляющих значков. Вы можете создать свой Favicon с помощью любой из этих красивых иконок.Найдите его по категории и выберите нужную. Выберите цвет фона и выберите любую форму, которую вы хотите добавить в свой Favicon. Не выбирайте ранее размер Favicon 16 × 16. Если вы это сделаете, вы не сможете изменить цвет значка и форму его фона. Он сгенерирует значок Favicon в формате PNG.
Онлайн-генератор Favicon

Favicon Online Generator — это онлайн-инструмент, предоставляемый webestools.com . Он генерирует два типа Favicons, например. 1
.
Онлайн-генератор значков
JavaScript требуется для использования редактора значков. Пожалуйста, проверьте настройки вашего браузера и при необходимости включите JavaScript.

Что такое Favicon?
Фавиконы — это маленькие значки, которые обычно можно увидеть в адресной строке веб-сайтов, списке закладок и вкладках. Эти значки отличают ваш веб-сайт от веб-сайтов конкурентов и помогают найти ваш веб-сайт, когда списки закладок пользователей переполнены.
Существует множество бесплатных программ для создания изображений значков, но большинство из них не поддерживает.ico файл. Следовательно, вам придется загрузить дополнительный плагин. После того, как вы закончите создавать значок, его необходимо изменить, так как значки должны быть размером 16 X 16 или 32 x 32 пикселей. Пример значка: Google, Yahoo, Bing, Pinterest (см. Изображение ниже).

Как сделать фавикон онлайн?
Мы постарались предоставить вам быстрый и простой способ создания ваших новых значков. Есть два способа создать свой фавикон на нашем сайте:

1.Генератор Favicon
Этот бесплатный онлайн-инструмент поможет вам преобразовать логотип, изображение и файл фотографии в стандартный формат значков * .ICO. Простые шаги: загрузите файл изображения, сгенерируйте файл значка и загрузите его. Для достижения наилучших результатов вы можете использовать для загрузки квадратное изображение. А если вам нужен прозрачный значок, используйте файл GIF или PNG с прозрачным фоном. (пример инструмента для создания значков изображений)

2. Favicon Creator
Создайте фавикон.ico для вашего веб-сайта мгновенно с помощью нашего онлайн-инструмента рисования значков (Draw, Pixel Color, Eraser, Reset Editor) и загрузите его бесплатно.Создайте формат файла значка веб-сайта из файла изображения и фотографии. Это очень полезный онлайн-инструмент для каждого веб-дизайнера, разработчика и блогера. Это просто и быстро. (Пример инструмента для создания значков изображений)
Если вы не представляете, какой значок следует создать для своего сайта, вы можете увидеть нашу бесплатную галерею ico уже готовых значков, которые наши пользователи уже загрузили.Надеемся, что он будет вам полезен.

Как добавить значок на свой сайт:
Создайте свой значок на этом веб-сайте.
Поместите файл favicon.ico в корневую папку своего веб-сайта
Напишите следующий код в свой html: rel = "ярлык" href = "/ favicon.ico" type = "image / x-icon">
Посетите www.yourwebsite.com/favicon.ico , чтобы убедиться, что ваш значок там.
Так зачем же полагаться на программное обеспечение, если есть лучшая альтернатива, позволяющая бесплатно создавать мгновенные значки значков? Этот сайт предоставляет онлайн-инструмент для мгновенного создания значков без загрузки и установки какого-либо программного обеспечения. Вы можете создавать значки в течение нескольких секунд с помощью нашего простого в использовании генератора значков и бесплатно загружать его для использования на своем веб-сайте.
.
Favicon от RealFaviconGenerator — плагин для WordPress
Создание и настройка значка для настольных браузеров, iPhone / iPad, устройств Android, планшетов с Windows 8 и др. За несколько секунд создайте значок, который будет отлично смотреться на всех основных платформах.
Favicon — это не просто файл favicon.ico , размещенный в середине вашего сайта. В настоящее время, когда существует так много разных платформ и устройств, вам нужна куча изображений, чтобы выполнить свою работу. С помощью RealFaviconGenerator генерируйте все значки, необходимые для настольных браузеров, iPhone / iPad, устройств Android, устройств Windows 8 и других.
Устройства
iOS используют значок Apple Touch с высоким разрешением для отображения закладок и ярлыков на главном экране. Для iPhone первого поколения требуется изображение размером 57 × 57, тогда как новому iPad с экраном Retina требуется изображение размером 152 × 152. Android Chrome также использует эти изображения, если находит их. Windows 8 идет другим путем со специальным набором значков и HTML-объявлений.
Favicon — это не только картинки с разным разрешением. Различные платформы имеют разные правила пользовательского интерфейса.Например, классические значки на рабочем столе часто используют прозрачность. Но iOS требует непрозрачных значков. И у Windows 8 есть свои рекомендации.
Сэкономьте часы на исследованиях и редактировании изображений с помощью RealFaviconGenerator и сопутствующего плагина. За считанные секунды вы настраиваете значок, совместимый с:
Windows (IE, Chrome, Firefox, Opera, Safari)
Mac (Safari, Chrome, Firefox, Opera, Camino)
iOS (Safari, Chrome, Coast)
Android (Chrome, Firefox)
Поверхность (IE)
И более
Мы очень серьезно относимся к совместимости.См. Полный список на http://realfavicongenerator.net/favicon_compatibility.
** Локализация **
Использование панели управления WordPress
Перейдите к «Добавить» на панели управления плагинами.
Искать «Favicon by RealFaviconGenerator»
Нажмите «Установить сейчас»
Активируйте плагин на панели управления плагином
Перейдите к элементу «Favicon» в меню «Внешний вид».
Выберите эталонное изображение из медиабиблиотеки (необязательно)
Нажмите кнопку «Создать значок» и следуйте инструкциям.
Использование FTP
Скачать favicon-by-realfavicongenerator.zip
Извлеките каталог favicon-by-realfavicongenerator на свой компьютер
Загрузите каталог favicon-by-realfavicongenerator в каталог / wp-content / plugins /
Активируйте плагин на панели управления плагином
Перейдите к элементу «Favicon» в меню «Внешний вид».
Выберите эталонное изображение из медиабиблиотеки (необязательно)
Нажмите кнопку «Создать значок» и следуйте инструкциям.
Надежный, охватывает все основы, в целом отличный плагин.
Отличный плагин, полностью выполняет то, что говорит!
Похоже, что для этого плагина больше нет поддержки. Не удалось заставить его работать с iPhone.
Я изменил фавикон моего сайта в мгновение ока с помощью этого плагина!
Обычно я не считаю значки значков важной частью веб-сайта, но они имеют значение, а поскольку размер и внешний вид значков в последнее время изменились, этот плагин стал для меня незаменимым.Это позволяет вам настроить фавиконы вашего сайта за очень короткое время. Спасибо!!!
Ни беспорядка, ни суеты. идеальный!
Прочитать 619 отзывов
«Favicon by RealFaviconGenerator» — программное обеспечение с открытым исходным кодом. Следующие люди внесли свой вклад в этот плагин.
авторов
1.3.18
Удалить ссылку на устаревшую функцию screen_icon
Плагин
был протестирован до WordPress 5.4
1.3.17
Изменения в очистке предупреждений безопасности от CodeRisk
1.3.16
Плагин
был протестирован до WordPress 5.3.2
1.3.15
Плагин
протестирован до WordPress 5.1
1.3.14
Плагин
был протестирован до WordPress 5.0-beta5
1.3.13
Плагин
протестирован до WordPress 4.9.7
1.3.12
Не публиковалось, без изменений
1.3,11
Добавлен перевод идентификатора / идентификатора
, спасибо Джордану Силаену
Плагин
был протестирован до WordPress 4.8.1
1.3.10
Всегда получать доступ к RealFaviconGenerator через HTTPS
Уточнение в разделителях локальных путей для Windows
Плагин
был протестирован до WordPress 4.7.1
Уведомление, чтобы попросить администратора не деактивировать плагин
1,3,9
Плагин
был протестирован до WordPress 4.7
1,3,8
Плагин
был протестирован до WordPress 4.6
1,3,7
Fix: Ключевые слова плагина перефразированы (некоторые не учтены).
1,3,6
Исправление: путь к значкам иногда был неправильным, когда каталог загрузки был корневым каталогом
1,3,5
Добавлен перевод
pl / PL, спасибо Maciej Gryniuk
Добавлен перевод
ru / RU, спасибо Наташе Дятко
1.3,4
Плагин
протестирован до WordPress 4.5
1.3.3
1.3.2
Опечатки в французском переводе
Предупреждение, исправление для PHP7
Протестировано до WordPress 4.4.1
Добавлен перевод
cs / CZ, благодаря анонимному переводчику
1.3.1
Исправление в предыдущей версии.
1.3.0
Плагин использует преимущества неинтерактивного API RealFaviconGenerator для автоматического обновления значка всякий раз, когда доступна новая версия.
1.2.15
Добавлена ссылка на пожертвование.
Плагин
теперь работает при доступе к файловой системе через FTP (не прямой). См. Https://wordpress.org/support/topic/no-images-created
1.2.14
Улучшение безопасности.
Предупреждение об исправлении NONCE_ACTION_NAME.
Удалены ненужные закрывающие теги PHP.
Добавлена проверка ошибок при распаковке пакета favicon.
1.2.13
1.2,12
Улучшения производительности: проверка обновлений значков теперь выполняется в разделе «Администратор» (а не в разделе «Публичный»), языковые стандарты больше не загружаются в раздел «Публичный».
Воспользуйтесь преимуществом Rewrite API (если он доступен), чтобы файлы отображались в корневом каталоге. Итак, http://example.com/favicon.ico работает (например, по запросу Яндекса).
Добавлен перевод
nl / NL, спасибо Axel Vanderhaeghen.
1.2.11
Когда браузер администратора не может получить изображение, выбранное из библиотеки мультимедиа, пользовательский интерфейс не работает.
Распаковка пакета Favicon стала более надежной.
Уведомление о том, чтобы просить пользователей оценить плагин на WordPress.org.
1.2.10
Исправление предупреждений при использовании с BuddyPress (bp_setup_current_user). См. Https://wordpress.org/support/topic/wp_debug-notice-for-bp_setup_current_user.
1,2,9
При выборе из библиотеки мультимедиа основное изображение теперь извлекается браузером администратора WP, чтобы предотвратить несколько проблем (локально размещенные блоги, блоги, защищенные тем или иным образом и т. Д.).
1,2,8
Плагин
успешно протестирован на WordPress 4.1.
1,2,7
Исправление для сайтов WordPress, размещенных в Windows.
1,2,6
Плагин теперь совместим с мультисайтом.
1,2,5
Исправление для страницы входа: код значка не был введен на этой конкретной странице.
1.2.4
Удалите сообщения отладки, чтобы избежать ложных срабатываний в журнале ошибок.
1.2.3
Уведомления об обновлении можно закрыть раз и навсегда.
Новая страница настроек для включения / отключения уведомлений об обновлениях.
1.2.2
Исправление ошибки 403 в службе хостинга HostGator (https://wordpress.org/support/topic/403-error-when-generating-favicon).
1.2.1
Исправлено удаление плагинов и проверка обновлений.
1.2.0
Плагин теперь предупреждает пользователя, когда RealFaviconGenerator был обновлен, и значок должен быть сгенерирован снова.
1.1.1
Использование API перезаписи отключено. Файлы Favicon больше не находятся в корневом каталоге блога.
1.1.0
Запустите средство проверки значков RealFaviconGenerator из интерфейса администратора.
1.0.7
Отключить значок Genesis по умолчанию, если он настроен в FbRFG.
1.0.6
Улучшено управление ошибками во время установки значка.
1.0,5
Не пытайтесь переписать URL-адрес файлов значков, если .htaccess недоступен для записи.
1.0.4
Возможность не перезаписывать URL-адрес файлов значков, даже если это возможно.
1.0.3
Синтаксис кода плагина изменен для соответствия более старым версиям PHP.
1.0.2
URL-адрес обратного вызова был слишком длинным для некоторых серверов. Он был сокращен.
1.0.1
Настройки администратора Favicon теперь находятся в меню «Внешний вид».
Исправление при загрузке пакета favicon.
Исправление в управлении ошибками при установке значка.
1,0
Начальная версия.
,
No related posts.