Как сделать круглый фавикон
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 используется не только в результатах поиска или в браузере, поэтому важно отнестись к этому значку со всей ответственностью.
Фавикон: что это такое, как его сделать и установить на сайт
Всем привет! Сегодня расскажу, что такое фавикон для сайта, каких форматов и размеров он бывает. Какой размер иконки лучше выбрать и почему. Научу создавать фавиконы с помощью онлайн сервисов. Покажу где можно бесплатно скачать уже готовые фавиконки различных размеров и форматов. И конечно разберем варианты установки фавикона на сайт. А в конце вы узнаете, как проверить правильно ли установлен favicon на сайте.
Для начала я перечислю несколько веских причин почему следует обязательно установить эту иконку на ваш сайт:
Ваш ресурс становится узнаваемым пользователями что способствует увеличению кликабельности в поисковой выдачи и в том случае если у пользователя открыто много вкладок в браузере.
Сайт начинает вызывать доверие не только среди пользователей, но и среди поисковых роботов.
Вот, например, Яндекс считает ошибкой отсутствие фавикона значит в отношении сайта могут быть приняты штрафные санкции в виде понижения в поисковой выдаче, а как следствие падение трафика.
Возможная проблема в Яндекс.Вебмастере при отсутствии фавикона
Поэтому я считаю, что и речи быть не может о том, чтобы не устанавливать фавикон на сайт.
И думаю вы со мной согласитесь, прочитав эту статью до конца.
Что такое фавикон для сайта
Каждый вебмастер, создавая свой сайт хочет, чтобы он выделялся среди миллионов других сайтов, находящихся в поисковые выдачи.
И помочь в этом в этом сможет небольшая иконка, которая среди вебмастеров, называется favicon.
Favicon (фавикон) – это картинка размер которой начинается от 16×16 пикселей, и которая в большинстве случаев создается в формате «ico.» и отображается в выдаче поисковых систем в снипете и на вкладке браузеров.
Фавиконы в поисковой выдачи Яндекса
Favikon на вкладке браузера
Но с развитием интернет-технологий стало возможным использование других форматов этих иконок:
Но эти форматы пока поддерживают не все браузеры поэтому я рекомендую именно формат «ico» и размер фавиконки не менее 48×48 пикселей.
Почему именно такой размер? Все очень просто.
В рекомендациях гугла указан минимальный размер именно 48×48 пикселей и не рекомендовано устанавливать на сайт иконки меньших размеров так как они не будут показываться в мобильной версии поисковой выдачи.
А в рекомендациях Яндекса указано что иконка может иметь размер от 16×16 пикселей до 120 х120.
Поэтому вариант фавиконки от 48×48 пикселей устроит обе поисковые системы.
Как сделать фавикон
Для начала подберем квадратную тематическую картинку желательно без мелких деталей. Формат этой картинки может быть любого из следующих форматов jpg, jpeg, png.
Картинку вы можете найти в интернете или заказать на бирже фриланса чтобы ее нарисовали.
На этом сайте где вы читаете статью я использовал в качестве фавикона логотип который мне рисовал веб-дизайнер.
Фавикон и логотип на сайте webnub.ru
А для сайта, на котором я все показываю я подобрал вот такую тематическую картинку размером 512×512 пикселей в формате png.
Картинка с изображением мозга
Почему именно такого размера вы поймете, когда я буду описывать варианты установки фавикона.
А дальше с помощью сервиса онлайн-генератора фавиконов такие сервисы еще называют – favicon generator, преобразуем картинку в нужный формат и размер.
Создание фавикона онлайн
Переходим на сервис PR-CY по ссылке https://pr-cy.ru/favicon/ и нажимаем «Выбрать»
Генератор favicon на сервисе PR-CY
Находим на компьютере нашу картинку выбираем ее и нажимаем «Открыть»
Процесс загрузки картинки в сервис генератор favicon
После загрузки картинки жмем «Создать favicon»
Процесс создания фавиконки онлайн
Далее сервис покажет, как будет выглядеть наша иконка в браузере, и мы можем скачать архив с готовым фавиконом.
Распаковываем архив и видим, что в папке у нас две картинки. Нам нужна будет размером 48×48 в формате «ico»
Готовый фавикон в формате ico
Если нужен другой размер фавиконки то здесь лучше воспользоваться сервисом конвертором изображений.
Там все просто загружаете картинку на сервер выбираете нужный для вас формат и жмете «Конвертировать». После конвертирования картинки она автоматически загрузится на ваш компьютер.
Вот ссылки на пару таких сервисов:
Где скачать фавикон для сайта бесплатно
Для тех, кто хочет получить уже готовую фавиконку есть сервисы в которых собираются целые бесплатные библиотеки этих иконок. Доступны они в различных форматах. Заходи выбирай и скачивай.
Вот один такой сервис icon-icons.com у него есть такая библиотека.
Переходим на главную страницу по ссылке https://icon-icons.com/ru/ и в поле поиска вводим слово, ассоциирующее с нужным для вас изображением.
Я для примера введу слово «мозг» и нажимаю «поиск».
Форма поиска картинок в сервисе icon-icons.com
Откроется страница с множеством готовых фавиконов. Остается только выбрать подходящую и нажать на нее.
Результаты поиска картинок в сервисе icon-icons.com
На следующей странице выбираем подходящий размер и нажав на нужный формат иконки она загрузиться на компьютер.
Выбор параметров фавиконки
Дальше пора приступать к установке ее на сайт.
Как установить фавикон на сайт
После того как картинка готова ее нужно установить на сайт. Сделать это можно несколькими способами:
Загрузка в корневой каталог сайта
Переходим на хостинге Mchost в раздел сайты и открываем «Файл менеджер»
Файл менеджер в панели управления сайтами на Mchost
Нам откроется корневая директория нашего сайта. Внизу находим кнопку «закачать файл» и нажимаем на нее.
Корневая директория сайта
Нам откроется функционал загрузки файлов. Выбираем загрузка с компьютера и жмем «Выберите файл». Откроется проводник Windows, в котором переходим в компьютерную папку куда вы сохраняли готовую фавиконку. Выделяем картинку и жмем открыть.
Процесс агрузки файла в корневую директорию сайта
И после этого жмем закачать.
Поледний этап закачки файла
Проверяем директорию видим, что файл закачен.
Фавикон в корневом каталоге сайта
Открываем сайт в браузере и проверяем. Не забываем почистить кэш в браузере. Как видим иконка у меня там, где и должна быть.
Фавикон сайта igrymozga.ru
Если вдруг фавиконка не отображается. Это бывает в очень редких случаях:
Для решения этой проблемы нужно, в файл header.php нашей темы добавить перед закрывающимся тэгомспециальный код:
В ВордПресс переходим в административную панель управления в раздел «Внешний вид» «Редактор тем»
Переход в редактор тем в WordPress
Здесь с левой стороны ищем наш файл и нажимаем на него. Нам откроется код где находим конструкцию, заключенную в тег, вставить в нее наш код и нажать «Обновить файл»
Редактирование файла header
Нужно запомнить. Если у вас установлена тема ВордПресс для которой выходят обновления, этот код придется вставлять каждый раз, когда обновляется ваша тема так как обновление происходит путем замены файлов.
Корневой каталог простого сайта
Вставка кода для в файл index.html
Или через один из файловых менеджеров, например, FileZilla соединившись с хостингом использовав протокол FTP.
Как вставить через настройки темы WordPress
Есть еще один способ установки фавикона. Для этого нам понадобится квадратная картинка размером не менее 512×512 пикселей.
Поэтому я изначально подбирал картинку именно такого размера.
Для установки переходим в консоль управления и открываем настройки темы. Находятся они «Внешний вид» «Настроить»
Переход в настройки внешнего вида темы WordPress
Далее в меню с лева открываем «Свойства сайта»
Свойства сайта в меню настроек темы root
Здесь нажимаем «Выберите иконку сайта»
Нам откроется библиотека файлов где нужно перейти в раздел «Загрузить файлы» и нажать «Выберите файлы»
Загрузчик файлов в WordPress
Откроется процесс загрузки картинок с компьютера. Выбираем нужную картинку и жмем «Открыть»
Процесс загрузки файлов с компьютера
И далее в библтотеке файлов жмем «Выбрать»
Выбор картинки в билиотеке файлов
Затем сохраняем изменения нажав «Опубликовать»
Сохранение изменений в настройках сайта
А теперь давайте я покажу как проверять правильность установки фавиконки.
Как проверить фавикон сайта
Прежде чем проверять нужно знать несколько вещей:
Результататы десктопной поисковой выдачи Google
И так это запомнили теперь давайте приступим непосредственно к проверкам.
Я выделяю среди них четыре основных:
Визуальная проверка
Открываем сайт в различных браузерах и смотрим отображается ли иконка в верхней части браузера.
Отображение фавикона в Яндекс.Браузере
Отображение фавикона в Google Chrome
По прямой ссылке
Для этого нужно в браузере перейти по ссылки ведущею непосредственно на загруженную нами картинку.
У меня ссылка будет такая https://igrymozga.ru/favicon.ico. Если вы делали все по моей инструкции, то замените домен на свой.
Отображение иконки сайта при переходе по прямой ссылке
В базах Яндекса и Google
Этот способ подходит для проверки добавлен ли ваш фавикон поисковыми роботами в базу или нет.
Для Яндекса это будет вот такая ссылка:
Для Google будет такая:
Незабываем в ссылки вставлять ваш домен.
Если после перехода по ссылке отображается ваш фавикон то значит специальный робот поисковиков нашел его и добавил в свою базу.
В Яндекс.Вебмастере
Как я уже писал в начале статьи яндекс считает ошибкой отсутствие фавикона. Посмотреть есть ли эта ошибка для вашего сайта можно после того как вы добавите его в Яндекс.Вебмастер перейдя в раздел «Диагностика сайта».
Яндекс.Вебмастер раздел диагностика сайта
Заключение
Воспользовавшись одним из способов установки фавиконки, вы сделаете ваш сайт еще более узнаваемым в интернете.
А также избежать неприятностей, которые могут возникнуть так как я уже говорил, что Яндекс считает ошибкой его отсутствие.
Google конечно не информирует о том, что не установлена иконка, но все-таки рекомендует их устанавливать. А это значит, что отсутствие этой небольшой картинки тоже может повлечь со стороны этой поисковой системы определенные действия, о которых вы даже не узнаете.
Поэтому установив фавикон, вы дадите понять поисковым системам что придерживаетесь их рекомендациям тем самым повысив их доверие к вашему ресурсу.
А пользователи, которые хоть раз посетили ваш сайт зайдут на него обязательно еще раз встретив знакомую иконку в поиске.
На этом сегодня все. Делитесь статьей в социальных сетях. Задавайте вопросы в комментариях. Подписывайтесь на обновления блога. Всем пока.