Как вставить логотип на вкладке html
Перейти к содержимому

Как вставить логотип на вкладке html

  • автор:

Как сделать иконку сайта?

Для начала разберемся, что такое иконка сайта и где мы её можем наблюдать. Иконка сайта это небольшое изображение 16х16 пикселей в формате ico . которое можно увидеть в адресной строке, «закладках», «избранном» «истории», заголовках страниц в браузерах,

иконка сайта в браузере Opera

а также в результатах поиска поисковой системы Яндекс

иконка сайта в поисковой системе Яндекс

Иконки сайтов так же можно увидеть в некоторых каталогах сайтов, сервисах аналитики и статистики сайтов, RSS лентах.. и прочих местах бескрайних просторов сети Интернет.

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

Как подключить иконку к своему сайту?

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

Напомню, тег имеет атрибуты:

  • href — Путь к файлу.
  • rel — Определяет отношения между текущим документом и файлом, на который делается ссылка.
    • shortcut icon — Определяет, что подключаемый файл является иконкой.
    • stylesheet — Определяет, что подключаемый файл содержит таблицу стилей.
    • application/rss+xml — Файл в формате XML для описания ленты новостей.

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

    Где favicon.ico название иконки лежащей в корневой папке сайта.

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

    Однако всё же лучше связывайте иконку со страницей сайта тегом




    Иконка сайта


    Моя любимая страничка!

    Эта страничка использует индивидуальную иконку в виде сердечка.


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

    Как самостоятельно изготовить файл favicon.ico?

    Найти в Интернете готовую подходящую иконку в коллекциях иконок..

    Изготовить иконку с помощью какого либо онлайн сервиса. Наиболее популярным сервисом, создающим иконки для сайта, в русскоязычном Интернете, является ресурс www.favicon.ru

    Всё просто заходите на данный ресурс, загружаете большое размером изображение (желательно квадратное) только весом не более 300кб.. ну например логотип сайта, жмете кнопку «Создать favicon.ico» на выходе скачиваете уменьшенную копию этого изображения 16х16 (а так же по желанию 32х32 и 48х48) пикселей в формате ico. Достаточно удобный ресурс позволяющий быстро создавать иконки приемлемого качества.

    Ну и третий способ:

    Лучше всего, конечно, нарисовать иконку самостоятельно, в которой каждый пиксель будет именно таким каким Вы желаете его видеть. Однако большинство популярных графических редакторов типа фотошопа не желают сохранять изображение в формате ico.. Но не беда!! В Интернете гуляет масса редакторов иконок хороших и не очень, платных и бесплатных, функционально простеньких и жутко навороченных.

    Лично я пользуюсь не сильно хитрой программкой — редактором иконок, но пользуюсь ей не так, как задумывали авторы.. Я сначала рисую иконку в привычном мне фотошопе, сохраняю её в формате jpg, потом открываю это изображение с помощью этой нехитрой программки и сохраняю его же уже в формате ico. Короче использую программку в качестве «конвертора», а не графического редактора.. программка называется IcoFX впрочем, как уже сказано выше существует куча других программ, так что не стоит останавливаться именно на этой!! Это я к ней приловчился, а Вы, может быть, найдете, что ни будь более удобное для себя.

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

    Чтобы добавить иконку на сайт HTML, нужно выполнить следующие шаги:

    1. Создайте иконку размером 16×16 или 32×32 пикселей. Лучше всего использовать формат PNG или ICO.
    2. Назовите файл иконки favicon.ico и сохраните его в корневой папке вашего сайта.
    3. Добавьте следующую строку внутри тега вашей HTML страницы:
     rel="icon" href="favicon.ico" type="image/x-icon"> 

    Если иконка не имеет формата .ico, а например .png, то нужно указать соответствующие расширение файла.

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

    Иконка во вкладке

    А как тогда вообще сделать, раньше получалось и с .png, только не помню как. Подскажите, как сделать.

    11 июн 2011 в 18:40
    Если файл на месте — попробуйте убрать спецификатор типа файла — он некорректный.
    11 июн 2011 в 18:45
    Что-то нефига не выходит! =(
    11 июн 2011 в 18:47
    @iwowa Уважаемый участник, не надо использовать без надобности восклицательные знаки.
    11 июн 2011 в 18:47

    1 ответ 1

    Сортировка: Сброс на вариант по умолчанию

    Для явного указания местоположения favicon.ico необходимо вписать cледующую строку в код страницы вашего сайта внутрь секции head:

    Если не цепляется, то

    1. проверить пути (положить в корень),
    2. проверить разные форматы и размеры (png, ico и тп.),
    3. проверить разные браузеры (IE или Chrome),
    4. проверить соответствие type (type=»image/png» для png).

    Отслеживать
    ответ дан 12 июн 2011 в 17:31
    34.5k 25 25 золотых знаков 97 97 серебряных знаков 214 214 бронзовых знаков

    • html
    • html5
      Важное на Мете
    Похожие

    Подписаться на ленту

    Лента вопроса

    Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

    Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.15.1019

    Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

    Favicon сайта

    Фавикон (Favicon) — это иконка, которая отображается рядом с названием страницы во вкладке браузера. Также данный значок отображается в сниппете сайта на странице результатов поиска в некоторых поисковых системах, например Яндекс и mail.ru.

    Что такое фавикон?

    Фавикон повышает узнаваемость сайта во вкладке браузера, повышает кликабельность в результатах выдачи Яндекса, также он может способствовать уровню запоминаемости ресурса.

    Что такое фавикон наглядно

    Как установить фавикон

    Для установки favicon нужно иметь подходящее изображение. Оно должно быть размером 16×16 пикселей и иметь формат .ico. Фавикон можно создать самостоятельно или выбрать из существующих на специальных сайтах.

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

    Для добавления favicon необходимо разместить следующий html код:

    В атрибуте href указывается адрес соответствующего файла.

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

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *