Как создать фавикон самостоятельно
31710 2
How-to | – Читать 9 минут |
Прочитать позже
ЧЕК-ЛИСТ: ТЕХНИЧЕСКАЯ ЧАСТЬ — ИСПРАВЛЕНИЕ
Секрет успешного сайта — в мелочах, которые владельцы часто упускают. Для эффективного продвижения недостаточно одного SEO: сейчас все больше внимания уделяется тонкостям — элементам дизайна, которые ненавязчиво попадают во внимание читателя и быстро запоминаются. Один из таких элементов — favicon. В статье рассмотрим создание favicon различными способами.
Содержание
- Что такое favicon для сайта
- Зачем нужен favicon
— Технические требования к фавиконам - Как создать favicon онлайн
- Как добавить фавикон на сайт
- Распространенные ошибки
- FAQ
Заключение
Что такое фавикон для сайта
Favicon — это небольшая иконка, квадратное изображение с логотипом сайта, которое отображается во вкладке браузера и в закладках перед названием страницы:
Пример фавикона на сайте
А также в истории просмотров:
Фавиконы сайтов в истории браузера
В некоторых версиях браузера фавикон также появляется в адресной строке перед URL сайта. В выдаче Яндекса также отображаются фавиконы:
Фавиконы сайтов в Яндексе
Кроме логотипа, в фавикон для сайта иногда вставляют значок, символизирующий тематику ресурса, связанный с названием сайта, первую букву названия компании и т.п. Размер фавикона обычно составляет 32х32 или 16х16 пикселей.
Зачем нужен favicon
Иконка сайта играет важную роль в брендинге сайта. Лаконичная картинка помогает пользователю запомнить ресурс и обеспечивает его оригинальность.
Сайт без фавикона выглядит, как минимум, серо по сравнению с другими: вместо запоминающейся иконки стоит стандартный значок Windows, который использовался еще до изобретения плоского экрана.
Пример сайта без фавикона
Следует установить фавикон и по другим причинам, обеспечивающим ряд других преимуществ:
Доверие. Пользователь обычно обращает внимание в первую очередь на то, как сделан сайт. Насколько профессионально разработан дизайн и учтены детали. При прочих равных сайт без этой мини-иконки не будет вызывать такого доверия, как его конкурент, который учел эту небольшую деталь.
Узнаваемость. Favicon — это удобный поиск. Когда пользователь ищет нужную ему вкладку в браузере, страницу из закладок браузера или истории, первое, что бросается в глаза, — это иконка. Никто не обращает внимания на текст. Представим, что вы что-то ищите, когда в браузере открыто 20 вкладок: кроме иконки не будет видно практически ничего.
Фавиконы сайтов во вкладках браузера
Продвижение. Это преимущество применимо только к поисковику Яндекс. Страница без фавикона в поисковой выдаче просто сливается с белым фоном и никак не выделяется среди остальных. В топе выдачи редко можно встретить страницу без иконки.
Сайт без фавикона в выдаче Яндекса
Проверка фавикона в аудите Serpstat
Хотите узнать, как найти и обезвредить ошибки на сайте с помощью Serpstat?
Заказывайте бесплатную персональную демонстрацию сервиса, и наши специалисты вам все расскажут! 😉
Оставить заявку! |
Технические требования к фавиконам
В 2022 году, помимо стандартных иконок для браузеров, используют фавиконы для Android и Apple. Учитывая то, что браузеры загружают фавиконы в фоновом режиме, их большой размер не окажет негативного влияния на скорость загрузки сайта.
Формат фавикона различается в зависимости от того, для чего он предназначен:
- для устаревших браузеров: favicon.ico такого размера:16х16, 32×32;
- для современных браузеров: один фавикон SVG формата для светлой и темной версии. Большинство браузеров поддерживают SVG формат, который более эффективен для больших изображений;
- для устройств Apple: фавикон размера 180×180 в формате PNG;
- для устройств Android: фавикон 192×192 в формате PNG, используемый на главной странице сайта и 512×512 — для загрузки прогрессивных WEB-приложений.
Узнать, какие именно браузеры поддерживают современные форматы фавиконов можно с помощью сервиса Caniuse:
Сервис Can I Use для проверки поддержки различных фавиконов браузерами
Как создать фавикон онлайн
Чтобы сделать фавикон для сайта, не нужно быть дизайнером и иметь профессиональные навыки. Можно самостоятельно создать фавикон за пару минут с помощью специальных сервисов.
Все подобные сервисы предельно просты в использовании. Мы собрали несколько инструментов, с помощью которых вы быстро и бесплатно сделаете фавикон.
Pr-Cy.ru
Простой и понятный генератор: фавикон создается в два шага. Выбираем картинку на компьютере и превращаем ее в мини-логотип.
Be1.ru
Есть возможность задать разрешение картинки (16х16 или 32х32 пикселя). Просто выберите картинку и нажмите «Конвертировать».
Favicon.by
Подходит для тех, кто хочет самостоятельно создать favicon: генератор позволяет нарисовать иконку своими руками или загрузить уже готовый вариант с компьютера или стороннего сайта.
Logaster.ru
Многофункциональный онлайн-сервис дает возможность подобрать нужную тематику иконки в зависимости от сферы ее применения (спорт, бизнес, автомобили и т. д.), цветовую гамму логотипа. Сервис сгенерирует несколько разных, но оригинальных вариантов с учетом всех параметров. Также можно найти иконку, подкорректировать ее или скачать уже готовую.
Вы также можете заказать фавикон у дизайнера или сделать его в графическом редакторе, хотя это не самые дешевые и простые варианты.
Генератор фавикона Pr-Cy.ru
Как добавить фавикон на сайт
Чтобы картинка была видна на вкладке, ее нужно добавить с помощью файлового менеджера в корневой каталог сайта. Браузер сам найдет фавикон и выведет иконку на сайт. Для этого картинку нужно загрузить в формате 16х16. С автоматическим выводом формата 32х32 могут возникнуть трудности.
Однако для надежности при любом разрешении картинки рекомендуется вручную прописать вывод фавикона в HTML-коде страницы. Для этого:
Добавьте файл favicon.ico в корневую папку — каталог сайта.
Пропишите в коде HTML favicon в формате ico. Он выводится строкой shortcut icon:
<link href="http://ваш-сайт.ru/favicon.ico" type="image/x-icon"> <link rel="shortcut icon" href="http://ваш-сайт.ru/favicon.ico" type="image/x-icon">
Браузеры используют кэширование иконок, поэтому, если вам понадобится ее заменить, лучше поставить временный код:
<link rel="shortcut icon" href="http://www.yoursite.com/favicon.ico?v=2" />
Здесь значение v = 2 обозначает версию иконки. Увеличивайте его на единицу каждый раз, когда меняете картинку (v = 3, v = 4 и т.д.). Тогда браузер будет сразу отображать последнюю версию. После того, как вы определились с окончательным вариантом иконки, этот параметр можно смело удалять из кода.
Распространенные ошибки
Проверить, корректно ли работает фавикон в разных браузерах, можно используя онлайн-проверку для Яндекса и Google, доступную по указанным ниже ссылкам. Предварительно поменяйте «site. com» на название своего ресурса:
- Яндекс – https://favicon.yandex.net/favicon/site.com;
- Google – https://www.google.com/s2/favicons?domain=site.com
Проблемы в отображении фавикона могут быть связаны с такими причинами:
1. Отсутствует изображение фавикона в правильном формате в корневой папке сайта.
2. Неправильно прописан код фавикона на страницах ресурса.
3. Фавикон размыт или неуникален.
4. Файл с иконкой закрыт для сканирования поисковиками.
5. Сайт находится ниже 15 позиции в Яндекске — в этом случае фавикон не отображается.
6. Фавикон был загружен недавно — иногда на его отображение в выдаче может потребоваться несколько недель.
В каком формате сохранять favicon?
Стандартный фавикон, подходящий для всех версий браузеров, в том числе устаревших, сохраняется в формате ICO. Современные браузеры и мобильные устройства поддерживают также фавиконы PNG и SVG форматов.
Какого размера делать фавикон?
Стандартный размер фавикона 16×16 и 32×32. Для современных браузеров и мобильных устройств используются более крупные изображения:180×180, 192×192, 512X512.
Заключение
Favicon — это важный элемент любого сайта. Качественная, оригинальная картинка становится практически вторым лицом бренда. Фавиконы повышают узнаваемость сайта и ненавязчиво помогают пользователю запомнить ресурс, найти его среди множества других.
Чтобы создать иконку для сайта и установить ее, вам потребуется не более 10 минут. В сети достаточно много бесплатных онлайн сервисов с разным функционалом и выбором картинок, некоторые предлагают создать логотип самостоятельно.
«Список задач» — готовый to-do лист, который поможет вести учет
о выполнении работ по конкретному проекту. Инструмент содержит готовые шаблоны с обширным списком параметров по развитию проекта, к которым также можно добавлять собственные пункты.
Начать работу со «Списком задач» |
Serpstat — набор инструментов для поискового маркетинга!
Находите ключевые фразы и площадки для обратных ссылок, анализируйте SEO-стратегии конкурентов, ежедневно отслеживайте позиции в выдаче, исправляйте SEO-ошибки и управляйте SEO-командами.
Набор инструментов для экономии времени на выполнение SEO-задач.
Получить бесплатный доступ на 7 дней
Оцените статью по 5-бальной шкале
4.78 из 5 на основе 16 оценок
Нашли ошибку? Выделите её и нажмите Ctrl + Enter, чтобы сообщить нам.
Рекомендуемые статьи
How-to
Анастасия Сотула
Что нужно знать об оптимизации сайта под голосовой поиск
How-to
Анастасия Сотула
Как обновить версию протокола TLS на сайте
How-to
Анастасия Сотула
Что такое крауд-ссылки и крауд-маркетинг
Кейсы, лайфхаки, исследования и полезные статьи
Не успеваешь следить за новостями? Не беда! Наш любимый редактор подберет материалы, которые точно помогут в работе. Только полезные статьи, реальные кейсы и новости Serpstat раз в неделю. Присоединяйся к уютному комьюнити 🙂
Нажимая кнопку, ты соглашаешься с нашей политикой конфиденциальности.
Поделитесь статьей с вашими друзьями
Вы уверены?
Спасибо, мы сохранили ваши новые настройки рассылок.
Сообщить об ошибке
Отменить
Как сделать favicon.ico для сайта (фавикон)
В сегодняшнем уроке я буду Вам рассказывать об иконках Favicon (фавикон). Я Вам покажу как сделать favicon.ico для сайта (или для блога, тут без разницы) и покажу как можно вставить фавикон.
Наверняка, многие еще не знают о том, про какое “чудо” я говорю. Проще говоря, Favicon (фавикон) это картинка (иконка), которая стоит в браузере перед адресом сайта. Наглядно покажу Favicon моего блога:
Эта иконка является своеобразным логотипом Вашего блога. Поэтому к созданию фавикона нужно отнестись со всей ответственностью. Помните, он может выделить Ваш блог среди других.
План урока:
- Создание Favicon с нуля.
- Создание фавиконки из готового изображения.
- Сервисы с готовыми иконками для сайта.
- Прикрепление полученной иконки к сайту.
Как создать Favicon (фавикон) с нуля
Есть один очень удобный сервис. Он имеет адрес favicon.cc. Этот сервис по построению фавиконок выглядит так:
Чтобы нарисовать favicon достаточно выбрать цвет и просто рисовать. Если Вы нарисовали что-то, где-то не так, для удаления фрагмента рисунка выберите инструмент transparent (поставьте галочку) и “тыкайте” на пикселы (“квадратики”), которые нужно убрать:
Я нарисовал следующий фавиконку:
Больше всего в favicon.cc мне понравилось то, что можно мгновенно видеть результат своего труда в оригинальном размере. Для этого нужно немного спуститься вниз в раздел Previw:
Или же можно прямо в браузере (Opera, Firefox, Internet Explorer и т. п.) посмотреть итог работы:
Теперь нам нужно просто сохранить иконку сайта на свой компьютер. Для этого нужно нажать на кнопку “Download Favicon”:
Создание favicon (фавикон) из готового изображения
Допустим Вы не хотите создавать с нуля иконку для своего сайта, а хотите сделать ее из уже готового изображения. В этом случае для Вас будет удобен сервис для создания фавиконки favicon.ru.
Сервис на русском языке, поэтому у Вас не должно возникнуть проблем. Просто указываете картинку, которую Вы хотите видеть в роли иконки Вашего сайта (кнопка “Обзор”), потом нажимаете “Создать favicon.ico”, а дальше уже “Скачать favicon.ico”.
Список сервисов с готовыми favicon (фавикон)
Также можно просмотреть уже готовые иконки, попробовать найти что-то подходящее. Я предлагаю следующие сервисы:
- iconj – Огромная база фавиконок;
- favicon.cc – Да, в этом сервисе тоже есть уже готовые фавиконки.
- Favicon.co.uk – Можете глянуть и сюда, вдруг найдете что-то подходящее.
- audit4web – Большое количество иконок для сайта.
Как сделать Favicon (фавикон) для сайта
После того, как мы создали фавиконку, нужно ее “прикрепить” к сайту. Для этого нужно сделать следующее:
- Полученный favicon.ico скопировать в корень блога (т.е. в папку, где находятся папки wp-content, wp-admin и т.п.). В моем случае эта папка называется public_html:
- Далее открываете файл header.php (напомню, он находится в папке темы Вашего блога). И прописываете в этом файле следующий код (главное условие: код должен быть после тега <head> и до </head>):
<link rel="shortcut icon" href="http://адрес_сайта/favicon.ico" ;="" type="image/x-icon"> <link rel="icon" href="http://адрес_сайта/favicon.ico" ;="" type="image/x-icon">
Естественно в 2 местах слова адрес_сайта меняете на адрес СВОЕГО блога.
- У меня получилось следующее:
- Теперь сохраняете файл header.php, обновляете на сервере и наблюдаете за результатом:
Как видите, все “встало” правильно. Надеюсь у Вас тоже проблем не возникло. Будут вопросы, пожалуйста, задавайте их в комментариях. А то мне на почту ссыпатся письма с вопросами технического характера, я не могу успевать отвечать на все.
P.s. Постоянные читатели, наверное, заметили, что я уроки WordPress стал давать немного реже. Возникла небольшая проблема со временем. До какого периода это продлиться? Честно, не знаю. Но минимум раз в неделю буду стараться писать уроки (по возможности – чаще). Поэтому лучше Вам, уважаемый читатель, для удобства подписаться на RSS блога Новичка.
P.s.s. Открыл новый раздел Ученики. Новички, которые создают блог с нуля, это отличная возможность “засветиться”!
_____________________________________________
Следующий урок: Урок 51 Регистрация в поисковиках.
последних фавиконов — Faviconer
- Создать новый фавикон
- Загрузить — Импортировать изображение
- Последние файлы Favicon .ICO
- О Faviconer
Просмотр 1-11 из 2254447 FAVICONS
Создан: 3 февраля, 2023
Автор: Lutinetgazelle
Страна: Bagnolet, France, FR
.
Popular Tags
InternetjoomlaTechnologyCompaniesweb designNewsdesignMarketingwebFreelance PortfoliosMusiconlineseohostingwebdesignweb hostingfreesoftwareLifestylegameslettersUnited StatesvideoblogwebsitebusinessTravelWeb DevelopmentEventsShoppingForumwebsite designCMSArtEducationSportshotelradioJobsWeblogshomeHealthe-commercewebhostingsportHotelsphpdownloadgraphic designCommunityMore tags →
photographyvideosTVUnited KingdomflashfashioniPhonedevelopmentnoticiasshopmp3ITIndustryreal estatewebsite hostingfilmMoviescssCanadanatureEntertainmentphotosUKsearch engine optimizationwordpressinternet marketingGameMobilephotoHostdvdinformationlinuxweb hostreviewsadvertisingcomputerBookstrainingdomainGratismediaappleecommercemagazinePortalwindowsfoodChatIndialogodirectoryweb hosting provideruniversityKidsfootballAutohtmlwebsitesservicesdigitalconsultingsearchonline marketingArchitecturelondonbrandingturismoPortfolioGermanyPCaccommodationaustraliaMagentoOnline Gamesopen-sourcebuy3DsiteFranceandroidpoliticsnetworkdesignerarticlessocialfitnessiPadsocial mediaHomepageBlogsgreenWeb DesignerschoolmysqlrestaurantMealillustrationbeautyservicecompanyMultimediaMagyar TelekomweatherberlinguidefreelanceJobresearchlogo designWeb ToolsNGO sFacebookpicturesdatingGamingBlueForexaudionewspapercollegeAsiaManagementfree gameswebsite developmentblackgraphicagencycaremailJavaCclothingDownloads рокmacфинансырестораныVarienphotoshopjavascriptкомпания веб-дизайнаключевые словакиномеждународныйюмораппаратное обеспечениебезопасностьавтомобили
Дата создания: 30 января 2023 г.
Автор: Вукота Стошич
Страна: Белград, Сербия, RS
Дата создания: 18 января 2023 г.
Автор: Troy Reiner
Страна: Уичито, США, США
Дата создания: 10 января 2023 г.
Автор: Abba john2
Страна: Нигерия, NG
Дата создания: 7 января 2023 г.
Автор: Джефф Дженкинс
Страна: США, США
Дата создания: 30 декабря 2022 г.
Автор: Edwin Charon
Страна: Филиппины, PH
Дата создания: 29 декабря 2022 г.
Автор: Edwin Charon
Страна: Филиппины, PH
Дата создания: 21 декабря 2022 г.
Автор: andreas meier
Страна: Denbigh, United Kingdom, GB
Дата создания: 19 декабря 2022 г.
Автор: Edwin Charon
Страна: Филиппины, PH
Дата создания: 8 декабря 2022 г.
Автор: Edwin Charon
Страна: Филиппины, PH
Дата создания: 8 декабря 2022 г.
Автор: Edwin Charon
Страна: Филиппины, PH
Помогите нашему бесплатному сервису развиваться, просто расскажите о нас.
Генератор Favicon — Emoji to Favicon
Выберите один из сотен эмодзи, чтобы создать свой фавикон. Изображения эмодзи из проекта Twemoji.
Emoji Favicons
Графика emoji взята из проекта с открытым исходным кодом
Твемодзи. Авторские права на графику принадлежат Twitter, Inc и другим компаниям, 2020 г.
участники. Графика лицензирована
CC-BY 4.0. Вы должны просмотреть лицензию перед использованием в своем проекте.