Иконка фавикон: Иконки Favicon — скачивайте бесплатно в PNG и SVG

Содержание

Фавикон лого бережёт. Зачем нужны иконки на вкладках — Маркетинг на vc.ru

В этой статье расскажем что такое фавикон, и как он влияет на эффективность вашего сайта.

665 просмотров

Так что же это такое

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

Фавикон (FAVoritesICON) — это небольшой значок размером 16×16 пикселей, используемый в веб-браузерах для показа на вкладках. В дословном переводе с английского Favicon — значок для избранного, который впервые появился в браузере Internet Explorer.

Традиционно фавикон используется:

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

Пример расположения фавикона

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

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

Фавикон состоит из логотипа, первой буквы названия компании или другого изображения, ассоциирующегося с бизнесом. Фавикон может:

Улучшить пользовательский опыт. Иконка в браузере — своеобразная подсказка для пользователя, сохраняющего сайт в закладки, или для энтузиастов с 50 вкладками на панели. Благодаря фавикону, вы сможете упростить процесс возвращения на сайт, к примеру, увидев нужный значок, пользователь легко найдёт нужную страницу.
Прокачать узнаваемость бренда. Как упоминалось выше, фавикон — один из элементов фирменного стиля вашей компании, который способствует запоминаемости логотипа.

Подчеркнуть профессионализм. Фавикон — завершающий штрих. Без него, конечно, можно, но с ним картина будет точно завершена.
Улучшить SEO. Если раньше иконки использовались лишь для удобства, то сегодня в некоторых поисковых системах (например, в Яндекс и Google), фавикон появляется в результатах поисковой выдачи напротив каждого сайта.

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

Для начала давайте определимся с размером фавикона.

Самый оптимальный — 16×16 пикселей. Поэтому важно убедиться, что ваша иконка корректно отображается в таком маленьком разрешении. Рекомендуем также создать фавикон в более крупных размерах 32×32 и 48×48 пикселей, которые иногда используются для десктопных версий страниц.

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

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

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

Начнём с самого очевидного варианта — можно обратиться к дизайнеру. Особенно актуально, если у вашего бренда ещё нет логотипа. Если дизайнер уже сделал для вас лого, то и фавикон – не проблема.

Вы также можете сделать иконки самостоятельно в фоторедакторе. Например, достаточно просто сделать фавикон в Photoshop:

В меню выбора создайте новый файл размером 64х64 пикселя (на крупном холсте просто удобнее). Далее вставьте лого в документ, добавьте или уберите детали.

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

Удостоверьтесь, что всё отображается правильно: фон удалён, картинка не растянута, ничего не размазалось.

И да, сохранитесь.

Также можно воспользоваться онлайн-сервисами: Favicon Generator, Dynamic Drive Favicon Tool или Gen Favicon.

Можете также скачать фавикон на специальных сайтах, например, Fresh Favicons и Favicon.by. Готовые фавиконы — хорошая временная мера, но понятно, что об уникальности бренда можно забыть.

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

А если у вас ещё нет сайта, напомним про сервис REG.Site. В нём можно либо отредактировать уже готовый шаблон на WordPress, либо потратить чуть больше времени и собрать сайт из элементов.

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

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

Янв 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.

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

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

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

4062 views

HTML Favicon

❮ Назад Далее ❯

Фавикон — это небольшое изображение, отображаемое рядом с заголовком страницы на вкладке браузера.

Как добавить фавиконку в HTML

Вы можете использовать любое понравившееся вам изображение в качестве фавиконки. Вы также можете создать свой собственный favicon на таких сайтах, как https://www.favicon.cc.

Совет: Фавикон — это маленькое изображение, поэтому оно должно быть простым и контрастным.

Изображение фавикона отображается слева от заголовка страницы на вкладке браузера, например:

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

