Как сделать красивый фавикон
SEO Маяк
Блог Виталия Кириллова | Все о создании,
продвижении сайтов и заработке в интернете
Создание и продвижение сайтов, заработок в интернете
Как сделать красивый фавикон. Как установить фавикон на сайт
Всем привет! Сегодня я решил сделать для своего блога SEO-Mayak.com новенький фавикончик и заодно, в рамках рубрики «WordPress для новичков«, я расскажу о разных онлайн сервисах, с помощью которых можно создать уникальную картинку или сгенерировать фавикон из какого-нибудь готового изображения.
И конечно, как всегда, во всех подробностях опишу, в принципе не сложный, процесс установки фавикона на сайт.
Что такое фавикон и зачем он вообще нужен? Фавикон по англ. пишется как Favicon и переводится дословно — «Любимая иконка», но в Викопедии приводиться другой перевод — «Значок для избранного». Фавикон можно сравнить с логотипом, уменьшенным в несколько раз и имеющим расширение .icon.
Отображается фавикон перед URL сайта в адресной строке любого браузера, а также на панели закладкок и в поисковой выдаче рядом с заголовками.
Фавиконы бывают в виде обычной или анимированной картинки, а еще в виде зD изображения, на это уже добиваются средствами Фотошоп.
Фавиконы в виде обычной картинки
Сразу хочу сказать, что желательно использовать для создания фавикона уникальное изображение с равными пропорциями сторон и еще не все картинки подходят для фавиконов, так как уменьшение их размера до 16х16 или 32х32 пикселей, делает мелкие элементы на изображении неразборчивыми.
Давайте рассмотрим такой пример. Вот хочу я создать сайт по тематике — «Туризм и путешествия», так какую же картинку я могу подобрать для фавикона. Буду руководствоваться двумя ранее известными мне правилами.
Правило №1.
Правило №2.
После не долгих поисков я нашел вроде бы подходящую картинку с изображением воздушного шара соответствующую вышеперечисленным правилам:
Достаточно выбрать изображение и загрузить его на сервер, затем выбрать формат и нажать кнопочку — «Greate Icon»:
И после обработки получаем два две картинки 32х32 и 16х16. Одна картинка это иконка для рабочего стол а вторая для адресной строки, закладок и поисковых систем.
Если на картинке размером 32х32 еще можно разобрать силуэт воздушного шара, то на изображении форматом 16х16 уже плохо понятно, то ли это какае-то луковица или перевернутая груша 🙂
Из этого следует. что существует еще одно требование к картинке для фавикона.
Правило №3..
Поэтому я немного опустился на землю и нашел другое изображение. Давайте попробуем его:
Отлично, посмотрим, что получается после обработки:
Ну вот, совсем другое дело. Скачиваем фавикон на свой компьютер нажимая — «Download FavIcon».
Для тех, кто хочет сделать фавикон для сайта из собственной фотографии надо знать: чтобы получилось хоть сколько-нибудь узнаваемо человеческое лицо, картинка должна быть не менее 48×48 пикселей.
Как сделать анимированный фавикон
На левую панель вообще не обращаем внимания, в принципе сервис уже готов к работе и осталось выбрать цвет или цвета будущего рисунка. Я для примера нарисую кастрюлю 🙂 С помощью зажатой левой клавиши мышки водим по квадратикам и они закрашиваются в нужный цвет, а если надо стереть лишнее, то нажимаем по квадратику правой кнопкой мыши. Я покажу Вам в качестве примера простенькую анимацию, состоящую всего из 2 изображений. Первое изображение:
После того, как рисунок готов нажимаем — «Использование анимации» и выпадет панель со следующими функциями:
Выбираем — «Добавление новых кадров» и уже на чистом поле рисуем вторую часть анимации:
Чуть ниже можно посмотреть на результат и скачать готовый файл:
Как выглядит мой «шедевр»? 🙂
Конечно это самый простой пример анимации, а есть анмированные фавиконы состоящие и 6 эпизодов, но это уже «мультфильмы» какие-то.
Как сделать фавикон в Photoshop
Кто умеет пользоваться фотошоп, тому не составит труда нарисовать или сделать из готового изображения красивый фавикон для своего сайта.
Как установить фавикон на сайт
Установка фавикона минутное дело и описывать даже особо нечего. Значит, у нас уже есть файл размером 32х32 пикселя и на надо всего лишь закачать его в корень сайта с помощью FTP клиента, туда где находятся папки wp-admin, wp-content и wp-includes. Кстати совсем не обязательно помещать файл в корень блога, можно закинуть его и в другое место, но тогда надо правильно указать путь к нему в файле header.php.
Если мы все же поместили файл с фавиконом в корень сайта, то в файле header.php перед закрывающим тегом надо прописать следующее:
Вот в принципе и все, фавикон на сайт установлен!
Сервисы готовых фавиконов
Кому лень самому заморачиваться, у тех есть вариант выбрать и скачать готовый фавикон со следующих сервисов:
iconj.com — большой выбор фавиконов.
audit4web.ru — тут тоже много иконок.
Чтобы узнать больше, подпишитесь на обновления блога.
С уважением, Виталий Кириллов
Как создать фавиконку и подключить ее к сайту
Favicon (сокращение от Favorites Icon) — иконка с логотипом или первой буквой названия сайта, которая отображается на вкладках браузера, в списке закладок и в интерфейсе некоторых поисковых систем.
Этот мини-логотип, по сути, олицетворяет сайт и помогает пользователям быстрее отыскать его среди сохраненных страниц или в бесконечном списке открытых вкладок. Чтобы облегчить потенциальному посетителю эту задачу, каждому веб-ресурсу, от мелкого блога на WordPress до интернет-магазина с огромной аудиторией, нужны наглядные и узнаваемые Фавиконки.
Так Favicon выглядят на вкладках в браузере Safari:
А вот так в поисковой выдаче Яндекса:
Такие значки должны опираться на стилистику бренда, поэтому важно, чтобы они были с ним тесно связаны.
Вот, как это реализовано у Apple и Яндекса:
Далее разберемся, как сделать иконку сайта и подключить ее к нему.
Характеристики значков
Взять любую понравившуюся картинку и с ходу использовать ее как Favicon не получится. Надо соблюсти два несложных требования: выбрать подходящее расширение и размер.
Формат
Тут есть из чего выбирать:
.svg не поддерживается в старых браузерах для ПК и некоторых Android-браузерах
Размер
Здесь тоже есть некие стандарты, но они разнятся от системы к системе. Часто используются размеры:
Как сделать иконку для сайта HTML?
В лучшем случае вам все нарисует грамотный дизайнер, но если под рукой такого не нашлось, можно и самому склепать значок.
Рисуем Favicon в Sketch или Photoshop
Значок можно нарисовать там же, где рисуются и другие части интерфейса. Например, Photoshop или Sketch. Покажу, как это работает на примере Sketch:
То же самое можно сделать в Photoshop или условном Pixelmator, разве что интерфейсы настройки изображений и экспорта будут отличаться.
Преобразуем готовое изображение в фавиконку
Рисуем значок в браузере
Если нет Фотошопа или просто не нужен какой-то сложный дизайн, то можно на скорую руку нарисовать себе лого на сайте Favicon.cc. В этом случае все запредельно просто:
Тут же можно посмотреть, как нарисованная иконка выглядит в адресной строке браузера.
Конвертируем текст или эмоджи в значок
Есть вариант еще проще — сервис Favicon.io. На нем есть три конвертера: из картинки, из текста или из эмоджи в значок.
Но я попробую скачать иконку с эмоджи:
Как подключить Favicon к сайту?
Теперь, когда у меня есть фавиконка (неважно откуда), надо ее подключить. Для этого надо вставить в html-код основной страницы строчку, в который будут указаны тип ресурса, адрес и тип данных.
АТРИБУТ
ЗНАЧЕНИЕ
icon указывает на тип используемого ресурса.
Здесь указывается путь до файла. Можно ввести ссылку до сервера или внешнего каталога.
Можно вписать несколько разных значков. Браузер все равно сам выберет подходящую иконку. Такой подход предлагается в Favicon.io.
Это самый простой способ. Естественно, файл со значком может называться как угодно и располагаться на внешнем сервере. Главное, корректно оформить код на сайте.
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 используется не только в результатах поиска или в браузере, поэтому важно отнестись к этому значку со всей ответственностью.