У вас есть два варианта, когда вы хотите встроить значок с HTML. Тем не менее, имеет смысл ссылаться на образный знак через элемент HTML. Генератор — лучший способ создать правильный логотип.
Что такое фавиконки и для чего они нужны?
Фавикон (слово-портмоне, состоящее из слов «фаворит» и «значок») — это небольшой образный знак, который, например. Б. отображается на вкладке этой вкладки в виде белой буквы «И» на синем фоне. Маленькая иконка не только обеспечивает высокую узнаваемость на вкладках, но также используется, например. также отображается на панели инструментов, в закладках, в списке приложений или в результатах поиска вашей поисковой системы.
Так создается фавикон
Прежде чем вы сможете встроить значок с помощью HTML, вы должны сначала создать его самостоятельно. Вы также найдете ценные советы по этому поводу в руководстве, указанном выше. Вы должны убедиться, что изображение работает как в низком, так и в высоком разрешении и сразу узнаваемо как часть вашего бренда. Соответствующие разрешения, которые работают для большинства браузеров, составляют 16×16 или 32×32 пикселей, и изображение должно быть сохранено в формате.ico,.gif или.png, если это возможно. Тем не менее, самый простой способ создать его — использовать хороший генератор фавиконов для HTML.
Встроить фавиконку с помощью HTML
Самый безопасный способ включить ваш значок — это сослаться на него через HTML. Для этого загрузите образный знак в основную директорию вашего домена. Здесь мы шаг за шагом объясним, как интегрировать иконку на ваш сайт.
Шаг 1: Сначала создайте иконку в нужном формате. Убедитесь, что изображение имеет правильный размер для фавикона, имеет максимально возможную контрастность, а также работает с низким разрешением.
Шаг 2: Загрузите значок в корень вашего домена.
Шаг 3: Теперь перейдите в шапку вашего сайта и введите следующий код:
<link rel="icon" type="image/vnd.icon" href=" (DER GENAUE PFAD/DATEINAME.ico">
Однако этот способ работает только в том случае, если вы включаете значок в формате.ico на свой веб-сайт. Для.png соответствующий код выглядит следующим образом:
<link rel="icon" type="image/png" href=" (DER GENAUE PFAD/DATEINAME.png">
Если вы создали свой значок для HTML в формате.gif, используйте этот код:
<link rel="icon" type="image/gif" href=" (DER GENAUE PFAD/DATEINAME.gif">
Установить фавикон без кода
Однако, если вы хотите встроить иконку в HTML, есть гораздо более простой способ. Вам не нужно писать код самостоятельно, просто создайте файл и правильно назовите его. Создав логотип в правильном формате, сохраните его как favicon.ico, а затем поместите в корневой каталог вашего домена. Этот метод работает только в том случае, если вы правильно укажете имя. Обратите особое внимание на полный нижний регистр.
Однако такая интеграция фавикона с HTML также имеет два недостатка: во-первых, большинство, но не все браузеры распознают этот способ. Во-вторых, эта процедура означает, что все поддомены, созданные под основным доменом, также отображаются с этим значком. Поэтому гораздо более безопасным методом является тот, который описан выше.
Включить фавиконы для адаптивных веб-сайтов
Встраивание фавиконки имеет множество преимуществ. Ваш сайт будет выглядеть более профессионально, его будут быстрее находить и он будет иметь последовательный дизайн. Однако маленький символ еще более важен, когда речь идет об оптимизации для мобильных устройств, таких как смартфоны или планшеты. Например, мобильным устройствам нужен фавикон для сохранения веб-сайта с сенсорным значком на главном экране. Устройство использует для этого сохраненный файл изображения. Однако, поскольку между различными провайдерами есть различия, вам следует создать несколько форматов при интеграции вашего фавикона:
- Файл.ico, который особенно необходим для старых браузеров. В данном случае имя файла — favicon.ico.
- Файл.png для новых браузеров. Это называется favicon.png.
- Значок Apple Touch для Android Chrome и iOS Safari. Это имеет формат 128×128 пикселей.
Проще всего создать все файлы с помощью подходящей программы, такой как IONOS Favicon Generator.
