Как сделать для сайта ico
Создание favicon для сайта 2020
Что такое favicon и для чего он нужен?
Favicon – это значок (иконка), который отображается во вкладке браузера, закладках, а также в сниппетах результатов поиска.
Favicon играет важную роль в веб-приложениях. Он может улучшить внешний вид сайта в выдаче, повышает узнаваемость вашего сайта, помогает пользователю быстро найти необходимую страницу в закладках и вкладках.
Кроме того, пользователь может добавить страницу вашего сайта на главный экран телефона или сохранить как веб-приложение. В таком случае с помощью favicon можно быстро найти сайт среди большого количества других приложений.
Какой формат использовать для favicon?
Раньше в качестве основного формата использовали ICO. Особенность данного формата – мульти-размерность. Данный файл может хранить в себе несколько размеров иконки. На смену ICO пришел формат PNG. ICO все еще поддерживаемый, но большинство современных браузеров выбирают PNG формат иконки, который легче. Некоторые браузеры не могут выбрать правильный значок в файле ICO, что приводит к неправильному использования значка с низким разрешением.
О каких платформах пойдет речь в этой статье?
Десктопные браузеры
Начнем, пожалуй, с классического десктопа.
Как было упомянуто ранее, формат ICO сегодня является устаревшим, но это не значит, что про него нужно забыть. Формат ICO может спасти вашу иконку и корректно отображать favicon в некоторых случаях. Например, до 11 версии IE PNG-формат не поддерживается. Поэтому для IE10 и младших версий нужно использовать старый формат ICO. В таком случае желательно использовать следующую комбинацию ICO и PNG форматов:
Для создания мульти-размерной иконки ICO можно использовать сервис-конвертер icoconvert. При генерации иконки необходимо выбрать следующие размеры: 16х16, 32х32, 48х48 (highest resolution icon).
Иконки PNG имеют следующие размеры: 16х16, 32х32, 96х96, 120х120. Зачем иконка 120х120? Яндекс Справка сообщает, что может воспользоваться иконкой данного размера.
Если обратить внимание на значение rel (тип ресурса), то icon – учитывается большинством браузеров, а shortcut icon – учитывается браузером IE.
Chrome на Android
Android ожидает увидеть значок 192х192 в формате PNG, alpha-канал (прозрачность) приветствуется.
Android Chrome полагается на манифест веб-приложения. Любой сайт может использовать манифест для того, чтобы ссылаться на некоторые значки.
Сам файл манифеста формата json и объявляется следующей строкой:
Файл манифеста для Android Chrome можно сгенерировать с помощью сервиса RealFaviconGenerator.
Иконки должны иметь следующие размеры: 72х72, 96х96, 144х144, 192х192, 512х512 в формате PNG, прозрачность приветствуется. Так как иконка может иметь прозрачный фон, то в манифесте можно указать цвет с помощью background_color.
Стоит отметить, что на телефоне пользователь имеет возможность сохранить страницу браузера на главный экран. Это будет просто ссылка на страницу вашего сайта, подтянется иконка с названием android-icon-192×192.png, которая объявлена у вас в коде.
Если же подключить к сайту манифест, то при открытии страницы пользователю может быть предложено сохранить сайт в качестве приложения. В данном случае вы имеет возможность объявить визуально ту же иконку (android-icon-192×192.png) или переделать дизайн иконки для приложения под свои нужды и объявить в манифесте с соответствующими размерами.
Иконка закладки в iOS (PWA)
iOS Safari ожидает увидеть apple touch icon. Это иконка PNG формата 180х180, без alpha-канала (без прозрачности). Углы иконки будут автоматически скруглены, что упрощает создание apple touch icon.
Пользователи iOS также могут добавить сайт на главный экран, и он будет выглядеть как приложение. Такая ссылка отображается в виде значка и называется Web Clip.
Нижеперечисленные размеры иконок предназначены для поддержки различных устройств, например, для iPhone и iPad:
В коде нужно добавить атрибут rel=«apple-touch-icon» и указать размер с помощью sizes.
Если на сайте нет значка, размер которого является рекомендованным для устройства, то будет использована сама близкая по размеру иконка большего размера. Основная apple touch icon это иконка размером – 180х180. Остальные устройства могут уменьшать иконку.
При создании иконки не забывайте об отступах. Они должны быть не менее 4px со всех сторон. Это необходимо, чтобы ваша иконка не обрезалась, так как значок приложения в iOS имеет скругленные углы.
Следует отметить, что устройства под iOS не единственные, которые ищут apple touch icon. Некоторые браузеры, вроде Android Chrome, могут использовать apple touch иконки, так как они встречаются чаще других PNG иконок высоких разрешений.
macOS
В Mac OS дела обстоят совершенно иначе. Если пользователь попробует сохранить сайт на рабочий стол, то вместо иконки сайта будет отображен скриншот страницы.
Чтобы добавить иконку необходимо использовать формат SVG, который позволит сделать маску иконки. Данная иконка будет отображена при закреплении вкладки в Safari.
В коде нужно добавить атрибут rel=«mask-icon». Сама SVG-иконка должна быть черного цвета. Цвет иконки задается в атрибуте color=»#e52037″.
SVG-иконка используется в закрепленной вкладке (pinned tab – no focus) в монохромном виде. При наведении (pinned tab – focus) иконка будет закрашена в цвет, который имеет атрибут «color». В touch bar также передается цвет атрибута «color».
При создании иконки необходимо убрать все имеющиеся тени, сделать ее плоской и простой. Упростить иконку до одного объекта можно с помощью операций «Union» и «Flatten». Данные операции легко применить в программе Figma.
Если закрыть глаза на создание иконки-маски, то браузер просто отобразит первую букву домена вашего сайта.
Windows
С Windows нужно немного запариться, чтобы сделать хорошо.
Для IE10 и более младших версий необходимо использовать формат ICO, так как до IE11 формат PNG не поддерживался.
С приходом IE11 и Windows 8.1 появилась возможность закреплять сайты в виде живых плиток. Для маленьких плиток используется по умолчанию favicon, а для больших и широких плиток необходимо задавать изображение конкретного размера. Это можно сделать с помощью добавления тегов метаданных в разметку сайта или создать browserconfig.xml (файл конфигурации браузера).
Пример добавление тегов метаданных в разметку веб-сайта для больших плиток:
Данной строкой мы указываем цвет фона плитки:
Можно указать имя вашего веб-сайта:
Что такое browserconfig? Это XML-документ, в котором перечислены различные значки, соответствующие пользовательскому интерфейсу Metro UI.
Чтобы подключить файл browserconfig в разметке необходимо добавить следующую строку в head:
Сам файл будет выглядеть следующим образом:
В browserconfig файле определены изображения для различных размеров плитки.
Microsoft рекомендует брать больший размер изображений в целях поддержки экранов с высокой плотностью пикселей.
В следующем списке приведены некоторые рекомендации по использованию различных размеров:
Подготовка favicons
Перед тем как добавлять ваши иконку в корневую папку сайта необходимо их подготовить. Исходные размеры иконок не очень большие, но можно их сжать с наименьшей потерей качества.
Например, в моем случае вес всех изображений был 200кб, после сжатия 50кб. Качество изображений практически не изменилось. Вы можете воспользоваться любым удобным сервисом для сжатия картинок. Я использовала iloveimg.
Заключение
Последовательность подключения в разметке веб-сайта:
С помощью последней строки кода «theme-color» можно закрасить адресную строку и строку уведомлений в любой цвет. В значении content задается цвет.
Для проверки иконок вашего сайта воспользуйтесь RealFaviconGenerator. Данный сервис покажет, как отображаются ваши иконки на разных платформах, подскажет где и какие могут быть проблемы.
Кроме того, данный сервис может сгенерировать необходимые размеры, форматы иконок и код. Но необходимо проверять исходники на наличие всех рекомендуемых размеров для корректного отображения на различных устройствах.
Урок 50 Как сделать иконку (фавикон, favicon) для блога
В сегодняшнем уроке я буду Вам рассказывать об иконках Favicon (фавикон). Я Вам покажу как сделать favicon.ico для сайта (или для блога, тут без разницы) и покажу как можно вставить фавикон.
Наверняка, многие еще не знают о том, про какое “чудо” я говорю. Проще говоря, Favicon (фавикон) это картинка (иконка), которая стоит в браузере перед адресом сайта. Наглядно покажу Favicon моего блога:
Эта иконка является своеобразным логотипом Вашего блога. Поэтому к созданию фавикона нужно отнестись со всей ответственностью. Помните, он может выделить Ваш блог среди других.
План урока:
Как создать Favicon (фавикон) с нуля
Есть один очень удобный сервис. Он имеет адрес favicon.cc. Этот сервис по построению фавиконок выглядит так:
Теперь нам нужно просто сохранить иконку сайта на свой компьютер. Для этого нужно нажать на кнопку “Download Favicon”:
Создание favicon (фавикон) из готового изображения
Допустим Вы не хотите создавать с нуля иконку для своего сайта, а хотите сделать ее из уже готового изображения. В этом случае для Вас будет удобен сервис для создания фавиконки favicon.ru.
Сервис на русском языке, поэтому у Вас не должно возникнуть проблем. Просто указываете картинку, которую Вы хотите видеть в роли иконки Вашего сайта (кнопка “Обзор”), потом нажимаете “Создать favicon.ico”, а дальше уже “Скачать favicon.ico”.
Список сервисов с готовыми favicon (фавикон)
Также можно просмотреть уже готовые иконки, попробовать найти что-то подходящее. Я предлагаю следующие сервисы:
Как сделать Favicon (фавикон) для сайта
После того, как мы создали фавиконку, нужно ее “прикрепить” к сайту. Для этого нужно сделать следующее:
Как видите, все “встало” правильно. Надеюсь у Вас тоже проблем не возникло. Будут вопросы, пожалуйста, задавайте их в комментариях. А то мне на почту ссыпатся письма с вопросами технического характера, я не могу успевать отвечать на все.
P.s. Постоянные читатели, наверное, заметили, что я уроки WordPress стал давать немного реже. Возникла небольшая проблема со временем. До какого периода это продлиться? Честно, не знаю. Но минимум раз в неделю буду стараться писать уроки (по возможности – чаще). Поэтому лучше Вам, уважаемый читатель, для удобства подписаться на RSS блога Новичка.
P.s.s. Открыл новый раздел Ученики. Новички, которые создают блог с нуля, это отличная возможность “засветиться”!
Следующий урок: Урок 51 Регистрация в поисковиках.
Favicon для сайта (фавиконка)
Но как сделать так, чтобы пользователи узнавали сайт, ещё даже не попав на его страницы, прямо в поиске или в закладках? Для этого нужно использовать оригинальную иконку – favicon (фавикон).
Favicon – это специальный значок, который соотносится с web-сайтом или отдельной его страницей (страницами) и отображается рядом с названием в закладках, на активной вкладке или в других элементах интерфейса браузера, а также используется для дополнительной уникализации сайта в различных web-сервисах (в том числе в результатах поиска).
Слово «favicon» образовано от фразы «favorite icon», в русском варианте – «значок для избранного». Дело в том, что изначально фавиконки использовались для отслеживания количества добавленных закладок (браузер обращался к файлу иконки только тогда, когда пользователь создавал у себя закладку сайта, соответственно, по количеству обращений к иконке можно было узнать количество добавлений в «Избранное»). Современный алгоритм с favicon существенно отличается от изначального, браузер хранит значок у себя в кэше, а обращения к нему производятся при каждой загрузке страниц.
И, если раньше достаточно было загрузить специальный файл в корень сайта, то сейчас фавиконку можно переопределить для каждой отдельной страницы или даже добавить в нее элементы интерактивности (например, количество непрочитанных сообщений, другие виды счётчиков, эффекты анимации и т.д.).
Для чего нужен Favicon
Подведём итог, для чего может пригодиться favicon:
Форматы и размеры фавиконок
Во времена выхода на рынок браузера Internet Explorer 5 (1999 год) было достаточно сгенерировать один единственный файл favicon.ico и загрузить его в корень вашего сайта.
Сегодня поддержка этого устаревшего формата имеется во всех современных браузерах, и если вы поступите «как и раньше», то есть создадите нужный файл и «закинете» его к себе на сервер, то браузер подхватит иконку и отобразит на вкладках или в закладках.
Но почему же формат устарел?
Дело в том, что от этого файла требовалось очень низкое разрешение (16×16 точек), которого в настоящий момент будет катастрофически «не хватать». Представьте себе, как будет выглядеть значок сайта, если вы сделаете закладку на устройстве Apple с Retina-дисплеем? Как мыло мыльное. Нужно как минимум изображение 120×120 пикселей, а лучше вообще 152×152.
Например, актуальные версии браузера Opera ожидают увидеть на сайте файл фавиконки с разрешением 260×260 точек.
Наиболее удобным можно назвать векторный формат SVG, который не привязывается к разрешению файла и может масштабироваться при увеличении/растягивании без потери качества, но он поддерживается не всеми платформами (даже Google Chrome до 80 версии с ним не работал).
Если у вас macOS, то для закрепления вкладки на панели нужно сгенерировать отдельный монохромный значок, так как цветные не поддерживаются или будут заменены автоматически на первый символ доменного имени.
Если попытаться добавить значок в закладки ПК и вынести его в интерфейс Metro (ОС Windows 8/8.1), то потребуется задать цвет фона (для заливки). Аналогичным образом работают закладки на рабочем столе Android (нужен прозрачный логотип, вписывающийся в круг, и соответствующий ему цвет заливки; рекомендуемый размер значка – 192×192 точек).
Поэтому, когда речь заходит о каких-либо универсальных форматах и разрешениях файлов, то следует понимать, что единого решения, подходящего для всех платформ, не существует. В каждом отдельном случае нужно идти на какие-то компромиссы и понимать, что отдельные платформы, особенно устаревшие, вы поддерживать не будете.
И, если конкретные требования к значкам web-приложений можно узнать в документации разработчиков для каждой выбранной платформы (iOS, macOS, Windows 8/8.1/10, Android и т.д.), то владельцам сайтов нужно сконцентрироваться как минимум на поддержке популярных браузеров и поисковых систем.
Официальные требования Яндекса к фавиконкам:
Чем большее разрешение для растровой графики вы выберете, тем чётче и красивее будет выглядеть фавиконка.
Если вам очень понравилось описание формата SVG, и вы хотите проверить, поддерживается ли формат нужными вам браузерами, используйте для тестов вот эту страницу. Если иконка на вкладке улыбается, SVG поддерживается, если не улыбается – SVG в данном браузере не работает.
Актуальную поддержку остальных форматов по наиболее популярным браузерам можно проверить здесь.
Как сделать фавикон своими руками
Для того, чтобы пользователи соотносили ваш значок с узнаваемым брендом, логично сгенерировать его на основе логотипа.
Получается, что для создания фавиконки вам нужно сначала создать логотип.
Сделать это можно в специальных онлайн-сервисах, обратившись к профессиональным дизайнерам (здесь потребуется сформулировать чёткое ТЗ и приготовиться к значительным расходам) или используя удобный редактор для растровой или векторной графики для самостоятельного креатива (нужен опыт и вкус). В качестве основы можно использовать векторные иконки, которые можно найти, например, здесь.
Но на первых парах, без опыта и профильных знаний, лучше довериться специальным онлайн-сервисам.
Онлайн-генераторы логотипов
На текущий момент в сети можно найти огромное множество сервисов, но многие из них работают на платной основе. Средняя стоимость пакета файлов, включая векторную графику и различную компоновку (для визиток, для бланков, для сувенирной продукции и т.п.), – от 1000 до 5000 руб.
Платные сервисы найти несложно. Ниже обозначим наиболее интересные варианты, в том числе с бесплатным скачиванием.
Wix Logo Maker
Canva
Canva позволяет генерировать сложные логотипы и короткие анимации. Есть доступ к большому количеству шрифтов и базе графических элементов. Бесплатное скачивание результата возможно в форматах MP4 (видео), GIF (анимированные изображения), PDF, JPG (размером не более 500*500 точек) или PNG (с белым фоном и не более 500*500 точек).
Logaster
Logaster качественный сервис для брендирования бизнеса. Здесь можно получить полный набор файлов для печати или для создания атрибутики. Но бесплатно можно сделать только небольшой логотип в формате PNG с фоном (с шириной не более 330 пикселей).
Чтобы получить растровую графику в большом разрешении или векторный формат SVG, придётся потратиться даже на бесплатных генераторах.
В качестве альтернативы онлайн генераторам логотипов можно рассмотреть классическое оффлайн программное обеспечение для мобильных платформ (поищите в магазине приложений для вашей платформы) или для PC/Mac.
Онлайн-генераторы favicon
Когда логотип будет готов, можно будет сгенерировать фавиконки самостоятельно с помощью графических редакторов (для этого могут подойти даже встроенные инструменты вашей операционной системы, если они есть). А можно воспользоваться специальными онлайн-сервисами.
Ниже – несколько примеров удобных генераторов favicon.
RealFaviconGenerator
RealFaviconGenerator позволяет создавать значки не только для всех web-браузеров, но и для других платформ. Всё, что нужно – загрузить свой логотип в высоком разрешении (минимум 70*70 пикселей, но лучше всего 260*260 точек) или в векторном формате (SVG). При желании можно отредактировать цвет фоновой заливки, добавить поддержку устаревших операционных систем, браузеров и т.д.
Кроме того, сервис позволяет задавать версию текущей иконки (на случай, если вы будете обновлять старую без потери контента), сжимать изображения (для более быстрой загрузки в браузере) и формировать коды и инструкции для подключения в разных средах (поддерживается HTML, Grunt, Node CLI, Rails и другие). Единственный недостаток этого сервиса – русский язык не поддерживается.
Favicon.cc
Favicon.cc интересный сервис, который позволяет создавать анимированные значки, формировать favicon на основе ваших изображений или рисовать/корректировать их вручную. Никакой регистрации или оплаты не требуется. Единственная проблема – сервис может формировать только изображения в формате ICO с разрешением 16*16 пикселей.
Favicon.by
Favicon.by аналогичный по функционалу favicon.cc (доступно рисование или импортирование своих изображений, разрешение ограничено 16*16 пикселей), но не умеет работать с анимацией. При скачивании можно поделиться результатом с другими пользователями сервиса.
Как добавить favicon на сайт
Типовая установка фавикон на сайт предполагает два основных действия:
Добавление специального тега в файлы шаблона или в структуру HTML.
В некоторых случаях, например, в премиум-темах для WordPress, могут быть встроенные инструменты для загрузки favicon (генерация разных разрешений и типов иконок не требуется, код уже встроен в шаблон).
Многие облачные платформы (онлайн-конструкторы сайтов) предъявляют собственные требования к формату и разрешению favicon, загрузка и настройка осуществляется в личном кабинете/специальных разделах редактора.
Если вы планируете ручное добавление кода в шаблон, то лучше всего воспользоваться генератором realfavicongenerator.net, он сформирует не только пакет необходимых файлов, но и HTML-код, который останется только вписать в нужное место.
Если вам нужна поддержка только браузеров, то достаточно загрузить изображение favicon и прописать следующий тег (внутри тега head):
Пояснения по параметрам:
Как поменять фавиконку
Если формат совпадает, изменилось только изображение, нужно просто заменить файл значка (или значков, если используется несколько вариантов). Тег менять не нужно.
Если поменялся и формат файла тоже, нужно актуализировать тег, чтобы он указывал на правильный формат изображения.
Обратите внимание! Поисковая система будет продолжать показывать старую версию иконки до тех пор, пока главная страница не будет переиндексирована. Этот процесс может занять несколько дней (до 2-х недель).
Выводы
У каждого сайта должна быть своя фавиконка. Она выступает в роли своеобразного идентификатора, повышает узнаваемость и позволяет выглядеть страницам в браузере достойно. Чтобы между вашим брендом и значком была прямая связь, лучше всего использовать логотип. Если логотипа пока нет, его обязательно нужно создать, ведь это тоже важная часть узнаваемости вашего сайта.
Favicon используется не только в результатах поиска или в браузере, поэтому важно отнестись к этому значку со всей ответственностью.