Как нарисовать иконку для сайта favicon.ico
Мой сайтик долго и грустно существовал без иконки, и сегодня я решил исправить эту
несправедливость. Если вы пока не догадываетесь, о чем я сейчас начал разговор, то
обратите внимание на маленькое изображение рядом с адресной строкой в вашем браузере —
вот про эту иконку. А теперь подробности.
Размер изображения, в который нужно уложиться при создании иконки сайта — 16х16 пикселей. Не очень большое поле для творческой деятельности, не правда ли? Однако, при правильном подходе и здесь можно создать что-то оригинальное. Мой сайт — это персональный блог, поэтому я решил втиснуть в такой маленький размер свой портрет ) Не буду врать, я не сразу нарисовал то, что сейчас можно наблюдать в результате.
Немного о процессе. Необходимо создать графический файл в 256 цветах. Для выполнения задачи подойдет любой графический редактор. Удобно увеличить масштаб изображения во время работы до 2000%. Сохраните плоды своей творческой деятельности в файл GIF, можно использовать прозрачность. Затем переименуйте файл favicon.gif в favicon.ico и загрузите на хостинг в корневую папку сайта.
Это еще не все. Необходимо сообщить браузеру, что на вашем сайте нужно искать иконку. Поместим внутри тега <head> следующий код:
Вот что получилось у меня (прозрачный фон я заменил голубым цветом):
Размер изображения, в который нужно уложиться при создании иконки сайта — 16х16 пикселей. Не очень большое поле для творческой деятельности, не правда ли? Однако, при правильном подходе и здесь можно создать что-то оригинальное. Мой сайт — это персональный блог, поэтому я решил втиснуть в такой маленький размер свой портрет ) Не буду врать, я не сразу нарисовал то, что сейчас можно наблюдать в результате.
Немного о процессе. Необходимо создать графический файл в 256 цветах. Для выполнения задачи подойдет любой графический редактор. Удобно увеличить масштаб изображения во время работы до 2000%. Сохраните плоды своей творческой деятельности в файл GIF, можно использовать прозрачность. Затем переименуйте файл favicon.gif в favicon.ico и загрузите на хостинг в корневую папку сайта.
Это еще не все. Необходимо сообщить браузеру, что на вашем сайте нужно искать иконку. Поместим внутри тега <head> следующий код:
<link href="favicon.ico" rel="icon" type="image/x-icon">
После всех манипуляций, иконка должна появиться возле адресной строки. Возможен такой случай, что
этого не произошло — очистите кэш браузера. Осторожно и внимательно! Чистите только кэш )Вот что получилось у меня (прозрачный фон я заменил голубым цветом):
Обсуждение
Никто не оставлял здесь комментариев.
Войдите на сайт, чтобы присоединиться к обсуждению.