Затем добавьте элемент в файл index.html, после элемента <div id="yandex_rtb_1" class="yandex-adaptive classYandexRTB"></div> <script type="text/javascript">if(rtbW>=960){var rtbBlockID="R-A-744156-3";} else{var rtbBlockID="R-A-744156-5";} window.yaContextCb.push(()=>{Ya.Context.AdvManager.render({renderTo:"yandex_rtb_1",blockId:rtbBlockID,pageNumber:1,onError:(data)=>{var g=document.createElement("ins");g.className="adsbygoogle";g.style.display="inline";if(rtbW>=960){g.style.width="580px";g.style.height="400px";g.setAttribute("data-ad-slot","9935184599");}else{g.style.width="300px";g.style.height="600px";g.setAttribute("data-ad-slot","9935184599");} g.setAttribute("data-ad-client","ca-pub-1812626643144578");g.setAttribute("data-alternate-ad-url",stroke2);document.getElementById("yandex_rtb_1").appendChild(g);(adsbygoogle=window.adsbygoogle||[]).push({});}})});window.addEventListener("load",()=>{var ins=document.getElementById("yandex_rtb_1");if(ins.clientHeight =="0"){ins.innerHTML=stroke3;}},true);</script> </code>, например:</p><h4><span class="ez-toc-section" id="i-11"> Пример </span></h4><p data-readability-styled="true"> <!DOCTYPE html> <br/><html> <br/><head> <br/> <title>Моя страница Заголовок ico»>

`Это Заголовок`

 
Это абзац.
  
 Теперь сохраните файл index.html и перезагрузите его в браузере. Теперь вкладка вашего браузера должна
отображать изображение фавикона слева от заголовка страницы.
 Поддержка формата файла Favicon 
 В следующей таблице показаны поддерживаемые форматы файлов для изображения favicon:
  Браузер  ИКО  PNG  GIF  JPEG  СВГ
 Край  Да  Да  Да  Да  Да
 Хром  Да  Да  Да  Да  Да
 Firefox  Да  Да  Да  Да  Да
 Опера  Да  Да  Да  Да  Да
 Сафари  Да  Да  Да  Да  Да
 Резюме главы 
 Используйте элемент HTML   для
 вставить фавикон
 Тег ссылки HTML 
 Тег  Описание
 <ссылка>  Определяет связь между документом и внешним ресурсом
 Полный список всех доступных тегов HTML см. в нашем справочнике по тегам HTML.
 ❮ Предыдущий
 Следующий ❯
 
 ВЫБОР ЦВЕТА 
 Лучшие учебники 
 Учебное пособие по HTML 
 Учебное пособие по CSS 
 Учебное пособие по JavaScript 
 Учебное пособие 
Учебник по SQL 
 Учебник по Python 
 Учебник по W3.CSS 
 Учебник по Bootstrap 
 Учебник по PHP 
 Учебник по Java 
 Учебник по C++ 
 Учебник по jQuery 
 Лучшие ссылки 
 Справочник по HTML 
 Справочник по CSS 
 Справочник по JavaScript 
 Справочник по SQL 
 Справочник по Python 
 Справочник по W3.CSS 
 Справочник по Bootstrap 
 Справочник по PHP 
 Цвета HTML 
 Справочник по Java 
 Справочник по Angular 
 Справочник по jQuery 
 
 Лучшие примеры
