Как добавить FAVICON (иконку) к сайту на Тильде
Для начала, давайте разберемся, что такое фавикон и для чего он нужен.
Что такое Фавикон (favicon)
Фавикон — это иконка/значок сайта в браузере. Он отображается на вкладке слева от названия:
Также фавикон отображается в списке ваших закладок и в избранных сайтах. В каждом браузере названия и вид отличаются, но суть одна:
По умолчанию, на всех сайтах Тильды в фавиконе отображается логотип Тильды:
Как сделать Фавикон
Рекомендую воспользоваться сервисом xiconeditor.com, который полностью позволит вам создать полноценный фавикон.
- Переходим на сайт и нажимаем кнопку «Import»:
- В открывшемся окне снова жмем «Upload»:
- Загрузите картинку, из которой вы хотите сделать фавикон. Допустим, это будет ваш логотип. Загружайте и растяните видимую область фавикона так, как вы хотите, чтоб он отображался. Оставьте галочку только на размере 64х64 и нажмите кнопку «Ok»:
- Нажмите «Export»:
- Нажмите «Export your icon», чтоб скачать файл фавикона:
После этого начнется загрузка файла favicon.ico, который вам и нужно будет загрузить в Тильду.
Подключение Фавикона к Тильде
Вариант №1
Вам необходимо перейти в настройки вашего сайта на Тильде:
В левой панели ищите вкладку «SEO»:
Переходите на страницу и ищите раздел «РЕДАКТИРОВАНИЕ ИКОНОК (FAVICONS)»:
Нажимайте кнопку «Редактировать» и вы увидите следующую страницу:
На ней можно загрузить подготовленный вами файл Фавикона, кликнув на кнопке «Upload file».
Кроме того, вы сможете отдельно загрузить иконку для закладок в браузере SAFARI.
Еще вы можете загрузить иконку для плиток в Windows 10 и подобрать цвет плитки:
Нажимайте сохранить и опубликуйте все странницы сайта, чтоб все изменения вступили в силу.
Вариант №2
Идем в настройки вашего сайта:
Дальше внизу слева вы увидите вкладку «Еще». Переходите:
В открывшейся странице перед вашими глазами сразу возникнет раздел «Favicon» с кнопкой «Upload file»:
Нажимайте и загружайте свой подготовленный файл Фавикона.
Нажимайте «Сохранить изменения» и опубликуйте все страницы сайта, чтоб все изменения вступили в силу.
В итоге
Вы изменили иконку сайта и можем наслаждаться новым обличием вашего ресурса:
Если остались еще какие-то вопросы, то посмотрите видео на нашем канале WEB-головоломки. На этом канале еще много интересного
Как добавить фавикон на Tilda?
Favicon (Фавиконка) — это маленькая картинка, которая отображается во вкладке браузера перед заголовком страницы.
Значок фавикон также показывается в результатах поиска Яндекса и Google (на мобильных устройствах) рядом с названием сайта.
Фавикон повышает узнаваемость бренда компании, поэтому так важно его наличие на сайте.
Как добавить / заменить фавикон в Тильде
- Перейдите в раздел «Мои сайты»
- Выберите нужный сайт: Редактировать сайт → кнопка «Настройки сайта»
- Вертикальное меню SEO → РЕДАКТИРОВАНИЕ ИКОНОК (FAVICONS) → кнопка Редактировать
- PNG ICON (152 X 152) — Иконка, которая будет отображаться в закладках в Safari, как значок в мобильном телефоне или иконка на десктопе (apple-touch-icon).
- PNG ICON (270 X 270) — Иконка для плиток на Win 10.
4. Сохраните внесенные изменения
Название файла должно быть favicon.ico (без цифр и других символов).
Надеюсь, что данная статья была Вам полезна. Если — да, то поставьте, пожалуйста, лайк.
Для создания файла для фавиконки посмотрите мой видео-урок «Как сделать фавикон (favicon, иконку в браузере)» или прочитайте статью.
Курс по разработке сайтов на Тильде
Услуги по Digital-маркетингу
Эта статья была для Вас полезной?
Добавить комментарий
- Как сделать блок «вопрос-ответ»? →
- Создание анкеты на сайте →
- Всплывающие окна при закрытии страницы сайта →
- Как сделать картинку ссылкой? →
- Как подключить Telegram-чат к сайту? →
Понравилась статья? Поделиться с друзьями:
38 ЛайфХаков для конструктора Тильда
Заполните форму ниже↓ и Вы получите список ЛайфХаков, которые помогут найти выход из сложных ситуаций при создании сайта
Контент будет отправлен на указанный e-mail
Отзывы Слушателей Моих Курсов
Не могу не оставить отзыв о курсах Алексея Чеснокова по маркетингу, так как для меня это было очень познавательно и очень интересно! Он МЕГА крутой преподаватель, безумно интересно и простым языком доносит нужную информацию, что любой человек научиться, если захочет. Курсы его научили меня создавать сайты на тильде, создавать чат ботов, делать рассылки и многому другому. Он не льет воду, а за такой короткий промежуток времени по нашему обучению, он дал очень много важной информации, и эта информация я уверенна пригодится в жизни каждого из нас! Алексей Чесноков помимо знаний, которых дал мне, я считаю его очень умным, деликатным, воспитанным, строгим (это очень нужно), справедливым педагогом — таких сейчас очень мало! Я очень горжусь тем, что проходила эти курсы непосредственно у него! Он очень классный и добрый человек, он располагает аудиторию слушателей к себе своей простотой и мудростью, он очень интересно и правильно преподносит информацию для каждого уровня людей, а мы абсолютно все разные, и не смотря на то, что нас было 60 человек — он понравился каждому из нас. Мы в восторге от него! Помимо всего этого, он давал нам очень много полезной ДОПОЛНИТЕЛЬНОЙ информации, которую по сути мог не давать, но он делился с нами ею, и это тоже очень ценно для нас! Я безумна благодарна этому человеку, побольше бы таких ответственных педагогов, которые не отсиживают свои рабочие часы, а именно завлекают в тему, что невозможно оторваться и не слушать его! Я всем рекомендую посетить его курсы, и подписаться на его YouTube канал, он всегда записывает очень много классных видео уроков, и это все абсолютно бесплатно! В общем, он очень классный! Всем советую! Спасибо Вам, Алексей, за такую ценную информацию.
Другова Наталья
Живу в г. Москва.
Начну с самого начала: я мама двоих детей в декрете уже 6 лет, сказать, что я занималась саморазвитием — ничего не сказать. И тут в центре занятости выдают распечатку курсов, выбрала самый длительный по академическим часам — маркетинг от РЭУ Плеханова. Две первых недели было очень сложно воспринимать информацию, была и усталость, и непринятие, и интерес, то какие-то качели, хотелось бросить учебу каждый из этих дней. Пока не появился Алексей Чесноков! Первое знакомство с преподавателем было интригующее, сразу захватил внимание, стало интересно, появился стимул учиться! На второй лекции уже практика! С Алексеем было спокойно и интересно учиться, моментами сложно давалась информация, но хотелось изучать, даже дополнительно изучать тему рассылок, Тильду, SEO, так как тема digital оказалась мне близка и по духу, а после сайта на конструкторе Тильда, у меня не оставалось сомнений, что всё получится! Я хочу выразить огромную благодарность Алексею Анатольевичу за приобретённые навыки и знания! И немного похвастаться: именно во время учёбы я уже делала сайт для своих знакомых, он им понравился и по сарафанному радио у меня во вторник появился уже заказ на создание дополнительных страниц и функций для сайта организатора свадеб! А в субботу мы с владелицей детского центра будем обсуждать создание сайта с нуля! Вот кто бы мог представить и поверить, что это могло случиться именно со мной и за такой короткий срок! Я с большим удовольствием буду рекомендовать курс Алексея Чеснокова людям с схожими интересами! Алексей лично мне дал не только хорошую базу знаний, но и помог поверить в себя, в свои силы! Самооценка моя повысилась и теперь у меня нет страха и неуверенности как раньше. Теперь я не боюсь ошибиться! Это оказывается не фатально, а норма) Алексей Анатольевич — замечательный преподаватель, психотерапевт и профессионал своего дела! Если начинать учиться, то только у лучших!
Володина Яна
Живу в г. Москва.
Попала на учет в службу занятости в связи с ликвидацией предприятия. Долго стояла на учете, ждала подходящего времени для того, чтобы пойти на обучение, и вот представилась возможность начать обучение осенью. Основной диплом получала давно, в 2010 году, по специальности «Мировая экономика». Хотелось пройти профессиональную переподготовку по предмету, который будет как-то связан с моим основным дипломом, чтобы профессия была в настоящее время востребованная и чтобы было интересно учиться. «Маркетинг, реклама и связи с общественностью» было самым подходящим вариантом. Курс Алексея Чеснокова по Digital-маркетингу для меня был самым интересным и полезным. Тут не было огромного количества теории, которая не всегда легко и хорошо усваивается, а была именно практика, которой так не хватает. Мы создавали чат-ботов в Телеграмме, делали сайт на конструкторе Tilda, запускали свою e-mail рассылку, настраивали SEO и рекламу на Яндексе. В моем архиве появилась куча полезных ресурсов и ссылок. Алексей объясняет все очень доступно, ориентируется на любой уровень подготовленности студентов, дает дополнительные материалы, чтобы отстающие могли подтянуться. Если чего-то не понимаешь или хочешь разобраться более досконально в каком-то инструменте, всегда можно обратиться к каналу Алексея Чеснокова на youtube, там очень много полезных видео. Теперь открыв вакансии маркетолога на хедхантере, я понимаю, какие навыки требуются для вакансии, все эти сложные слова стали для меня доступнее. Очень надеюсь, что моя будущая работа будет связана именно с digital-маркетингом. Спасибо большое Алексею за знания!
Васильцова Яна
Живу в г. Москва. Училась в Московский государственный открытый университет
Я очень благодарна Алексею за столь познавательный и полезный курс. Узнала много совершенно новой и полезной информации. Программа обучения была столь захватывающей, что с удовольствием погружалась в процесс обучения не только во время интенсивов, а еще и по ночам, во время выполнения домашнего задания (ибо днем — быт и дети, ага). Для меня — как графического дизайнера, самым увлекательным процессом в курсе (помимо остальных), был раздел о создании сайта на Тильде. Приобретенные во время обучения навыки и знания я уже успела применить, причем сайт на Тильде создала не просто за спасибо, а вполне по адекватной стоимости, а с момента окончания курса не прошло еще и месяца. Алексей впечатлил своими коммуникативными данными, умением заинтересовать в обучаемой дисциплине и своей многогранностью в познаниях. Алексей из тех людей, кто щедро делится ценными знаниями, для меня это важная профессиональная черта, поэтому, с полной ответственностью рекомендую курсы Алексея и в том числе его ютуб канал.
Черноус Элина
Живу в г. Москва. Графический дизайнер, фрилансер
Недавно я прошла курс по digital marketing у Алексея Чеснокова. Если бы мне два месяца назад сказали, что я сделаю сайт или чат-бота, я бы посмеялась. На данный момент, появилась уверенность в своих силах, а самое главное интерес (даже жаль, что курс закончился) 🙂 Мне очень понравилось делать чат-бота, похоже изнутри на нейросоединения, а когда все работает, то чувство радости и удовлетворения от проделанной работы. Также тема E-mail рассылки, очень интересная и актуальная. И конечно сделать полноценный сайт-визитку со всеми формами, ссылками, калькулятором, это вообще целая интересная история. Могу сказать, что было не легко с нуля все это делать и если бы не Алексей, то скорее всего оставила затею с интернет-маркетингом. Хочу поблагодарить Алексея прежде всего за полученные знания, которые однозначно пригодятся в дальнейшем, за его настойчивость, строгость, и чувство юмора:) Мой мозг начал работать в нестандартном для него режиме, удивляя самого себя. Алексей, спасибо за принесенную непоправимую пользу!:) Мне очень повезло попасть именно к Вам на курс (чего и всем кто хочет освоить digital marketing советую) .
Маментьева Дарья
Живу в г. Москва. Училась в РГГУ
Всё, что я узнала на курсе Алексея, было новое для меня! Алексей крайне терпеливый преподаватель, очень хорошо и интересно рассказывает, и объясняет. На основании полученных знаний и практик, я постараюсь найти работу в digital-маркетинге. Я оцениваю профессиональный уровень, как самый высокий. Его подача материала очень понятна, даже для новичка в этом направлении. Алексей правильно и доходчиво подаёт информацию. Слушать не скучно и интересно.
Левченко Кристина
Живу в г. Москва.
Что хочется сказать про курс Алексея Чеснокова по Digital-маркетингу: огонь! Доступно, интересно, полезно, применимо на практике. Отдельная благодарность Алексею за понятное разъяснение любого возникающего вопроса. Пришла на курс с поверхностными знаниями, а выпустилась, как говорится, вооруженной до зубов. Однозначно рекомендую.
Ольга Ламбина
Живу в г. Москва.
Прошла обучение Алексея по интернет маркетингу. Самый полезный курс из всех мною увиденных и пройденных. Все ясно и понятно. Все последовательно и по полочкам. Алексей рассказывает предельно понятно, много фишек. После курса можно сразу запускать сайт, так как он уже готов к работе. Прошли все с самого начала-от домена, до самого конца-размещение в Яндекс Директ. Более емкого и объемного курса нет мне кажется ни у кого. Помимо этого всегда есть обратная связь. Однозначно, если кто то хочет сделать для себя многостараничник и узнать о seo, рекомендую курс Алексея Чеснокова.
Кропотова Ольга
Живу в г. Москва.
На курсе Алексея Чеснокова по Digital-маркетингу было асолютно всё новое для меня. Во время обучения понравилось создавать сайт, чат-бота. Приобретенные во время обучения навыки, думаю, что это обязательно пригодятся на практике. Было очень интересно обучаться у Алексея! Единственная просьба, кликать чуть медленнее при объяснении. Многие из группы не успевали за Алексеем. Иногда Алексей объяснял чуть медленнее, но потом снова забывался 😉 Пройти курсы Алексея Чеснокова посоветовала бы.
Алексеева Елена
Живу в г. Москва.
Я пришла на курс без какой-то базовой подготовки в сфере digital-маркетинга. Не смотря на это курс зашёл на ура. Много практики, прямо с первых дней, что очень мотивирует и задаёт хороший темп занятиям. Кроме лекций и практических занятий, Алексей даёт много дополнительных ресурсов, что позволяет более ёмко изучить материал. После курса чувствую уверенность в своих силах, и уже применяю полученные знания в реальных проектах. Очень благодарна за насыщенный, но при этом интересный курс по digital-маркетингу, а так же за позитивный и искренний подход к работе Алексея.
Новикова Евгения
Живу в г. Москва.
Прошёл курс Алексея Чеснокова по обучению интернет-маркетингу. Получил много нужной и полезной информации, приобрёл необходимые навыки. А самое главное, сразу, в процессе обучения применил их на практике, в своём деле, создавая и оптимизируя сайт, подготавливая и осуществляя рассылки, контекстную рекламу. Было очень интересно. Занятия проходили динамично и за время обучения мы смогли не только в полном объёме получить и применить знания по Тильде, Сенд-пульсу, SEO и контекстной рекламе в Яндексе, но и дополнительно прослушать лекцию о продвижении на Ютуб. Если честно, очень хотелось бы ещё про продвижение в Инстаграм узнать (это очень модное и, как говорят, эффективное направление), но программа курса этого не предусматривала… Безусловно, рекомендую курсы Алексея (как вэбинарные, так и в записях на Ютуб) прежде всего, тем, кто только осваивает интернет-маркетинг. Он делает это очень доходчиво и терпеливо. Но и искушённые маркетологи, думаю, почерпнут для себя много нового и актуального из его уроков, т.к. интернет-сфера меняется очень быстро, а Алексей стремиться идти в ногу со временем и все изменения и новшества сразу старается отразить в своих занятиях. Спасибо большое, Алексей, за полученные знания и навыки! Успехов Вам в таком нужном и благородном деле просветительства и обучения самостоятельной творческой деятельности в интернете!
Сергей Баранов
Живу в г. Москва. Продюсер автора и исполнительницы духовных, народных и патриотических песен АННЫ СИЗОВОЙ
Курс Алексея Чеснокова был очень интересный и насыщенный. Не знала, что столько много нюансов в управлении и создании сайтами. Многие моменты я знала только на словах, но не углублялась никогда подробно. Больше всего понравилось создание сайта, его конструирование. В будущем если понадобиться создать сайт, думаю проблем не возникнет. Алексей очень подробно и доступно все нам объяснял. Спасибо за его терпение и помощь во время лекций, если мы что-то не успевали он останавливался и повторял. Безусловно если моим знакомым понадобится информация о курсах, я посоветую обучаться у Алексея Чеснокова.
Ольга Хохлина
Живу в г. Москва. Менеджер по корпоративному туризму в Академсервис
Алексей спасибо вам большое за ваш труд и терпение! Создание сайта на конструкторе Tilda, SEO, контекстная реклама совершенно новое для меня направление. Давно хотела изучить, и тут наконец-то появилась возможность. Планирую дальше развиваться в этом направлении! Так же очень пригодился дополнительно предоставленный материал, не входящий в программу курса. На курсе создала сайт для реального заказчика. Он остался доволен результатом.
Лукошина Анна
Живу в г. Москва. Веб-дизайнер на конструкторе TILDA
Не смотря на то, что я уже больше года работаю в сфере диджитал-маркетинга (настраиваю таргетированную рекламу в соц.сетях), для меня курс Алексея оказался очень полезным. Раньше я конструктора Тильда боялась как огня, даже внесение каких-то минимальных изменений вызывало затруднения и постоянно требовался специалист, который это сделает. Теперь же никого не надо ждать и звать, а можно взять и поправить то, что считаешь нужным. А может быть даже создать с нуля именно так, как понравится. Очень доступная подача материала. Не понять и не сделать просто невозможно. Блок по SEO однозначно пригодится, постараюсь максимально внедрить полученные знания на сайтах у клиентов и еще результативнее выполнять свою работу. Я непременно буду использовать все полученные навыки. Огромная благодарность за это! И отдельная благодарность Алексею за его терпение, не так уж и просто по 20 раз отвечать на одни и те же вопросы в течение 5 минут.
Екатерина Корзинкина
Живу в г. Москва. Таргетолог
Безусловно курс был очень полезным и информативным лично для меня, так как я не работала в Тильде. Мне это было необходимо для создания своего сайта и егопродвижения в будущем, так как я детский нутрициолог. Алексея считаю грамотным экспертом, материал был дан очень подробно, для чайников я бы сказала)))) И я уже порекомендовала его ютуб канал и курсы своим знакомым, кто работает в сфере маркетинга и IT.
Клочкова Анастасия
Живу в г. Москва. Детский нутрициолог
Курс был очень полезным для меня. Т.к. я новичок в этой области знаний, то весь материал — на вес золота. Очень понравился преподаватель и манера ведения лекции. Материал давался понятным доступным языком с использованием узко-специальной терминологии, но это ничуть не затруднило понимания и восприятия информации, поскольку все разъяснялось. Уверена, что приобретенные во время обучения навыки и знания пригодятся мне и в жизни и в профессии, т.к. они очень актуальны в современном мире и востребованы в разных профессиях. За профессиональный уровень Алексея Чеснокова ставлю высший балл! Грамотный преподаватель, знающий свою область знаний от А до Я. Для меня была большая честь обучаться у Алексея. Лучший из лучших в своей области. Если вы хотите овладеть профессией маркетолога, то рекомендую обучаться у Алексея Чеснокова, потому что от него вы точно не уйдете без знаний. А главное, получите не только теория, но и практику! Точнее, очень много практики!
Арманова Ирина
Живу в г. Новочебоксарск. Управляющая отелем в ООО МЭДИСОН
Программа повышения квалификации по Digital-маркетингу, которую преподавал Алексей Чесноков понравилась. Узнала очень много новой и интересной информации. Во время обучения были рассмотрены новые технологии, новые инструменты для работы и мне это понравилось. Перед тем как шла на обучение хотела расширить свои знания — ожидания оправдались. Алексею Чеснокову, необходимо дать Премию и Медаль, за терпение и отличную работу! Очень рекомендую посетить его курсы!
Алёна Молостова
Живу в г. Москва. Организатор мероприятий в Агентстве праздничных событий
Обучение прошло легко и очень быстро (даже хотелось, чтобы курс длился подольше). Много новой и полезной информации, а главное пришло понимание с какой стороны подступиться к SEO оптимизации. В программе обучения понравилось большое количество прикладный сервисов и навыков, которые можно применять сразу после занятия. Оценку Вам, Алексей, как преподавателю могу дать исключительно положительную, легко преподносите информацию, не воздвигаете барьеров между преподавателем и слушателем, это очень приятно, помогает построению легкого диалога. Понравилось, что много приводите примеров из собственной практики. Ожидания перед началом курса были – хотела получить базовые знания по SEO оптимизации, в целом, они оправдались. Все, что я узнала на курсе можно применить в работе уже сегодня. Курсы Алексея Чеснокова однозначно рекомендую!
Юлия Иванова
Живу в г. Москва. Бренд-менеджер Frederique Constant в компании ProTime Rus (ООО ПроТайм РУС).
Курсы мне понравились. Мои разрозненные знания структурировались! Понравилось живое общение c ответами на вопросы. Конкретика. Материалы презентации прекрасные. Это толчок к более углубленным знаниям в последующей работе. По курсу у меня замечаний нет. Единственное, хотелось бы в программе видеть для SEO-шников больше практических работ по написанию мета-тегов и сниппетов, с URL-ами для контекстной рекламы. Для владельца бизнеса и постановки задач для SEO и SMM менеджеров вполне нормально. Оценка Алексею, как преподавателю 5 из 5. Мои ожидания от курса оправдались. Интернет отдел зашевелился. Курсы Алексея Чеснокова рекомендую своим партнерам и специалистам. Ученье свет. Правда ученых стало тьма тьмущая.
Алексей, желаю Вам защитить кандидатскую, для получения ссылки МГУ )) Да и побольше удачи. Она в бизнесе одно из основных слагаемых успеха, вместе с упорством и знаниями!
Алексей Вольтер
Живу в г. Москва. Работаю в должности коммерческого директора в компании «О-Дизайн».
Мне, как человеку достаточно далекому от сайтов, продвижения, и всего того, что с этим связано, было интересно прослушать курс по SEO. Теперь стало понятно, что это и зачем нужно! Теперь буду пробовать применять полученные знания на практике. Материал излагался простым и доступным языком. Единственное, чего не хватало – это побольше практических заданий. В целом 9 из 10. Так что ожидания от курса оправдались. Обязательно порекомендую Ваши курсы!
Алексей, хочу пожелать Вам дальнейшего профессионального роста и прибыльных проектов. Удачи!!
Симонова Марина
Работаю в должности бухгалтера.
Курс Алексея Чеснокова от других отличает особая душевность в подходе и вера в учеников. Я очень довольна процессом обучения. К своему удивлению смогла сделать то, за что боялась даже подумать браться. Хочется отметить спокойное внятное объяснение. Достаточно интересный рассказ. Все мои ожидания от обучения оправдались – я научилась делать сайты.
Спасибо за курс! Желаю вам крепкого здоровья и нервов)
Наталья Радик
Живу в г. Москва, Изучала Economica в МИЭТ. Сейчас работаю маркетологом в компании «Стартап под ключ». Ранее работала директором по продажам и развитию в «КриоРус».
Программа обучения мне понравилась. Порадовал подход в донесении материала, а главное заинтересованность преподавателя в донесении информации до слушателей. Все понятно и интересно. Впечатлило желание Алексея Чеснокова донести материал до слушателей, поделиться своим личным опытом, наладить контакт с аудиторией. На курс пошла потому, что хотела понять, как работать с рекламой в современных источниках интернета. Мои ожидания полностью оправдались, что хотела, то и получила.
Желаю вам успеха, интересных проектов и благодарных слушателей!
Ксения Топунова
Живу в г. Москва, училась МЭСИ. Сейчас работаю в компании Ситилинк, ранее работала в МТС и Мегафон
Алексея Чеснокова от других преподавателей отличает харизма и вовлеченность в свою работу. Программа курса интересная, много полезной информации. Понравилось умение преподавателя интересно излагать материал и держать внимание аудитории, его профессионализм. Ожидания от курса оправданы, базовые навыки я освоила.
Карьерных высот вам!)
Татьяна Ляхова
Работаю менеджером в компании CashWagon
Интересный материал, приятная манера общения, структура курса – считаю, что именно эти моменты отличают Алексея Чеснокова от других преподавателей. От обучения получила только положительные впечатления – чувствую, что время провела с пользой, узнала новое и релевантное моим потребностям. Единственное чего не хватило в программе курса, это возможности сделать что-то самостоятельно, например, кейс какой-нибудь. На мой взгляд, нужна практическая часть. Курс, который я посетила – разработка сайтов, примерно так назывался, кажется. Мне было полезно узнать про разные движки и платформы, структуру сайта. Хорошо, что у были примеры успешных и неуспешных сайтов.
Оставайтесь таким же вдохновлённым – это важно для любого дела и преподавания в частности!
Мария Клеймёнова
Marketing Category Director в Adidas CIS
Я проходил курс Алексея Чеснокова почти полгода назад. Минусов не обнаружил, все понравилось. Изучил много полезной информаций. Искренне благодарю за реально захватывающее ведение лекций.
Константин Марин
Живу в Москве. Учился в Moscow Technical University of Communications and Informatics. Основатель / владелец в ОПС Брокер . Менеджер по развитию в МИЭЛЬ
Хотел оставить отзыв о самом простом преподавателе с большим опытом, который проявляется знанием своего дела и получение разверзнутого ответа в доходчивой форме. Не думал, что за такой короткий срок получу особо большую пользу. Но Алексей это сделал довольно круто, раскрывая темы последовательно и не поддаваясь на длинные умозаключения по сторонним вопросам, отсылая для этого к своим контактам и готовностью позже в не урока дать развёрнутый ответ. Спасибо, Алексей, за лекцию и позитивный настрой, удачи в аспирантуре!
Саид Урусханов
Заместитель директора дизайн студии Дени Мадаева
Очень понравилась креативность преподавателя, вовлеченность в процесс, его ораторское искусство и легкость передачи знаний. Благодаря этому большой объем практических знаний легко умещается и переваривается в котелке. Информация на курсе излагалась последовательно и лаконично. Профессионализм, организованность, оптимизм и контактность – все это однозначно сильные стороны Алексея Чеснокова. Удивила его готовность транслировать информация круглосуточно, без перерывов. Был замечен легкий переход на сторонние темы (хотя в моем случае это даже плюс). Мои ожидания от курса «Яндекс Директ» оправдались, получила практический опыт и знания в изучаемой области.
Желаю вам оставаться таким же жизнерадостным, открытым и креативным, совершенствовать свои знания и навыки, продвигаться в новых областях)))
Светлана Федотова
Маркетолог (тендер-менеджер) в ООО «ГДЦ ЭНЕРДЖИ ГРУПП»
Затрудняюсь дать оценку лектору, так как не с чем сравнивать, у преподавателей по созданию сайта никогда не был. Это мой первый курс по данной теме. Легко, драйвово, продуктивно – это мои впечатления от процесса обучения. Алексей Чесноков практик, ему нравится преподавать и делиться опытом (это видно). И, главное, он умеет объяснять сложное простыми словами. Минусов не нашёл). Когда шел на курс думал, что я полностью разберусь как работать при создании сайтов и смогу грамотно выстроить работу подрядчика, а также смогу убедить руководство, что у нас есть проблемы по этой части, и нам нужно менять подрядчика. А ещё я надеялся, что смогу сам «руками» работать по этому направлению. Ожидания не совсем оправдались, так как после 6 часового блока по созданию сайта в рамках digital курса все равно остались вопросы. Мне не хватило времени, чтобы спросить то, чего не было в презентации.
Желаю вам удачи в вашем деле)))
Sergey Stepanian
Живу в г. Москва. Учился в РГГУ. Senior PR & Advertising manager в компании Линлайн (Сеть клиник лазерной косметологии и пластической хирургии)
Курс для меня был интересным, Алексей очень доступно все объяснял. Жаль, что мало времени отведено обучению и далеко от дома (живу в Зеленограде). Хотелось бы большей адаптации программы к гос.мед.организациям – это особая печалька, продвигать госку. Перед началом обучения никаких ожиданий не было.. затащили меня сюда случайно, но я этому рада.. правда, тема не моя, а скорее техподдержки, сисадминов, СЭОшников.. но близка мне, поскольку работаем в этом направлении, я отвечаю за ПИАР больницы.. Получила много интересного материала (пока не могу его изучить, к сожалению). Влезла в метрики — ИНТЕРЕСНО. только времени нет на все это, к сожалению. этим должен заниматься целый отдел, или хотя бы отдельный специалист. а я швец и жнец. и на дуде.. и крестиком. и на машинке.. Курсы Алексея Чеснокова рекомендую однозначно!
Алексей, Вы прекрасны! Иногда Вас уводит в рассуждалки, от темы… иногда перескакиваете, не дожав интересное и важное. но в целом, супер! Желаю Вам адекватных клиентов, прибыльных заказов, минимальной зависимости от дурацких гос.структур, но стабильной поддержки от них))) Творчества, сбычи желаемого и крепкого ЗДОРОВЬЯ.
Ирина Пономаренко
Живу в г. Зеленоград. Работаю в Пресс-службе ГБУЗ «ГКБ им. М.П. Кончаловского ДЗМ»
Впечатления от обучения на отлично! Материал дан в полной мере, понравилась последовательность подачи материала и важные заметки/комментарии. Сложно сказать, чем еще можно улучшить программу, наверняка курс и так оттачивается от потока к потоку. Моя оценка Алексею, как преподавателю строго положительная. На курс пошел, поскольку нужны были базовые знания по AdWords, а по итогу получил углубленные. Курс Алексея Чеснокова безусловно рекомендую
Алексей, желаю вам здоровья, личностного и профессионального роста, и возможность заниматься любимым делом!
Максим Рыков
Живу в г. Москва. Учился в МосГУ . Маркетолог в компании Ли-Арт Авто
Курс мне очень понравился, интересный, насыщенный и все рассказано простым языком. У Алексея интересный подход к преподаванию, лично меня порадовала неформальность общения, разбор примеров на практике – все было отлично. Единственное, по программе обучения хотелось бы больше часов. Моя оценка за курс 10 по 5-ти бальной шкале!! Ожидания от обучения оправдались с лихвой! Спасибо! Обязательно буду рекомендовать ваши курсы коллегам и друзьям.
Успехов вам и хорошего настроения!
Дайняк Елена Владимировна
Живу в г. Москва. Училась в КемГУ и в Гимазия 12. Работаю в Инфекционная клиническая больница №2
После прохождения курса у меня остались отличные впечатления, с нулевого понимания Директа, могу сказать, что уже хоть и не много, но разбираюсь. Программа обучения имеет практикоориентированность, а для меня это крайне важно. В целом мне все понравилось, разве что порекомендовал бы актуализировать некоторые данные в презентациях, тогда программа станет еще лучше. Как преподавателя могу оценить Алексея Чеснокова только положительно, все качества соответствуют. Курс превзошёл мои ожидания, рекомендую всем Алексея Чеснокова. Удачи вам и успехов в маркетинге!
Александр Сходкин
Живу в г. Москва. Работаю в МИЮ
В целом, я люблю учиться и информация, которая была на курсе по Интернет-маркетингу для предпринимателей воспринималась быстро. Только для мам с маленькими детьми на мой взгляд — очень непросто. Особенно когда идут практические задания. И длительность 5 часов в день — это много. Ориентировочно 2-3 часа в день достаточно. Пусть курс будет лучше длиннее. Я шла на курс с целью изучить таргетинг — он понравился, так же ещё понравилась Тильда. Именно для меня хотелось более углубленно разобрать контекстную рекламу. Алексею оценка как преподавателю только 5 — профессионал. Терпение у Алексея колоссальное. Ожидания от курса оправдались. Понимала на что иду. Я бы точно рекомендовала пойти на курс Алексея Чеснокова. Так как Алексей — всё объясняет доступно, даже тому, кто ни разу не занимался маркетингом.
Марина Сливченко
менеджер по туризму в Тез тур,
Впечатления от процесса обучения исключительно положительные. Получать знания стало доступнее. В программе понравилось само обучение и работа на конструкторе Tilda. Ожидания от курса были более классические, что будет поток сухой информации, по факту это был интерактив, который, на мой взгляд, усваивается легче и быстрее. Оценка Алексею Чеснокову как преподавателю, однозначно выше среднего. Это был первый опыт дистанционного обучения, не с чем сравнить, поэтому дать определенный балл — это относительная оценка будет. Посетить ли Вам курсы Алексея Чеснокова? Да, я бы порекомендовала.
Используйте фавиконки правильно
Фавиконка (favicon) — это иконка, которая отображается во вкладке браузера перед названием страницы. Также эта иконка отображается в закладках и на рабочем столе для веб-приложений.
Подключение
Чтобы иконка начала отображаться, на вкладке нужно подключить файл с графическим отображением иконки. Для правильного подключения иконки нужно использовать обязательные требования браузера и минимальный набор фавиконок, который мы сейчас подробно рассмотрим.
Почему именно набор, а не одну иконку? Дело в том, что браузеры и экраны развиваются и не стоят на месте. Чем современнее браузер, тем более современный формат он может поддерживать. Например, вы можете подумать, что можно подключить только одну SVG-иконку и браузер уже сам правильно отрисует её, но не все браузеры до сих пор поддерживают SVG-формат для фавиконок. На таблицу совместимости SVG-фавиконок можно посмотреть тут.
Обязательная фавиконка
Все — старые и новые — веб-серверы и браузеры поддерживают .ico-формат.
Для подключения нужно добавить в :
Обратите внимание на две детали: размер и расположение.
Размер. В интернете можно найти информацию, что нужно подключать фавиконку в формате .ico в размере 16×16. Это так и не так. Дело в том, что контейнер ico динамический и он может изменять размеры «на лету». Поэтому браузеры, которые понимают размер 16×16, сами сожмут 32×32 до необходимого. В каком случае нужно создавать favicon.ico в размере 16×16? Когда фавиконка размером 32×32 при сжатии начнёт мылиться (будет нечёткой). Это можно проверить вручную, сжав фавиконку с 32×32 до 16×16. Если размыливание картинки произошло, то без дизайнера не обойтись и придётся отрисовывать фавиконку вручную в графическом редакторе.
Расположение. Фавиконку в формате ico обязательно нужно класть в корень проекта, как это показано в примере выше. Дело в том, что любой веб-сервер незаметно для вас всегда ищет favicon.ico в корне проекта и пытается её подключить к сайту.
Дополнительные необходимые фавиконки
Расположение. Только favicon.ico должна лежать в корне проекта. Остальные иконки могут лежать в любом месте в проекте, например:
project/ favicon.ico img/ 180.png 192.png 512.png icon.svg
Или можно сгруппировать все фавиконки, чтобы отделить от других изображений в проекте:
project/ favicon.ico img/ favicons/ 180.png 192.png 512.png icon.svg
SVG
Если современный веб-браузер умеет работать с векторными фавиконками, то этот формат более предпочтительный: меньший вес, наилучшее качество, поддерживает смену тем, не нужно указывать размер.
Подключение точно такое же, как и для favicon.ico, только нужно добавить тип, чтобы браузер понимал, с чем имеет дело:
Для устройств Apple
Apple пошли по другому сценарию развития и предложили собственные размеры фавиконок для своих устройств — iPhone и iPad. Формат для подключения favicon для Apple поддерживают все современные браузеры.
Самым востребованным размером для старых устройств фавиконок стал размер 180×180. Давайте посмотрим пример подключения:
Подключив такую иконку, мы также поддержим старые устройства, которые не умеют работать с таким большим размером фавиконки и уменьшать её до нужных размеров.
Устройства Apple работают и с большими размерами иконок, но так получилось, что устройства, которые понимают большие размеры, можно подключать более современным способом с помощью манифеста. Манифест позволит скрыть подключение всех размеров из , что сделает разметку более читаемой.
Манифест
Манифест — это JSON-файл со всеми подробностями веб-приложения для браузера. Формат был разработан Google по инициативе PWA.
Чтобы добавить фавиконки с помощью манифеста, нужно подключить манифест, а в манифесте указать все иконки и их размеры, которые мы хотим подключить на сайт.
Файл. Создадим файл в корне проекта и назовём его manifest.webmanifest. Расширение .webmanifest нужно указать, чтобы браузер понимал, с каким файлом имеет дело. Само название файла может быть любым (в нашем случае — manifest).
Так как манифест — это JSON-файл, то он должен начинаться с открывающей скобки < и заканчиваться закрывающей скобкой>.
manifest.webmanifest
Внутри скобок нужно создать секцию иконок. Секция с иконками ожидает несколько иконок, поэтому добавим массив []:
manifest.webmanifest
Осталось добавить фавиконки по шаблону:
manifest.webmanifest < "icons": [ < "src": "", "type": "", "sizes": "" >] >
Если иконок несколько, то их нужно добавить через запятую:
manifest.webmanifest < "icons": [ < "src": "", "type": "", "sizes": "" >, < "src": "", "type": "", "sizes": "" >, < "src": "", "type": "", "sizes": "" >] >
Размеры. В манифесте мы укажем размер 192×192 и 512×512. 192 — так как это следующий размер после 180, а 512 — так как это очень большой размер для фавиконки, его будет достаточно. А что с промежуточными разрешениями? Всё хорошо: как и раньше, браузер сожмёт картинку к нужному размеру. Например, из 512 до 256.
manifest.webmanifest < "icons": [ < "src": "images/favicons/192.png", "type": "image/png", "sizes": "192x192" >, < "src": "images/favicons/512.png", "type": "image/png", "sizes": "512x512" >] >
- src — путь до иконки;
- type — тип иконки;
- sizes — размер иконки.
Можно добавить дополнительные размеры иконок, если этого требует браузерная поддержка вашего проекта. Например, вам потребовалась иконка 256×256. Давайте добавим её:
manifest.webmanifest < "icons": [ < "src": "images/favicons/192.png", "type": "image/png", "sizes": "192x192" >, < "src": "images/favicons/256.png", "type": "image/png", "sizes": "256x256" >, < "src": "images/favicons/512.png", "type": "image/png", "sizes": "512x512" >] >
Откуда брать фавиконки и как их приготовить
Фавиконки — это ответственность верстальщика. Дизайнеры в большинстве случаев про фавиконки не знают, поэтому не предоставляют их с макетами.
Если дизайнер не предоставил фавиконки, у верстальщика есть два пути:
- Не добавлять фавиконки в проект.
- Попросить дизайнера отрисовать фавиконку (лучше в векторном формате). Рассказать, что требуется отрисовать иконку в квадрате. Сама иконка может быть круглой или даже овальной, но изображение должно быть вписано в квадрат с пропорциями 1:1.
Векторный формат позволит растянуть фавиконку до нужных размеров (192, 256 и даже 512) без потери качества. Таким образом верстальщик сможет сгенерировать себе нужные размеры и подключить их к странице.
При генерации фавиконок с помощью сторонних сервисов всегда смотрите на получившийся результат. Чаще всего иконки получаются замыленными. Даже если брать хороший оригинал 512×512, то при уменьшении до 32×32 всё равно могут появиться артефакты.
Для генерации фавиконок используйте сервис favicon-generator: экспортируйте изображение фавиконки в формате PNG, добавьте это изображение в сервис генерации фавиконок, нажмите кнопку «Create favicon», а потом — ссылку «Download the generated favicon». Вы скачаете архив со всеми возможными вариантами фавиконок. Возьмите favicon.ico и другие необходимые версии, подключите к странице проекта.
Итог
Итоговый способ подключения фавиконки:
manifest.webmanifest
Таким способом мы будем поддерживать самые старые браузеры и самые новые.
Ничего страшного, что список одной фавиконки получился столь длинным — 4 пункта. Во-первых, браузер загружает фавиконку асинхронно. Во-вторых, он сначала посмотрит на весь список фавиконок и загрузит только одну — самую подходящую.
Фавиконки — часть программы курса «HTML и CSS. Профессиональная вёрстка сайтов». Кроме этого в комплекте два месяца теории и практики, интересные проекты и личный наставник. А по промокоду SKUCHNO — скидка 1000 ₽.
Как добавить фавикон на сайт
Откройте несколько сайтов и посмотрите на меню вкладок. В каждой вкладке слева вы увидите небольшой значок-логотип. Он помогает проще ориентироваться в сайтах, особенно когда открытых вкладок много. Этот элемент называется «фавикон», и он решает много важных задач. Рассказываем, как создать фавикон и для чего он нужен.
Содержание статьи скрыть
Что такое фавикон
Слева от названия сайта вы видите зелёно-чёрный значок. Это и есть фавикон
Фавикон — графический элемент на сайте или конкретной странице. Дословно в переводе с английского favicon это слово означает «значок для избранного».
В марте 2021 года этому небольшому, но важному элементу исполнилось 22 года. Впервые мир узнал этот термин в 1999 году: он появился вместе с обновлённой версией браузера Internet Explorer 5. Сегодня фавикон — обязательный атрибут любого уважающего себя сайта
Фавикон отображается на вкладке любого сайта практически во всех браузерах. Его можно увидеть в поисковой выдаче яндекса и гугла, он отображается в мобильных версиях веб-ресурса.
В классическом варианте — это изображение размером 16*16 пикселей. В таком виде он хорошо читается в большинстве браузеров. Но есть отступления от нормы: максимально допустимый размер — до 512 пикселей в обоих измерениях.
При создании ФИ важно тестировать то, как он будет смотреться в разных размерах и форматах, обращать внимание на его читаемость с телефона и с ПК.
Ежедневные советы от диджитал-наставника Checkroi прямо в твоем телеграме!
Подписывайся на канал
Подписаться
Зачем нужен фавикон
Вот несколько основных причин:
- Повышает узнаваемость бренда . Иконка во вкладке — такой же элемент стиля, как логотип, фирменный цвет. Это полноценная деталь, без которой образ бренда в интернет-пространстве будет незавершённым. Визуальные элементы запоминаются быстрее, чем текст. Когда пользователь открывает вкладку, он ориентируется на изображение слева — так маленькая картинка как логотип работает на то, чтобы сделать бренд узнаваемым.
- Увеличивает кликабельность. В поисковой выдаче сайты с фавиконкой привлекают внимание больше, чем страницы, на которых этого элемента нет. Если иконка отражает ваш стиль и привлекает внимание яркими красками или необычным дизайном — шансы, что пользователь кликнет по ссылке, возрастают.
- Вызывает доверие. Сегодня фавиконки нет только у недоделанных, заброшенных сайтов, поэтому его отсутствие всегда вызывает сомнение в надёжности ресурса. Если же этот элемент есть и он привлекает внимание, доверие пользователей увеличивается.
Впишите в поисковую строку любой запрос. На всех сайтах, которые показала платформа, есть фавикон. Мы пролистали 10 страниц и не смогли найти ссылку без этого незамысловатого элемента
Какой формат использовать
ICO. Раньше использовали фавикон только в формате ICO. Его главная особенность — в файле могло сохраняться несколько вариантов размера значка. В настоящее время он не так популярен, хоть и до сих пор используется.
PNG. Сегодня предпочтительный формат файла для такой иконки — PNG. Он отображается корректно во всех браузерах: Chrome, Opera, Firefox, Safari и др. Качество иконки будет одинаково высоким, независимо от типа устройства: на десктопе, в том числе на маке и в мобильном устройстве — на андроиде и в айфоне.
Допустимые варианты . Файлы в форматах JPEG, SVG и GIF тоже подойдут, но бывает, что в этих форматах могут быть проблемы с отображением.
Файлы JPEG и GIF часто сжимаются с потерей качества, SVG хоть и не теряет в качестве, но может не отобразиться в браузере Internet Explorer версии 8 и ниже
На что обратить внимание при создании фавикона
Фавикон можно считать особой версией логотипа, поэтому он должен быть хорошо различимым даже в маленьком размере. Добиться этого иногда сложно, особенно если на логотипе есть слова, мелкие графические элементы, большое количество цветов.
Но есть несколько лайфхаков:
- Возьмите из основной версии логотипа отдельный фрагмент . Выберете участок изображения, который привлекает внимание больше всего. Используйте этот элемент для создания — так вы и стилистику сохраните, и сделаете иконку визуально более совершенной.
- Упростите графический знак логотипа . Уберите лишние детали, оставьте крупный элемент. Фон лучше кардинально не менять, чтобы иконка была похожа на остальные стилистические элементы. Если это важно — измените его на 2-3 тона, не более.
- Измените пропорции элементов. Например, на логотипе есть тонкие линии, которые будут незаметны на небольшом изображении. Достаточно сделать их чуть шире, и картинка готова.
- Сделайте новый значок. Если первые три варианта не помогли, остаётся придумать что-то новое, но в стиле сайта. Например, вы можете сохранить цветовую гамму, а поменять графические элементы. Если во всех остальных визуальных элементах используются прямые линии, сделайте значок таким же, не заменяйте их на плавные.
При создании нужно учитывать требования поисковых систем. Самые популярные системы — яндекс и гугл, поэтому в таблице мы собрали основные моменты каждой.
Альтернативные варианты: JPEG, PNG, GIF без анимации, ICO
- Корректно отображаться будет любая картинка, если она соответствует требованиям сервиса в плане размера и формата
- Если сайт недоступен для робота, скачается иконка хостинга со страницы-заглушки сайта. В поиске вместо установленной вами иконки появится произвольная.
- Если нужно изменить изображение в результатах поиска — обновите его на сайте
Не рекомендуется загружать изображения размером 16*16
- Важно, чтобы картинка совпадала с графическим оформлением веб-ресурса
- Не рекомендуется часто менять адрес, по которому доступен фавикон
- Запрещены неприемлемые изображения, например свастику, площадка удалит
Сервисы для самостоятельного создания фавикон
Вы можете создать фавикон самостоятельно, даже если совсем не дизайнер и не умеете работать в графических редакторах. В интернете есть понятные бесплатные сервисы, которые позволяют создать стильный и узнаваемый значок за несколько минут.
Favicon.cc
На сайте Favicon.cc вы сможете нарисовать собственный фавикон с нуля или импортировать изображение с устройства для создания значка из логотипа. Когда закончите работу, изображение можно скачать и разместить файл в каталоге вашего сайта. Сервис позволяет создавать анимированные иконки.
Genfavicon.com
Сайт Genfavicon.com позволяет конвертировать любое изображение, независимо от формата и размера. Когда всё будет готово, вам останется сохранить его в формате .ico. Сервис работает на нескольких языках и есть опция предварительного просмотра.
Realfavicongenerator
Чтобы создать фавикон на сервисе Realfavicongenerator, загрузите изображение размером не менее 70*70 пикселей. Оптимальный размер для создания качественных читабельных иконок — 260*260 и больше. Дальше вы сможете поменять фон, настроить отступы и подобрать цветовую гамму.
Когда всё будет готово, вы получите пакет файлов, которые нужно скачать и добавить на сайт код.
Faviconit
Исходный файл, который вы должны загрузить на сайт Faviconit, должен быть размером 310*310 пикселей, вес — не более 1 мегабайта. Вы можете задать имя иконки и указать папку хранения. Готовый вариант вы получите в виде папки с файлами. Откройте его, внутри увидите текстовый файл с кодом, который нужен для встраивания значка на сайт.
Если вы хотите создавать не только иконки, но и другие дизайны: макеты сайтов, баннеры, логотипы — идите на курсы. В агрегаторе Checkroi собраны актуальные полезные курсы по графическому дизайну
Как установить фавикон на сайт
Когда вы создали картинку, его нужно загрузить на сайт. И тут многие теряются: нужно вписать код, добавить файл, но куда и как — непонятно.
Алгоритм действий будет такой:
- Сохраните элемент в корневом каталоге . Имя изображения — favicon.ico. У вас должен получится адрес подобный этому — https://sitename.ru/favicon.ico. Он нужен, если вы планируете ставить разные значки для разных страниц. Если будете использовать один ФИ для всех ситуаций — указывать адрес необязательно.
- В HTML-код главной страницы добавьте ссылку на изображение . Код будет выглядеть так: .
Процесс установки ФИ на сайт зависит от CMS.
Для CMS WordPress. Можно повторить алгоритм, о котором говорилось выше или использовать плагин Favicon by RealFaviconGenerator. Прежде чем устанавливать иконку на сайт, познакомьтесь с официальными документами WordPress о фавиконках.
Для CMS Joomla. Сохраните изображение в директорию /joomla/templates/. Изучите информацию о ФИ на сайте CMS в разделе «Документация».
Как создавать фавиконки для разных браузеров и устройств
Технически проще сделать один значок в стандартном формате, который будет отображаться во всех браузерах и на всех устройствах. Но есть риск, что в отдельных вариантах качество изображения может стать хуже: например, при сжатии для мобильного устройства.
Файл favicon.ico — стандартный пакет, в котором могут хранится разные фавиконы. Разместите в нём изображения разных размеров: 16*16, 32*32, 48*48. Такой контейнер обеспечит корректное отображение иконки на любых платформах: Chrome, Opera, Firefox, Safari, «Яндекс.Браузер» и др.
Чтобы иконка отображалась на мобильных устройствах, её нужно сжать.
Загрузите изображение в формате .png. Оптимальный размер — 180*180 пикселей. Значок и его расположение можно указать через спецификацию Web App Manifest. В ней вы найдёте описание JSON-файла, в котором можно указать значки, их данные для веб-ресурсов и мобильных приложений.
Рекомендованный размер фавикон для iOS — 180*180, но допустим 57*57. Формат — PNG. В Safari такие файлы именуются как Web Clips. Изображения прекрасно отображаются в других браузерах и смотрятся качественно: картинка чёткая, углы автоматически округляются при добавлении приложения на главный экран телефона. apple-touch-icon.png — так вы должны указать файл в rel.
Освойте программирование, и вы сможете не просто добавлять фавиконку на сайт, но и запустить веб-ресурс с нуля. Выбирайте подходящий курс в подборке курсов по пр ограммированию
Подведём итог
Фавикон — иконка для сайта. Пользователь видит его в открытой вкладке слева, в истории браузера, при загрузке мобильного приложения. С её помощью вы повышаете узнаваемость сайта, даёте пользователю возможность находить его среди нескольких открытых вкладок, увеличиваете количество кликов. Качественная картинка — маленькая по размеру, корректно отображается и вписывается в общую стилистику сайта.
Создать иконку помогают интернет-сервисы — большинство из них бесплатны. Вы можете создать изображение с нуля или изменить существующее изображение, например логотип. Когда вы создадите изображение, генератор выдаст вам варианты разного размера и кусок кода. Изображения размещайте в корневой папке, код же пропишите на главной странице.