Красивый фавикон: Коллекция favicon.ico (фавикон) на Favicon.by

Содержание

Как установить на сайте красивый и современный favicon

Фавикон это значок вашего сайта или страницы в интернете. Используется браузерами, приложениями и поисковыми системами для презентабельного отображения вашего сайта или страниц сайта во вкладках, закладках, истории, короче везде где есть ссылка на ваш сайт. Очевидно что использование Фавикона на вашем сайте просто необходимо. Красивый, узнаваемый Фавикон поможет посетителям вашего сайта увидеть ссылку на ваш сайт. Этот элемент привлечет внимание пользователя к ссылке на ваш сайт.

Изначально Фавикон использовался достаточно просто. Достаточно было добавить в корень файл favicon.ico. Это картинка в формате ico размером 16 на 16 пикселей. Браузер по умолчанию искал это файл в корне вашего сайта и отображал во вкладках и закладках.

Интернет а вместе с ним и устройства используемые пользователями для выхода в глобальную сеть развиваются огромными темпами.

Старый формат Фавикон в современных браузерах и мониторах выглядит мягко говоря не актуально.

Визуальное отличие старого и нового формата favicon. Как было и как стало.

Сегодня многообразие устройств и браузеров используют разные форматы и разрешения файлов favicon. Попробуем разобраться в всем этом многообразии.

Браузеры настольных компьютеров и ноутбуков используют иконки разрешением 16×16, 32×32 и 48×48 в формате .png или .ico (для старых версий IE только .ico).

Мобильные устройства Android в зависимости от плотности PPI и разрешения экрана используют иконки с разрешениями: 36×36, 48×48, 72×72, 96×96, 144×144, 192×192.

Мобильные устройства Apple так же в зависимости от типа экрана используют иконки с разрешениями: 57×57, 60×60, 72×72, 76×76, 114×144, 120×120, 144×144, 152×152, 180×180.

Можно посмотреть как ваш Фавикон видят поисковики Яндекс и Google:

Яндекс: http://favicon.yandex. net/favicon/mysite.ru
Google: http://www.google.com/s2/favicons?domain=mysite.ru

mysite.ru – измените на ваше доменное имя.

Как мы видим форматов множество. Возникает вопрос, как в этом всем разобраться?

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

Изучив несколько сайтов предлагающих генерацию фавиконов (Favicon Generator) я остановился на сайте Favicon & App Icon Generator

Рассмотрим подробно как создать и закачать к себе на сайт весь набор форматов favicon и разместить необходимый код на главной странице своего сайта.

Для начала нужно создать заготовку для генерации остальных форматов. Это должна быть квадратная картинка в формате PNG, JPG или GIF и размером желательно 512×512 px. Это заведомо больше выходных форматов генератора, что позволит создать качественные иконки.

Переходим на сайт Favicon & App Icon Generator. Ссылка есть в тексте, чуть выше.

Выбираем созданный нами ранее файл заготовку и жмем кнопку Create Favicon. Процесс генерации занимает некоторое время. По окончании процесса сайт переадресует нас на страницу с результатами:

Скачиваем архив со всеми необходимыми файлами нажав на ссылку Download the generated favicon. Все содержимое архива закачиваем в корневую директорию вашего сайта.

Копируем весь предоставленный генератором код и вставляем его внутрь контейнера head вашего сайта, между тегами <head> и </head>.

Теперь фавикон — иконка вашего сайта адаптирована под различные устройства и выглядит презентабельно даже на последнем iPhone))

Для сайтов на WordPress добавить favicon на сайт можно из панели администратора WordPress. Для этого нужно перейти в левом меню по пути — Внешний вид — Настроить — Свойства сайта — Иконка сайта.

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

В этой статье мы рассказали как можно добавить на сайт современный favicon — значок вашего сайта/

Что такое фавикон, зачем он нужен и как его создать

12 мин — время чтения

Янв 17, 2020

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

Речь идет о маленьком значке, который есть на каждой открытой вкладке браузера. Именно фавиконы помогают нам быстро понять, какой сайт находится на каждой вкладке — особенно, когда их так много, что прочитать название невозможно.

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

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

Что такое фавикон и где он используется

Фавикон (favicon) — это в дословном переводе с англ. «значок для избранного» (FAVoritesICON). Именно так называются закладки в браузере Internet Explorer, где впервые стали использоваться визуальные иконки для быстрого поиска нужного сайта.

Обычно фавикон для сайта содержит логотип, первую букву названия компании или же любое другое изображение, которое соответствует особенностям бизнеса. Главное — чтобы эти элементы органично вписывались в квадратную форму.

Где же можно увидеть фавикон?

1. На открытых вкладках перед названием сайта. Если вы не загрузили фавикон, у вашего сайта будет стандартный значок в виде черно-белой планеты.

2. В истории просмотров браузера.

3. На панели закладок.

4. В избранном, куда вы сохраняете все интересные страницы.

5. В мобильной и десктопной выдаче Google. Фавиконы на мобильных экранах появились еще весной 2019 года, а вот в десктопной выдаче — буквально в первые недели 2020 года.

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