0168
Примеры HTML 

 Примеры CSS 
 Примеры JavaScript 
 Примеры инструкций 
 Примеры SQL 
 Примеры Python 
 Примеры W3.CSS 
 Примеры Bootstrap 
 Примеры PHP 
 Примеры Java 
 Примеры XML 
 Примеры jQuery2 
 |
 О 
 W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения.
Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания.
Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования,
куки-файлы и политика конфиденциальности.
 Copyright 1999-2023 Refsnes Data. Все права защищены. 
 W3Schools работает на основе W3.CSS.
 HTML Favicon | Знаете, как создать и вставить Favicon в файл HTML? 
 Фавикон — это краткая форма значка избранного, также называемого значком закладки, который может быть определен как небольшой логотип с расширением файла .ico, а не с каким-либо другим файлом .bmp или .gif, который обычно отображается в адресной строке с персонализированным изображением. часто посещаемого URL-адреса, помогает в рекламе, продвижении или в качестве стандартной торговой марки, в то же время играет важную роль на веб-сайте, таком как Google, Facebook, где мы отметили небольшой логотип в левой части адресной строки, который дает профессиональный внешний вид, а также отображается в закладках избранного пользователя, а также без значка фавикона веб-сайт остается общим значком веб-страницы и выступает в качестве ярлыка из значка избранного.
 Пример примера в реальном времени показан ниже. При щелчке избранного в закладке отображаются типичные значки. Даже некоторые веб-сервисы, использующие XML и поисковые системы, используют фавикон для своей уникальности.
  Синтаксис: 
 Ниже приведен основной метатег для ссылки на веб-страницу.
  
 В приведенном выше синтаксисе путь к изображению заменяется фактическим местоположением файла favicon.ico, который может быть размещен в каталоге изображений. Последний тип значения — это файл в формате MIME. Причем используемое здесь изображение может быть любого типа, но формат GIF заявлен как более продвинутый.
 Как создать значок HTML Favicon? 
 Веб-дизайнер создает собственный персонализированный значок и связывает его с веб-страницей. Это делается двумя способами: браузерами, которые поддерживают значок значка, отображаемый в адресной строке конкретного браузера. Во-вторых, с интерфейсом документа с вкладками он отображается в следующей ссылке. Даже он выбирается из собственного жесткого диска. Самое главное, фавикон должен использовать формат файла (.ico), и существует несколько бесплатных сервисов для преобразования изображения.
 После того, как разработчик закончил работу над дизайном веб-сайта, добавляется фавикон. Просто он заменяет значок пустого документа на вкладке браузера значком официальной веб-страницы. Это помогает ему легче создавать веб-сайт или искать веб-сайт, поскольку мы знаем, что самая популярная поисковая система, Google, идентифицируется или производит впечатление на пользователя по теме логотипа. Поскольку значок слишком мал, он должен быть понятен пользователю. Существуют разные способы создания Favicon. Способ 1 – автоматическая генерация с помощью файлового менеджера, способ -2: Загрузка обычного изображения.
 Шаги по созданию favicon.ico. Это простой процесс посадки:
 Генерация изображения размером 16 x 16 пикселей (Распознавание изображения). Здесь можно изменить размер изображения, чтобы сделать его крошечным для использования в качестве фавикона.
 Сделайте преобразование в формат файла favicon.ico для понимания браузером.
 Загрузка сгенерированной иконки на сайт.
 Следующий шаг — добавление кода в HTML. Даже фавикон можно использовать как значок рабочего стола или яблока.
 Как вставить Favicon в файл HTML? 
 Создать фавикон также можно с помощью прозрачного фона в формате gif или .png. Может возникнуть вопрос, зачем нужен фавикон? Ответ очень прост: брендинг и маркетинг нашего веб-сайта по всему миру. Маленькая иконка делает веб-страницу более профессиональной. Фавикон добавляется в файл HTML простым способом и должен иметь следующие характеристики, и в любое время вы можете добавить или изменить фавикон на веб-сайте.
  Стандартное имя с форматом файла:  После того, как изображение создано и названо, по умолчанию используется favicon. ico (файлы ICO, созданные с помощью X-ICON Editor).
  Размер файла изображения  :16 * 16, 64 * 64, 128 * 128 пикселей и, кроме того, файлы не должны превышать 100 КБ.
  Цвет : может быть 8 укусов, 24 или 32 укуса
  Изображение:  Должен быть в формате gif или png.
 Фавикон помещается между элементом и заменяет местоположение изображения. Он использует тег ссылки, который определяет ссылку на файл. Он использует два атрибута, rel и href. Мы можем использовать фотошоп с плагинами и другими онлайн-генераторами для преобразования файла изображения в формат .ico.
 Путь к расположению значка: это стандартная реализация.
       // Устанавливает различные значки.
   // здесь в атрибуте ссылки ярлык устанавливает собственный значок в адресной строке. 
 Следующий код используется для пользователя IOS:
  ../> 
 Ниже приведен пример кода, который мы можно использовать в HTML-коде
  Пример: 
 


<голова>
<мета-кодировка = "utf-8" />
<название>
значок EDUCBA 



<тело>

Иконка ОБРАЗОВАНИЯ


Иконка добавлена в адресную строку


 
  Вывод: 
  Объяснение кода:  В приведенном выше коде я создал маленькую овальную иконку и преобразовал ее в фавиконку. Следует отметить, что значок отображается в Internet Explorer, а во многих браузерах он его не поддерживает. IE берет значок из корневого каталога. Если в файле HTML не указан путь, он отображает ошибку 404 из ответа сервера. Для этого, вероятно, необходимо очистить кеш ваших веб-сайтов, чтобы обновить значок, поскольку веб-браузеры очень сильны в постоянном хранении кэшированных значков.