Как же создать собственный фавикон для сайта? Можно ли просто уменьшить существующее лого бренда и загрузить его на сайт? Какого размера фавикон лучше использовать? Давайте разбираться.

Краткая техинструкция по фавиконам

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

Формат фавикона

Самый известный, хоть уже и устаревший формат фавиконов — ICO. Его основное преимущество в том, что один файл может хранить в себе несколько вариантов размеров фавикона.

Раньше Internet Explorer поддерживал только этот формат, сегодня же практически все известные браузеры распознают иконки в PNG, некоторые — в GIF, JPEG, SVG. Исключение — Internet Explorer 10 и более ранние версии браузера, которые принимают только ICO-файлы.

Сегодня ICO считается уже немного устаревшим форматом, чаще всего предпочтение отдают PNG. Почему именно этот формат? Ответ простой — чтобы при любых обстоятельствах (браузерах и девайсах) сохранять высокое качество фавикона. PNG поддерживается и корректно отображается практически всеми современными браузерами.

У фавиконов в формате SVG, GIF, JPEG проблемы именно в отсутствии такой широкой поддержки. Но пару слов в защиту SVG формата все-таки хочется сказать — иконки в SVG масштабируются без потери качества, что в будущем может стать отличным решением всех проблем с отображением фавиконов. Дело за браузерами, которые уже постепенно начали внедрять поддержку этого формата свободной векторной графики.

Узнать, какие именно форматы фавиконов поддерживают разные браузеры, можно с помощью онлайн-сервиса Can I Use. Например, вы сможете увидеть, какие браузеры поддерживают или не поддерживают фавиконки в формате PNG и SVG.

Размер фавикона

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

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

Не так давно некоторые веб-мастера получили от Google письмо с рекомендацией увеличить разрешение фавикона до 192×192.

В письме речь шла о том, что более качественные фавиконы могут принести в 2 раза больше кликов по новым вкладкам в Chrome и на главной странице Android. Согласитесь, на расплывчатый фавикон вряд ли захотят кликать — значит, низкое разрешение иконки не вариант для хорошего пользовательского опыта.

Несколько общих правил, которых стоит придерживаться:

Использовать квадратный значок сайта.
Не использовать фавикон чужой компании или неприемлемого характера (например, свастика) — иначе поисковик будет отображать картинку по умолчанию – бесцветную планетку.
Фавикон должен быть доступным для сканирования поисковыми роботами.

Пять лет назад с релизом HTML5 появился атрибут sizes, который значительно облегчает работу с фавиконами. Этот атрибут нужно указывать в формате ширина х высота без единиц измерения (если их несколько, используйте пробел). Например:

<link rel="icon">
<link rel="icon">

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

Как сделать фавикон онлайн

Если у вас возникала мысль просто переименовать файл вашего логотипа в favicon.ico, забудьте — это так не работает. Вас наверняка будут ждать ошибки при отображении фавикона в разных браузерах.

Как этого избежать?

Способов создать фавикон для сайта несколько:

1. Сделать его в графическом редакторе, например, в Photoshop с помощью специального плагина Favicon.ico.

2. Нарисовать фавикон в специальных онлайн-сервисах (например, Katvin или favicon.cc) и потом скачать его оттуда в уже подходящем формате.

3. Воспользоваться имеющимся у вас изображением (например, вашим логотипом) и загрузить его в онлайн-генератор фавиконов — например, Favicon.by, Realfavicongenerator.net и др.

4. Скачать готовые фавиконы для сайта из специальных банков иконок — например, галерея Findicons. Данная сборка насчитывает более 500 тысяч иконок.

Когда вы скачаете сгенерированный фавикон, остается только добавить его на ваш сайт.

Как добавить фавикон на сайт

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

После этого нужно просто вставить следующий код в мета-тег <head></head>:

<head>
  . ..
  <link rel="icon" href="https://yoursite.ru/favicon.png" type="image/x-icon">  
  <link rel="shortcut icon" href="https://yoursite.ru/favicon.png" type="image/x-icon">
  ...
</head>

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

Дизайн фавикона — когда проще не значит хуже

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

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

Если вы хотите использовать двигающийся фавикон в формате gif, будет ли он отличать вас от других иконок? Или же он будет просто отвлекать и даже раздражать пользователей, создавая эффект не до конца подгруженного сайта (что более вероятно).

Можете ли вы в размере 16*16 четко сказать, что изображено на фавиконе? Постарайтесь, чтобы ваш фавикон не содержал мелких деталей, был хорошо различим и не пестрил всеми цветами радуги.

Ассоциируется ли ваш фавикон со сферой, в которой вы работаете, и с дизайном вашего сайта? По одному фавикону на панели закладок можно вспомнить, из какой ниши этот сайт, а иногда — и какой конкретно это сайт, если фавикон сохраняет визуальный стиль бренда.

Три кита хорошего фавикона — он должен быть четким, простым и запоминающимся.

Теперь, когда вы знаете, как создать красивый фавикон и добавить его на сайт, а будет ли он отображаться в поисковиках? Давайте проверим!

Как проверить фавикон и исправить основные ошибки

Чтобы быстро проверить, как отображается фавикон, вы можете просто погуглить ваш ресурс. Или же воспользоваться следующей ссылкой, подставив в нее адрес своего сайта:

https://www.google.com/s2/favicons?domain=mysite.ru

Есть еще один вариант для проверки фавикона на разных устройствах — с помощью специальных сервисов, например, Realfavicongenerator.

Если ваш фавикон не отображается в Google, начните с проверки таких моментов:

Графическое изображение в формате ico, png или gif находится в корне ресурса?
Код, ведущий к изображению, на страницах ресурса прописан правильно?
Иконка не размытая и уникальная?
Доступен ли файл с фавиконом для сканирования поисковых роботов?

Обратите внимание, что от пути к изображению напрямую зависит его отображение. Если хотите удалить или изменить фавикон, необходимо просто удалить или изменить файл favicon.ico (jpeg, gif, png).

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

Почему фавикон нужен каждому сайту

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

Наш инструмент «Аудит сайта», который проводит полный техосмотр вашего ресурса, в том числе проверяет и наличие фавикона. Вы можете проанализировать свой сайт, просто зарегистрировав аккаунт в SE Ranking.

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

Наши англоязычные коллеги говорят: «Дьявол — в мелочах». И фавикон — та самая маленькая деталь, которая может влиять на восприятие вашего сайта и бренда, на их узнаваемость и даже количество переходов из поиска.

Хороший фавикон — неотъемлемая часть бренда и технический стандарт каждого сайта, и точно стоит потраченного на него времени.

4316 views

50 фантастических фавиконок — лучшее из — Smashing Magazine

2 минуты чтения
Вдохновение, Витрины, Иконы, Favicons
Поделиться в Twitter, LinkedIn

Об авторе

Свен — соучредитель и бывший генеральный директор Smashing Magazine.

Он пишет в своем блоге конкурса, где фокусируется на блогах, контент-стратегии, написании и публикации… Больше о Sven ↬

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

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

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

Дополнительная информация на SmashingMag:

Важные советы по эффективному дизайну логотипа
55 бесплатных высококачественных наборов иконок

Больше после прыжка! Продолжить чтение ниже ↓

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

Вот список фавиконов

9 0045 Top Roundup 90 045 Arc Technology Group 900 49 9 0044 9 0045 Медиенлаб 9 0044

	Tableau Public
	Gnash Project

	Эластичные вкладки
	i-on Interactive

	Kodingen
	Sound Light Vision
	Highcharts
	Лица
	Photoscape
	London Review s
	Open Faces
	RocketTheme
	Techbridge 90 046
	Soft eXpansion
	Screwturn Wiki
	Нимбупани
	Spoonjuice
	Университет Фрайбурга
	Программное обеспечение Paragon
	iMasters
	TechEBlog
	FitBit
	Dropbox
	Axialis
	Swebapps
	Acquia
	Фрагмент
	MIX Online
	Второй рынок
	Открыть X
	Filemail
	55Eleven
	Onehub
	Projectbubble
	Projektwerk

	Iconshock
	Деликатес
	Бычок
	M1 Design
	PageStat
	Commadot

	Тэмми Харт
	Туфи
	Lion Framework 9CMSExpo 9004 6

И, наконец, все фавиконы на одной картинке:

Логотипы фавикон — 45+ лучших идей логотипов фавикон .

Бесплатный конструктор логотипов Favicon. 125

Пожалуйста, нажмите «Сохранить избранное», прежде чем добавлять другие понравившиеся дизайны

116

Пожалуйста, нажмите «Сохранить избранное», прежде чем добавлять другие понравившиеся дизайны

Вы посмотрели 99дизайнов и хотите еще кусочек?

по ET

Поиск идей логотипа

Логотипы Favicon не подходят? Попробуйте что-нибудь еще:

Логотипы Facebook

логотипы инстаграм

Ссылка на логотипы

Логотипы MoneyGram

Логотипы Амазон

Логотипы приложений

Логотипы программного обеспечения

Логотипы Тикток

логотипы твиттера

Логотипы электронной почты

Логотипы R-игр

Логотипы электроники

Игровые логотипы

Логотипы кругов

Логотипы компании

Минималистские логотипы

Стоматологические логотипы

Логотипы листьев

Логотипы животных

Логотипы туристических агентств

Все начинается с логотипа favicon

Независимо от того, являетесь ли вы новичком или пользуетесь вторым (или третьим!) брендом, у нас есть решение, которое подойдет вашему бизнесу и поднимет ваш бренд.

Бесплатный Logomaker

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

Создайте логотип, это бесплатно

Проведите конкурс логотипов

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

Логотипы от 299 долларов США

Что делает хороший логотип favicon?

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

Типы логотипов
Существует 7 различных типов логотипов.

Штирлиц — Сеть печатных салонов в Перми